Web Designer Wall
Tutorials

The Basics of CSS3

By Aigars Silkalns 1 min read

Last week I posted a CSS3 dropdown menu and someone complained that I didn’t explain the CSS code in detail. Well, here is a post on the basics of the new properties: text-shadow, box-shadow, and border-radius. These CSS3 properties are commonly used to enhance layout and good to know.

RGBA

The first three values are RGB color values and the last value is the level of the transparency (0 = transparent and 1 = opaque).

RGBA

RBGA can be applied to any properties associated with color such as font color, border color, background color, shadow color, etc.

RGBA 2

Text Shadow

Text shadow is structured in the following order: x-offset, y-offset, blur, and color;

screenshot

Set a negative value for x-offset to shift the shadow to the left. Set a negative value for y-offset to shift the shadow to the top. Don’t forget you can use RGBA values for the shadow color.

text shadow 2

You can also specify a list of text-shadow (separated by a comma). The following example uses two text-shadow declarations to make a letter press effect (1px top and 1px bottom).

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

text shadow 3

Border Radius

The shorthand for border radius is similar to the padding and margin property (eg. border-radius: 20px). In order for the browsers to render the border radius, add "-webkit-" in font of the property name for webkit browsers and "-moz-" for Firefox.

border radius

You can specify each corner with a different value. Note Firefox and Webkit has different property names for the corners.

border radius

Box Shadow

The structure for box shadow is same as the text-shadow property: x-offset, y-offset, blur, and color.

box shadow

Again, you can apply more than one box shadow. The following example is a list of three box shadow declarations.

-moz-box-shadow:
-2px -2px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);

box shadow 2

Keep reading

Tutorials

CSS Gradient Text Effect

Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you…

2 min read

Tutorials

iPhone Gift Ribbon

I recently spotted an iPhone ad which inspired me to write this tutorial. It is a gift ribbon, consisting of various app…

2 min read

