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);
Thanks for (x-offset, y-offset, blur, color) explanation.
Useful post. Thanks! :-)
I have made Internet Explorer crash just by looking at it. NOW I AM BECOME DEATH DESTROYER OF WORLDS
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 =]
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!
Great article. I really didn’t know you could apply more than text shadow or box shadow to an element. Nice one!
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.
Very good tutorial, and simple as well. It’s crucial the webmasters learn now the basics of CSS3 :)
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:
Great post, I’ve tried out some CSS3 on my new site here
Attack From Planet B
I used Box Shadow on my images
What is your website worth?
Calculate your website real value and earning:
websitereckon.com
thanks
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!
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
very helpful. Thanks much!
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.
I have recently tried CSS3, this helped me alot, thanks for the tutorial! Very helpful.
I have recently tried some CSS3 on my site, this was really helpful, thanks for the tutorial.
Simple and clear, perfect!
CSS3 is one of the most potential carrying systems ever. Glad to see its expansion and growth moving rapidly.
Calculate your website real value and earning:
websitereckon.com