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).
RBGA can be applied to any properties associated with color such as font color, border color, background color, shadow color, etc.
Text Shadow
Text shadow is structured in the following order: x-offset, y-offset, blur, and color;
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.
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;
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.
You can specify each corner with a different value. Note Firefox and Webkit has different property names for the corners.
Box Shadow
The structure for box shadow is same as the text-shadow property: x-offset, y-offset, blur, and color.
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);
Great to know that you can apply more than one shadow, that’s excellent :D Thanks Nick!
Nicely explained!
Good article, as always Nick! Keep it up!
Nice simple explanations, thanks Nick. Echoing Christina, it’s great to know you can apply more than one shadow :)
Wow, I didn’t know the tip for different box shadows, it’s perfect for buttons!
I guess sarcasm doesn’t really register with the readers, huh…
I already knew about most of these. Some great new additions. Thanks!
Nice! I didn’t know you could apply more then one shadow at a time. Thanks for this! :D
The multiple shadows was indeed interesting, a good use might be as a background for smaller images in blogs etc. Thank you!
thanks for placing all the basics in one simple post :)
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!
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.
I’m really looking forward to using some of these techniques… and then having to convince clients to update their browsers.
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.
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.
CSS3 is amazing! can’t wait until the browsers catch up so i can actually use it regularly though…
Really thanks for these tips…
I didn’t think using CSS3 was so easy and helpful!
Very clear and concise. Beautiful presentation. Thanks so much!
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.
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.