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);
Very helpful post, cleared up some things for me. Thanks!
Great, quick post. I wasn’t aware of the multiple box-shadow capability!
Thanks really gerate summary… this will save me a lot of time!!
Yes, i thought the moz and webkit prefixes where CSS2.1? And Jordan, i think you mean trident. ;-) ie sux.
That stopped me from scratchin my head… Thanks!!
Well now that its summed up its time to play about a wee bit more :) Thanks.
Amazing tips! Thanks so much!
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.
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.
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.
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 :)
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!
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!
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.
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?
I needed it! Thank you!
I needed it! Thank you!
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?
this is very useful info. lets start work on css3. this article will help me a lot.
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