202 comments from the archive

  1. Great to know that you can apply more than one shadow, that’s excellent :D Thanks Nick!

  4. Nice simple explanations, thanks Nick. Echoing Christina, it’s great to know you can apply more than one shadow :)

  5. Wow, I didn’t know the tip for different box shadows, it’s perfect for buttons!

  7. I already knew about most of these. Some great new additions. Thanks!

  8. Nice! I didn’t know you could apply more then one shadow at a time. Thanks for this! :D

  9. The multiple shadows was indeed interesting, a good use might be as a background for smaller images in blogs etc. Thank you!

  11. Wow, some great content there. I’m really looking forward to implementing all the new features that CSS3 is going to bring to the table. I can’t wait to see how DubLi can be changed!

  12. So much cool stuff in CSS3….I can’t wait until it is fully adopted (whenever that will be) and we can use it without any worries about browser support.

  13. I’m really looking forward to using some of these techniques… and then having to convince clients to update their browsers.

  14. CSS3 is definitely coming into play with more designers and developers implementing it into their projects. I wish the majority leader browser would modify Triton with the latest standards.

  15. This is a great roundup of the basics, thank you for this post! Maybe something to add would be notes of specific browser incompatibilities?

    Thanks again! Awesome.

  16. CSS3 is amazing! can’t wait until the browsers catch up so i can actually use it regularly though…

  17. Really thanks for these tips…
    I didn’t think using CSS3 was so easy and helpful!

  18. Very clear and concise. Beautiful presentation. Thanks so much!

  19. Couple small complaints about this overall good article.

    On the Border radius the four corners demo does not have the normal border-radius. This only lets it work in Gecko and Webkit. Opera which properly renders the border-radius gets ignored as will future versions of gecko and chrome.

    And you did the same thing on the box-shadow part except you just completely ignored the box-shadow css3 element.

    Adding -moz and -webkit is not css3. The box-shadow and border-radius are css3. Please fix you examples so that the effects are learned and used correctly instead of how they are shown.

  20. nice post, with this basic, i can improve my css3 skill.
    i use the basic for my article, u can see another example in my blog here.

  22. Great, quick post. I wasn’t aware of the multiple box-shadow capability!

  24. Yes, i thought the moz and webkit prefixes where CSS2.1? And Jordan, i think you mean trident. ;-) ie sux.

  26. Well now that its summed up its time to play about a wee bit more :) Thanks.

  28. Border Radius & Four Corners are not working under IE 7 & 8. Please check css and send me working css in IE. according to me same css should work on all browsers.

  29. Hiren, webkit- or moz- border radius is not supported in IE 7 or 8. I’m not sure about the border-radius element, but I also doubt that works, especially in IE 7.
    And to say that the same css should work in all browsers is definitely wrong.

  30. This is a really good follow up post from the last CSS3 post.
    The R, G, B, A technique is really useful for overlaying divs on a textured background. Another great technique is applying text shadows. It’s a shame they aren’t supported by ie yet.

  31. Hi joey, we make site should be compatible in all browsers and not for only mozilla. option is very nice but should be working under all.. anyways this site has useful information but need to check working under all :)

  32. good overview… these basics are already quite popular as far as i can see, but a lot of the time, it’s still down to developers to use hacks/images to get things like rounded corners in place. hope the spec is signed off quickly so we can just get to grips with these powerful additions!

  33. The only issue I see is that we have to give up hex codes in favor to RGB values with the RGBA thing… Apart from that, GREAT!

  34. Hiren, I completely agree. When you make a site, it should look good in every browser. I didn’t mean to imply anything different. All I was saying is that IE doesn’t support the majority of CSS3. This has nothing to do with how the CSS is written. The problem lies with IE and not the above mentioned CSS.

  35. Great introduction, thanks.
    In your border-radius example shouldn’t ‘border-radius’ come below moz- and webkit- versions so that as all browsers start to support the default ‘border-radius’ css this is the one that overrides?

  38. I’m a bit confused… I learned to use fontbased sizes like em in my CSS. Isn’t this also best practice for border-radius etc.?

    If so – why are your examples with px?

  39. this is very useful info. lets start work on css3. this article will help me a lot.

  40. Hi all,

    Free check your website worth:

    websitereckon.com

    WebsiteReckon contains a collection of useful features such as checking Google Page Rank (PR), Compete and Alexa Traffic Rank, Backlinks Checker, Server IP and Location on Google Map, DMOZ and Yahoo Directory Listings and more. You can use it for various purposes include doing research before buying or selling website; want to find out how popular the website is; use it as SEO analytic tool to improve your site performance; or just about curiosity.

    websitereckon.com

  41. Thanks for (x-offset, y-offset, blur, color) explanation.

  43. I have made Internet Explorer crash just by looking at it. NOW I AM BECOME DEATH DESTROYER OF WORLDS

  44. I’ve bookmarked this excellent round-up for a quick and easy reference when trying to explain how CSS3 elements can enhance the overall design in supporting browsers. Personally, I love making subtle improvements to my designs with these specifications, especially when the load on the server is minimized by the lack of images in order to create these effects.

    Thanks for the simple explanations =]

  45. Nice introduction! Now, that css 3 has emerged, designer + coder will use less image editing software for this kind of effects. However, I’m pretty sure IE users will still left behind for this. Come on, Microsoft! Get your game ahead! It’s time to move in alignment with open source, web compliant browser!

  46. Great article. I really didn’t know you could apply more than text shadow or box shadow to an element. Nice one!

  47. The latest versions of Firefox (and possibly earlier version) support a spread value for box shadow, works just the same as in Fireworks, Photoshop, etc.

    Heres a great box-shadow article you can read, found it on MDC. Shows you seam really neat effect you can achieve.

  48. Very good tutorial, and simple as well. It’s crucial the webmasters learn now the basics of CSS3 :)

  49. Always include the standard CSS3 declaration after borwser prefixed versions, the prefixes will be removed once made a stable spec, so you need forward compatibility.

    Also, FYI, the box-shadow method has actually been removed form the CSS3 background and borders module, it may be reintroduced after further discussion, but there’s always a chance it might not be.

    From the W3C:

    This module previously defined a ‘box-shadow’ property. This feature has been removed from this module for further discussion, and should reappear in another CSS module (or a later version of this module) in the near future.” – http://www.w3.org/TR/css3-background/

  50. Great post, I’ve tried out some CSS3 on my new site here

    Attack From Planet B

    I used Box Shadow on my images

  51. What is your website worth?

    Calculate your website real value and earning:

    websitereckon.com

    thanks

  52. yes you are right

    WebsiteReckon.com outstanding web analytic tools on the internet today. You can use it for FREE. More than website value calculation, are target specific Traffic, pageviews. Fantastic!

  53. Hey Nick.

    Yes, nice post thanks. I posted on these topics several times. But, this one is good enough to stand on its own.

    I guess I just have a question for everyone? Is anyone else worried that too much power is being given with CSS3? Does everyone remember back to about 2000 when everyone and their mom said they were a web designer/webmaster? That spawned such puke such as Front Page and Fusion.

    Anyway, with @font-face, border-radius, text-shadow, animations, transitions, etc available, are we worried that sites are going to go too far we these? Hell, people spend years studying typography. And now with cool sites like fontsquirrel, I can add Franklin Gothic Templeton Moron san-serif to my page without a hitch! Might websites go from one extreme (6 crappy fonts) to the other (millions) without people properly understanding the complexities of the subject?

    Anyway, just ranting I guess. I am personally so excited about the web these days! I hope everyone else is too!

    Cheers,
    TATEMAN

  55. Great tutorial!I’m not a web designer myself but i really enjoy what you shared here.I will apply this on the basic CSS work in the future.

  56. I have recently tried CSS3, this helped me alot, thanks for the tutorial! Very helpful.

  57. I have recently tried some CSS3 on my site, this was really helpful, thanks for the tutorial.

  59. CSS3 is one of the most potential carrying systems ever. Glad to see its expansion and growth moving rapidly.

  61. FFS install a god damn spam detector this site is ghetto’d with the spam

  64. I would also love it if all readers could please try to restrain themselves for thanking every article. Yes, they are great and we all learn alot from them, but why can’t you comment when you actually have something to contribute? 100 comments with “Thanks :)” give the author butkiss and other readers a chance to miss the actual useful comments. (PS! I don’t mean to be rude..)

  66. Julius: So… what does your comment contribute? Or are you the pot calling the kettle black….

    Anyway… THANKS ;) for this. I’m excited about these new tools but I’m so scared of all the hideous drop shadows we’re probably going to see… ack!

  67. Julius,

    Thank YOU for setting some guidelines here on your blog.

    Nick,

    This was a wonderful post. THANK YOU. I’m going to print it out and use it as a reference. Hopefully other browsers will catch up and enable webkit soon; it’s a shame that many users can’t see these awesome attributes.

  68. I didn’t realize text-shadow or box-shadow accepted multiple values… very nice!

  69. The four corner radius is great, real freedom there to style other wise boring boxes without using images Great!

    How compatible are these styles though? I work in the latest firefox on mac but wonder what they would look like on an old PC somewhere in the dark depths. Probably just as square corners?

  71. I haven’t really started using much css3 as of yet, still a bit concerned about the compatibility with browsers etc, however I’m trying to get to grips with things as it’s only a matter of time before it becomes the norm.

    I hadn’t thought about using different radius values for individual rounded corners, could produce some interesting effects.

    It seems like there’s so much to learn with css3,

    thanks for the info :o)

  74. “Border Radius” CSS this is working only in mozillia not working in IE 7, IE8
    please provide soulation if you have so it can work In IE also

  75. quote – “The following example is a list of three box shadow declarations”

    I had no idea you could apply multiple shadows on one element.. but of course it makes sense.

    Great stuff

  76. @chinu

    -ms-border-radius was suposed to work in IE8 i don’t know if it were a rumor or true.

    don’t know if some “filter / -ms-filter” would do the trick in IE7 too ..

    also:
    -khtml-border-radius (Konkeror)

    and:
    border-radius (opera)

  77. great stuff…………..

    WebsiteReckon.com outstanding web analytic tools on the internet today. You can use it for FREE. More than website value calculation, are target specific Traffic, pageviews. Fantastic!

    nice site design ………..

    websitereckon.com

  86. Just found this great site for css3. Seeing as there are some quite lengthy bits this is a good way of helping you not forget the syntax. You can edit the css sheet on the fly, delete parts and copy them to the clipboard!

    http://css3please.com/

  87. great article! lots of good information to help people get started with css3
    I just wish that Internet Explorer would keep up with the new web trends the way that other browsers do.

  88. Very good, css3 and html5 will be the best web design standard in future. but the browser can not totally support it

  89. Thaaaaaank you : )))

    Clear an useful …

    You have been bookmarked.

    Bests

    Sam

  92. So helpful, you should write more of these kinds of posts. You explain things really well. :)

  94. covers the basics… would really like to see more advanced features with CSS3

  96. Multiple backgrounds is too cool. I can see this coming in handy in many different ways. The CSS gradients will also be a great way to save on loading time. No more images when this is accepted as a standard. Great article!

  98. thank’s, it’s Amazing, i like rounded box shadow but still have bug in ie….

    ————————————————————————————————
    sorry for my bad english…

  100. The Shadow & rounded corner stuff are not supported by IE, how to fix that one can you explain me..

  107. Thanks so much for the excellent css3 tutorials. This is just what I was looking for.

  113. i think still much the excess of css 3..
    let gathering it together…
    study study and much study…
    :) nice post
    God Bless you

  114. Thanks so much for the excellent css3 tutorials. This is just what I was looking for.

  137. Wow this was really helpful. I never knew about these new properties in CSS3. This is exciting! Thanks.

  143. hello, I really appreciate your introduction about CSS3
    I just transfered this article and show it on my blog
    (the demo pictures are upload onto my blog’s album, that I think would not occupied any flow of your sites :DD )
    And I also put the link at top of my transfer article.
    If you don’t like this, please tell me and I’ll hide the article, and just store it for self learning!

  147. Oh God you are a genius person and a good photographer i like your pics thanks.

  148. Thanks a lot for sharing this! Great post! And no this won’t be support by IE until version 9 is released.

  149. thank you for the post, i was looking for the border radius for a long time,
    but is it working on IE

  151. Very informative and illustrated.
    Thanks Nick.
    -Vaishakh Pushpoth

  152. tnank you very much for you post, without this I’m never know CSS3,,,

  153. Nice tutorial on CSS3. I always eager to know about CSS3 more and more. Thanks for sharing.

    Los Angeles Web Design

  156. I’m new to web design and have been wondering how these effects were done. Now my problem is that I can’t fugre out why it won’t work in Dreamweaver CS3. Any ideas?

  158. You made shadows clear and taught me about creating multiple shadows. You will be one of the giants on whose shoulders I stand.

  159. As iphone 4 white 3GS has something of non-update to the iPhone range, but there are finally decent alternatives in the smartphone market, with the HTC Desire and Samsung Galaxy S leading the Android fight right to Apple’s door.

  162. I am on the lookout for such information white iPhone 4 .I also love the images you put in here. They fit so well with what youre trying to say. Im sure youll reach so many people with what youve got to say

  163. Hi
    this is really good,
    Interesting post about The Power of Information Review launches
    Good day

  164. Thanks a lot dude. I needed such a simple and descriptive reference to CSS3 basics.

  165. White iphone 4 avaiable! It’s a great news to tell you the latest white iphone 4 Conversion Kit is on sale. Get the chance to make your iphone more charming!

  166. You’ve know idea how much time this has saved me in the forums thanks so much !

  169. This is an awesome guide. Used it for some of my text and box shadows

  170. Great review — love pierogies — they are my comfort food reminding me of my dad that ate them often on Saturday nights uggs outlet

  171. I am on the lookout for such information white iPhone 4 .I also love the images you put in here. They fit so well with what youre trying to say. Im sure youll reach so many people with what youve got to say

  174. Why can’t my professors be as brilliant as you…? You should have a school!

    1. yea, I know what you mean. I looked for that a lot as well heheh

  177. This is so cool. I love it. I’m a CSS beginner and I like it so much. I learned “old css” and learning the new capabilities of CSS3 is just awesome. Thank you so much.

    Bookmarked it for later, this is very interesting.

  182. @Ruth –

    “text-shadow”:
    h1 {
    color: #8B0000;
    text-shadow: 5px 5px 5px #FF8C00;}

    “border-radius” would be used with the ‘border’ property:
    #box {
    border: 2px solid;
    border-radius: 25px;
    -moz-border-radius: 25px;}

    “box-shadow”:
    #box2 {
    background-color: yellow;
    width: 250px;
    height: 150px;
    box-shadow: 10px 10px 5px #888888;
    -webkit-box-shadow: 10px 10px 5px #888888; }

    Hope this helps.

  183. Would it not end up being okay to apply your Rss or atom regarding this site?

  185. Would it not end up being okay to apply your Rss or atom regarding this site

  187. You could have more cross-browser compatibility with:

    BORDER:
    -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
    -moz-border-radius: 12px; /* FF1-3.6 */
    border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

    BORDER SHADOW
    -webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3-4, iOS 4.0.2 – 4.2, Android 2.3+ */
    -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5 – 3.6 */
    box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */

    Nice tutorial by the way!

  191. Very helpful tutorial! I knew about text-shadow, but using -1px to create a letterpress effect is new to me.

Comments are closed on this article.