How To Create Depth And Nice 3D Ribbons Only Using CSS3
- 10 January 2010
- Tutorials, Web Design
- This post was written exclusively for PV.M Garage by Piervincenzo Madeo
- Comments (448)»
In this last period on PV.M Garage we have described many trends of the modern Web Design and many techniques for creating stunning and impressive web sites.
In one of our tutorials we learned how to realize a nice 3D ribbon and how to play with the drop shadow in Photoshop to simulate depth in a web design layout. This is a widespread trends in recent web design: creating a 3D perception in a website and simulating a “world” in three dimensions are two great ways for the designers to play with their skills.
Thanks to useful graphic softwares (2D) we can easily create 3D elements, like ribbons and shadows, but we can also reproduce 3D scene using perspective, focus, color shading and opacity. There is also the possibility of using 3D softwares, like Blender, to create some 3D objects and images that we can use in our designs. There is an interesting article on CreativityDen about the fundamental ways of adding depth in web design works; it explains six basic techniques to simulate the 3D perception in our works and I suggest an attentive reading.
Many beautiful web sites have a wonderful, balanced, three-dimensional perception and it’s clear that this kind of layouts use, in a clever way, images (generally in the background property), lines and some CSS techniques to create the illusion of depth (there is a brilliant post, by Henry Jones on Web Design Ledger, about the use of 1px line to simulate the depth). Below some examples.
DesignM.ag
Blogof.FrancescoMugnai.com
Yoast.com
From-The-Couch.com
Wait, wait, wait. We are web designers, right? We have two great allies to realize our daily projects: HTML and CSS.
The improvements for these languages have been considerable and now the question in my mind is: could we build 3D elements and create depth only using HTML and CSS?
Barack Obama could say “Yes, we can!”
Sure? Yes, it’s possible to create a simple and nice (3D) layout playing with some CSS3 properties, only using code and without the help of Photoshop.
We Want to Make 3D Elements Without Images
There are some properties of the CSS3 languages that can help us to accomplish this mission.
We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds.
RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.
background: rgba(196,89,30,0.65);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
Other great new property: border-radius, that allows us to add nice rounded corners on box-items.
-moz-border-radius: 10px; /*radius of 10px*/ -khtml-border-radius: 10px; -webkit-border-radius: 10px;
We will also use particular borders to create useful triangles for building a nice ribbon. Below the CSS code to draw an arrow (read Creating Triangles in CSS to know more about this techinque).
.triangle {
border-color: transparent #7d90a3 transparent transparent;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
}
The arrow is useful to reproduce the depth for some 3D elements, like a ribbon. Box-shadow helps us to create depth through shadows. Border-radius, instead, is just to add rounded corners where we want to utilize this solution.
See the image below to deduce how we will use the CSS triangles, the shadows and the rounded corners.
We will create a simple menu, through an unordered list, using the transform property for the single items of the list to make a nice effect.
-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);
Below you can see the final result of our efforts. You can also download the archive with the source files and see the live demo.
How To Make a CSS Based 3D Layout
First of all we set up our files. We create a new folder with index.html and style.css.
We prepare the HTML document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS Ribbon</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- 3D Stuff --> </body> </html>
Take a look at the following image to understand how we will realize the “structure” in our index.html file.
Well, as you have just seen in the picture we need a main container (centered), a bubble for the contents, and three elements for the ribbon: a rectangle and two triangles.
<div id="container"> <!-- Main Container --> <div class="bubble"> <!-- Bubble --> <div class="rectangle"><h2>3D CSS Ribbon</h2></div> <!-- Rectangle with a title --> <div class="info"> <h2>I Have Used Only CSS, friends!</h2> <p> For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.<br />It doesn't work with IE! </p> <p> <a href="#">Go to the tutorial!</a> </p> </div> </div> </div>
The CSS code to style the basic elements (container, bubble and rectangle) is the following.
/* Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, font, img, ul, li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
:focus {
outline: 0;
}
/* // Reset */
body {
background: url(bck.jpg); /* image for body made with Photoshop using noise filter (gaussian monochromatic) on #ccc */
font-family: Georgia, Verdana, “Lucida Sans Unicode”, sans-serif;
font-size: 12px;
color: #999;
}
h2 {
font-style: italic;
font-weight: normal;
line-height: 1.2em;
}
div#container {
margin: 50px auto 0px auto; /* centered */
width: 400px;
}
.bubble {
clear: both;
margin: 0px auto;
width: 350px;
background: #fff;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}
.rectangle {
background: #7f9db9;
height: 50px;
width: 380px;
position: relative;
left:-15px;
top: 30px;
float: left;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
z-index: 100; /* the stack order: foreground */
}
.rectangle h2 {
font-size: 30px;
color: #fff;
padding-top: 6px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
text-align: center;
}
Below the result of these statements.
We add the two classes to make and place the triangles in style.css… and we also add the style for the content (class info).
<div id="container"> <div class="bubble"> <div class="rectangle"><h2>3D CSS Ribbon</h2></div> <div class="triangle-l"></div> <!-- Left triangle --> <div class="triangle-r"></div> <!-- Right triangle --> <div class="info"> <h2>I Have Used Only CSS, friends!</h2> <p> For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.<br />It doesn't work with IE! </p> <p> <a href="#">Go to the tutorial!</a> </p> </div> </div> </div>
We add the two classes to make and place the triangles in style.css… and the style for the content (class info).
.triangle-l {
border-color: transparent #7d90a3 transparent transparent;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: -30px;
top: 65px;
z-index: -1; /* displayed under bubble */
}
.triangle-r {
border-color: transparent transparent transparent #7d90a3;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: 350px;
top: 35px;
z-index: -1; /* displayed under bubble */
}
.info {
padding: 60px 25px 35px 25px;
}
.info h2 {
font-size: 20px;
}
.info p {
padding-top: 10px;
font-size: 14px;
line-height: 22px;
}
.info p a {
color: #c4591e;
text-decoration: none;
}
.info p a:hover {
text-decoration: underline;
}
Here the result.
We create a nice menu on the top. Below the markup.
<div id="container"> <div class="menu"> <ul> <li class="l1"><a href="#">CSS3</a></li> <li class="l2"><a href="#">is really</a></li> <li class="l3"><a href="#">powerful</a></li> </ul> <span>by PV.M Garage</span> </div> <div class="bubble"> <div class="rectangle"><h2>3D CSS Ribbon</h2></div> <div class="triangle-l"></div> <div class="triangle-r"></div> <div class="info"> <h2>I Have Used Only CSS, friends!</h2> <p> For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.<br />It doesn't work with IE! </p> <p> <a href="#">Go to the tutorial!</a> </p> </div> </div> </div>
The style for our top-menu.
.menu {
position: relative;
top:3px;
left: 50px;
z-index: 80; /* the stack order: displayed under bubble (90) */
}
.menu ul li {
-webkit-transform: rotate(-45deg); /* rotate the list item */
-moz-transform: rotate(-45deg); /* rotate the list item */
width: 50px;
overflow: hidden;
margin: 10px 0px;
padding: 5px 5px 5px 18px;
float: left;
background: #7f9db9;
text-align: right;
}
.menu ul li a {
color: #fff;
text-decoration: none;
display:block;
}
.menu ul li.l1 {
background: rgba(131,178,51,0.65);
}
.menu ul li.l1:hover {
background: rgb(131,178,51);
}
.menu ul li.l2 {
background: rgba(196,89,30,0.65);
}
.menu ul li.l2:hover {
background: rgb(196,89,30);
}
.menu ul li.l3 {
background: rgba(65,117,160,0.65);
}
.menu ul li.l3:hover {
background: rgb(65,117,160);
}
.menu span {
margin: 15px 80px 0px 0px;
float:right;
}
Here you can se the simple menu.
Our 3D layout is ready. It’s so sexy, I hope you find the final result attractive and inspiring.
Conclusions
I think this kind of solution is useful to improve the performance of the website holding a great 3D effect. There is great question: Internet Explorer and Opera have some problems with CSS3. But this is not an impediment because we are looking to the future. So, if you are browsing the web with IE, please consider to install Mozilla Firefox or Google Chrome or Safari. Some screenshots from different browsers (Windows 7 OS).
Finally, it’s a good idea to validate the code.
W3C Validation
Response: “This document was successfully checked as XHTML 1.0 Strict!”
25 Great Stock Images Plus with $100 Subscription Giveaway
Entrepreneurs that inspire you to grow your internet business
Unique Handwritten Free Fonts For Your Next Designs
A Roundup of 45 Industrial Free Fonts
55 Unconventional And Original Free Fonts For An Unique Design
Wow awesome article Piervix, thanks for comparing the effect between browsers, I’m always too lazy to do that :)
This is an awesome article.. unique! Thanks for sharing great stuff!!!
Great tutorial piervix. I always feel to move forward but these older browsers doesn’t allow me :)
These ribbons looks quite nice. I used to do it in my own ways. This looks cool.
Lol, brilliant, but how exactly did you make the menu links rotated???
CSS is getting even better! I like the new features I hope other browsers add support asap!
Voted! Thanks for this brilliant article Pierevix =)
WOW Great tutorial!
thanks man
I never thought of doing it this way. One of the more original articles I have read lately.
Excellent article and tutorial. I just did all I can to promote it, hit all the social promotion buttons and I stumbled and retweeted it. It was worth it.
Thanks for going into detail and explaining it to us step by step and for providing the screenshots for different browsers and even the validation. (Thumbs-up) :)
Great tutorial you have here!
Thumbs-up and more than a digg :))
Very good looking and creative example. The missing border radius doesn’t even look “bad” in IE, the only thing that really doesn’t work is the rotation.
It would be interesting to see an example using IE’s matrix filters to complete the look.
Love this tut. bookmarked and super useful. thanks for sharing.
Love your website! Everything so so clean and beautiful!
have to implement this one soon, good article, learnt something new today
Great stuff. For those hesitant to use CSS3 features, check your analytics. 3% of my visitors are on IE in all of it’s silly flavors. I have no problem ignoring them :P
But for a client project it’s typically over 50%, and so, of course, images win. A real professional (or a guy with enough budget) will present CSS where he can (the good browsers) and images where he can’t.
Superb post! Bookmarked this for a future post. :)
css3 rocks! nice concept here, never really thought of having a triangle before, could be re-usable to create so many different levels of depth if done right!
thank for the info.
Great job. This is an unique article. Thanks for comparing the effect between browsers, so many people not aware about it. Keep sharing your post. Thanks.
I’m sure the effect works well in small doses – I just don’t think it works if used too much – reminds me of the early days using tables and image maps.
wow, this is just brilliant. thanks for this trick.
“it’s really fantastic.
It doesn’t work with IE!”
Hmm… Doesn’t work with the world’s most-used browser? Not really THAT fantastic then, is it?
Images & tables work in all major browsers. A semantic web is a nice idea, but so is world peace. Until then, I’ll be in the trenches.
Most used?
Browser statistics by W3C –> http://www.w3schools.com/browsers/browsers_stats.asp
This post looks to the future, and it’s clear that my goal is simply to explain how to use some new CSS3 properties… simply, my friends…
I think the experiments with new technologies help us to grow as web designers and developers.
Thanks for comment Dan.
Internet Explorer IS the most used browser, even when the statistics at W3C say different.
You also might need to read the footer note:
“W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to use Internet Explorer, since it comes preinstalled with Windows. Most do not seek out other browsers.
These facts indicate that the browser figures above are not 100% realistic. Other web sites have statistics showing that Internet Explorer is used by at least 80% of the users.”
About the article: great one! I didn’t knew the CSS Triangle trick.
One question though; did the CSS validate? ;)
Good!!!!
SO psyched to finally find a tutorial on how to do this!!
wow…!
realy great trick…thanks for share
Nice tutorial mate. Very well written.
Hi, nice article and smart ideas. Since you say we’re looking to the future, I think you should add the standard properties (border-radius, box-shadow, transform) without the -moz etc prefixes as well. The pre-alpha of Opera 10.5 supports this already, and more browsers will come.
Great tutorial about CSS3 with an elegant solution.
Great tutorial piervix.
I think this is a good tutorial, however, it is a lot of css. I still prefer to do it using a couple of images and less css. Thanks for the post though. Good effort!
Just add:
border-radius: 10px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-o-transform: rotate(-45deg);
after similar -webkit- and -moz- stuff and this example will work in Opera as well)
Great tutorial / article! Many thanks
Beautiful post piervix. Very interesting, Thanks for sharing…
-Deepu
You should always always include the normal non-vendor-specific version of CSS properties, even if no browser you know supports them or you know of no plans to add support, because they will always most likely be added in future.
For example, this fails in Opera which supports border-radius and box-shadow (without and -blah- prefix).
Very Cool
Thank you for shared..
Great tutorial !
However, with Chrome and Safari, there is a right margin that appear on the triangle div that can be pretty annoying (Horizontal scrollbar).
You can remove it this way:
.info {padding-top: 120px;}
.triangle-l {position: absolute;}
.triangle-r {position: absolute;top: 65px;}
I ‘ve the same problem with the right margin, but this does not fix it for me.
I’ve no idea where this margin comes from (870px!)
Try this
.info {padding-top: 60px;}
.triangle-l {position: absolute;}
.triangle-r {position: absolute;top: 65px;}
You should always add in the non-vendor-specific attributes in case some browser (current or future) has implemented the standard.
Also, adding -o- attributes wouldn’t hurt.
Nice post, never seen it done that way before!
Awesome article. Quality. Saved to Stumbleupon and hope to use it in my next design. Thank you.
That triangle trick is awesome!
Thank you!
Great tutorial nice explanation
Thanks for sharing your skills
hihi IE sucks :P
But really nice tutorial though!
thnx a lot for sharing this…helped a lot…. :)
Great tutorial… thanks :)
its not a good idea to put in empty div tags just for the rendering of triangles…. XHTML-wise, it semantically makes no sense =(
[quote]
its not a good idea to put in empty div tags just for the rendering of triangles…. XHTML-wise, it semantically makes no sense =(
[/quote]
Yes, i agree with you amy :)
if it fixed layout type, better using background image in parent for creating the triangle. And 3D styling for using technique explained in this tutorial.
If beside fixed layout types, i think it’s better using javascript for that empty div tags.
great information. thanks for sharing.
Great tutorial you have here!
Dear Sir Web Design
Indeed, this good work
I have a problem when i recopy the code of the table ..,the tables is not one near other is come down as you see in my exaple
This is a link example
http://greencorner.us/test.html
Im really tired to try to do something like that http://osdnetwork.org/
Help me i wish you read my comment
thanks alot
I can not stress enough the importance of articles like this stating very clearly the compatibility issues with these techniques. Don’t get me wrong. I absolutely love love love CSS3 and what you can do with it, however until EVERYONE abandons IE6&7, I can’t have my designers coming across something like this and starting the ole “here’s how you do it, easy-peezy!” sentiment.
Great article, but we’re not there yet…
tdb
Nice trick! &)
This is an incredible post. Its amazing to see what CSS3 can do , at the same time its sad a lot of customers still want IE support which sucks at CSS3 big time. I am taking the liberty of adding this article to my CSS aggregator site. Hope you dont mind. :)
[quote]
its not a good idea to put in empty div tags just for the rendering of triangles…. XHTML-wise, it semantically makes no sense =(
[/quote]
Yes, i agree with you amy :)
if it fixed layout type, better using background image in ‘h2′ parent for creating the triangle. And 3D styling for ‘h2′ using technique explained in this tutorial.
If beside fixed layout types, i think it’s better using javascript for that empty div tags.
Awesome tutorial man!
triangle made of borders… *clapping hands*
BIG THANX!
add css rules default
border-radius:…
box-shadow:…
and its work fine on Opera 10.6
realy nice article thank you very much …
very cool tutorial, thanks for sharing!
Great job myfriend ;)
You don’t need to use the rotate tags… it can still work in IE:
http://vartandesign.us.to/ribbon/
Awesome tips! Thanks for sharing it ;)
this is very creative tutorial tanks
if you use css transforms, why don’t you use them for the triangles, too?
you would get the ability to add shadows:
look:
http://red-sheep.de/webdesign/bubble.xhtml
Wow this is a super nice tutorial. And it even works in IE8! Awesome job. CSS3 is sooo much fun.
Awesome, I just spent 2 hrs looking around the web for a how to and shambambo your site pop’d up! Awesome .. thanks again for the information ..
Love it, simple and effective!
Super thanks.
thanks for tutorial. Love it, simple and effective :D
i found out:) Thank you for your article.
Thanks for sharing your article. I really enjoyed it.
really really nice!
but some features are easier in css3
cool……thanks for sharing.
Great tutorial thanks
doors.txt;5;10
wow, great site, will be returning for much further reading to gain more info on this subject. Thanks – keep up the great work!
This Blog is going places, the people, the layout, amazing to see such dedication and focus.
Thanks for the excellent writing. It is nice to finally read someone that can entertain with words.
Thanks a lot! Inspired by this article I wrote a generator for CSS ribbons like this that might be of interest:
http://www.css3d.net/ribbon-generator/
Good tips about dogs. I have an 8 yr old golden retriever and I love him to death. Will come back for sure! .
Super-Duper website! I am loving it!! Will come back again. I am taking your feeds also
Thanks for you to share this.
Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!
Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!
I’ve regularly believed that the best approach to loose weight rapidly would be to just simply reprogram your diet and lifestyle. What I really mean is, should you actually want or must eliminate several pounds, then you’ve to make one fundamental decision – am I going to do this or aren’t I? Once you’ve made your mind up, and you are entirely commited to your success, then next to nothing can stop you.
Directory of restaurants organized by states Bonefish Grill – South Tampa
After study just a few of the weblog posts in your web site now, and I actually like your method of blogging. I bookmarked it to my bookmark website record and will be checking back soon. Pls take a look at my website as nicely and let me know what you think.
Thank you for a great tutorial.
The comments got me curious,
I’m guessing that the “Emad Rashad” comment is spam, and now I just have to see if you accept all comments or actually check them all.
Any chance you’de let out this tutorial under CC for educational purposes? :D
This website is really a stroll-through for all of the data you wished about this and didn’t know who to ask. Glimpse here, and you’ll definitely discover it.
very nice
thanks a lot man
You catch more flies with honey than with vinegar
Very nice effect, would be even better if you can use a shade for the ribbon
The new Zune browser is surprisingly good, but not as good as the iPod’s. It works well, but isn’t as fast as Safari, and has a clunkier interface. If you occasionally plan on using the web browser that’s not an issue, but if you’re planning to browse the web alot from your PMP then the iPod’s larger screen and better browser may be important.
Pretty section of content. I just stumbled upon your blog and in accession capital to assert that I get in fact enjoyed account your blog posts. Any way I’ll be subscribing to your augment and even I achievement you access consistently quickly.
another Facebook co-founder, have donated $170,000 in support of California Proposition 19, a pro-pot measure.flat die pellet mills
small pellet mill
hammermill supplier
thats a good article. Thank you i wish your article will be continue.
I appreciate the info shared here. Please keep up the good work. Best wishes to you..
Love thy neighbour as thy self
i can recommend that too
Hey There. I found your blog using msn. This is an extremely well written article. I will be sure to bookmark it and come back to read more of your useful information. Thanks for the post. I’ll certainly comeback.
All you need is love
hi, good post. Pleas comment my paypal poker www.
All I can state is, I’m not sure what to comment! Except certainly, for the amazing tips that are shared on this blog. I can think of a trillion fun approaches to read the posts on this site. I think I will at last take a step utilizing your tips on those issues I could not have been able to take care of alone. You are so considerate to let me be one of those to benefit from your useful information. Please realize how considerably I am thankful.
Hello There. I found your blog using msn. This is a very well written article. I will make sure to bookmark it and come back to read more of your useful info. Thanks for the post. I will certainly return.
Love is blind
Can I just say what a reduction to search out somebody who truly knows what theyre talking about on the internet. You positively know the right way to carry an issue to light and make it important. Extra people must read this and perceive this side of the story. I cant imagine youre no more popular because you definitely have the gift.
how to get pregnant fast?
awesome, just pure awesome
Wow! Thank you. I always wanted to write in my site something like that. Can I take part of your post to my blog?
I found your blog website on google and verify a number of of your early posts. Proceed to maintain up the excellent operate. I just additional up your RSS feed to my MSN Information Reader. Searching for forward to studying extra from you afterward!…
It’s a really good article from you
It’s a really good article from you
You sure do know what youre talking about. Man, this blog is just great! I cant wait to read more of what youve got to say. Im really happy that I came across this when I did because I was really starting to get bored with the whole blogging scene. Youve turned me around, man!
there is something wrong here right now
lazy boy, lazy lady, lazy girls, lazy men
There are a lot of strange comments on here. People must be using SCRAPEBOXLIST.COM
An interesting discussion is worth comment. I think that you should write more on this topic, it might not be a taboo subject but generally people are not enough to speak on such topics. To the next. Cheers
Your house is valueble for me. Thanks!…
After examine a number of of the weblog posts on your web site now, and I really like your manner of blogging. I bookmarked it to my bookmark web site checklist and will probably be checking back soon. Pls try my site as properly and let me know what you think.
We would like to thank you again for the wonderful ideas you gave Jesse when preparing her post-graduate research in addition to, most importantly, regarding providing the many ideas in a single blog post. If we had been aware of your web page a year ago, we may have been saved the useless measures we were having to take. Thanks to you.
I think your post was interesting. I will visit often!!! I am going to visit again later.
This blog post receives a thumbs up from me.
This web site is really a walk-through for all of the info you wanted about this and didn’t know who to ask. Glimpse here, and you’ll definitely discover it.
interesting technique, thanks for the detailed lesson
I am usually to running a blog and i actually recognize your content. The article has actually peaks my interest. I’m going to bookmark your website and preserve checking for brand new information.
There are some attention-grabbing time limits on this article however I don’t know if I see all of them center to heart. There may be some validity however I’ll take maintain opinion till I look into it further. Good article , thanks and we wish more! Added to FeedBurner as effectively
Being a bridesmaid is an honor and a responsibility. Bridesmaids support the bride emotionally, help with wedding planning tasks of all sorts, and can bear a significant financial burden.
Hi all, I am a frequent user of your site and I love it. I decided to start your website and would like to commend powiekszanie penisa . I hope you too… tony
Thank you for taking the time to write this!
How often are you updating your posts lately? Do you stick to a pretty good blogging schedule?
Greetings! This is my first visit to your blog! We are a team of volunteers and starting a new initiative in a community in the same niche. Your blog provided us useful information to work on. You have done a marvellous job!
Wow great post I love it.
Wow great post I love it.
Thanks for the info on style.css 3D, this is not easy, I just did it on text editor and it works, thanks, I will try it live.
Great article. I particularly like the giant facemask, and I’m surprised that Belichek hasn’t tried it already.
nice one thanks for sharing.
I’m always looking for these kinds of posts but its not easy to find such good information.
How does biomass work?
biomass boilers and stoves work simply by burning renewable sources of fuel like wood to produce heat that can heat either a single room or a whole building. biomass boilers are totally carbon neutral, as long as the fuel is sourced from sustainable forests, because the CO2 given off by the burning of wood is equal to that of the CO2 absorbed from the atmosphere by the tree over its lifetime.
thank you admin I love you blog
We would like to thank you again for the wonderful ideas you gave Jesse when preparing her post-graduate research in addition to, most importantly, regarding providing the many ideas in a single blog post. If we had been aware of your web page a year ago, we may have been saved the useless measures we were having to take. Thanks to you.
You should always always include the normal non-vendor-specific version of CSS properties, even if no browser you know supports them or you know of no plans to add support, because they will always most likely be added in future. Thanks to you.
Hmmm… Nice informations.. But i have some questions. But i cannot want to ask it you because i dont know so good everything. Anyway the world is beatiful. People is beatiful everyone is beatiful for me thanks..
I really enjoyed this article. Thanks for the help. I really like how the ribbons look.
I seem to be having a bit of an issue. I’ve managed to get the tooltip to sit where I want it to in most browsers other then IE9!!
viagra zoloft
great article -enjoyed ita lot – thanks
A very helpful post. Favourited for future reference
Fantastic text message as well as great blog.
Hmm it looks like your website ate my first comment (it was extremely long) so I guess I’ll just sum it up what I wrote and say, I’m thoroughly enjoying your blog. I too am an aspiring blog writer but I’m still new to the whole thing. Do you have any helpful hints for novice blog writers? I’d really appreciate it.
really good and usefull article. thanks man
this site can make anybody as a pro
Thank you for this tutorial!
Thanks so much for sharing this post. I like it very much.
http://www.pelletmill.com
It’s very glad to read that,thanks.
In a letter to the nation’s promotional products second-largest cigarette maker, promotional items the group said Reynolds’ “Break Free Adventure” campaign has substantial youth appeal and may encourage underage tobacco use.
For over 8 years I practice daily reading, I love to read blogs or articles like this, with issues of public concern and a very effective and accurate information. I would say goodbye by making clear that section is spectacular and I would like to receive much more information.
Superb tip! Am developing my site to have a single graphic (the logo) only, so this is a great way to add some style without extra overhead.
Note it is possible to implement this using the :before and :after styles like as :
.rectangle:before {
content: ‘.’;
text-indent: -9999px;
… …
}
Then you don’t even need to modify the markup.
Awesome!
… which doesnt work very well in IE.. Even IE 8..
grrr..
Genius!
Thanks for sharing this fine piece of work.
This is a really lovely tutorial, but I had a question about box-shadow. Is it just me or your browser really lags when scrolling websites which use box-shadow heavily? For example ,there’s this new skin on Blogger which uses box-shadow around the whole content container. When I scroll there, especially if the blog has a photo background, it gets really really slow.
Due to this reason I’m hesitant to use the fancier CSS3 features since using a .png image seems to render way faster than using box-shadow.
The catchy blog with the interesting contents. You give the nice information. most of your contents are make me have more knowledge. it is very different. I was impressed with your blog. Never be bored to visit your website again. Have the nice day. Keep enjoyed your blogging.
thanks a lot for this article, it is very good
This is a really good idea and tutorial. It is a very good way to remind site visitors of some important ways to stay connected, or to simply give out information that demands attention.
nice tutorial, thanks for sharing it and i like your style.
I used some of these things on my site.
However, the border (triangle classes) are in different places in Firefox, Opera, Chrome etc.
I used this to target Firefox specifically. Is there a way to do the same with Opera? Chrome looks fine.
@-moz-document url-prefix() {
.triangle-r
{
code
}
.triangle-l {
code
}
}
The answer of your question is already in the comments
lg
I love your blog.. very nice colors & theme. Did you make this website yourself or did you hire someone to do it for you? Plz reply as I’m looking to create my own blog and would like to find out where u got this from. many thanks.
thanks nice pictures
I do accept as true with all the ideas you have offered to your post. They are really convincing and can certainly work. Nonetheless, the posts are very quick for newbies. May just you please extend them a bit from next time? Thanks for the post.
However, the border (triangle classes) are in different places in Firefox, Opera, Chrome etc.
I seem to be having a bit of an issue. I’ve managed to get the tooltip to sit where I want it to in most browsers other then IE9!!
Close your eyes, I see my future……
Thanks i love your article about 301 Moved Permanently
Abundant site! I light on here all of the rhythm! Hoard up up the terrific urge a exercise!
This is a really good read for me. I don’t really have a bunch to say in response. I just wanted to comment to reply “well done”. It seems like you’ve put a ton of effort into your blog, and I thank you for that.
A lot of my stress comes from money and credit reports, just use this site for unlimited access to your credit report http://bit.ly/qJztzn
I will be back soon and follow up with a response.