Mar 03
The Basics of CSS3
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);
Update: Social Media Icons Update: InMotion Hosting Winners
Comments
Pages: 15 14 13 12 11 10 9 8 7 6 5 … 1 » Show All
There are 145 comments (+Add)
Pages: 15 14 13 12 11 10 9 8 7 6 5 … 1 » Show All
Loading ...
145 sandro
August 15th, 2010 at 11:27 pm
only for me, It doesnt work for IE?
144 pinksylvia http://pinksylvia.pixnet.net/blog
August 13th, 2010 at 11:26 pm
oh
I forgot to say
Thank you :))
143 pinksylvia http://pinksylvia.pixnet.net/blog
August 13th, 2010 at 11:25 pm
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!
142 Shahid http://www.shahidsaifi.com
August 13th, 2010 at 4:49 am
Thanks for Nice and useful CSS3 info…
141 artistic-solutions http://best-website-templates.co.cc/
August 12th, 2010 at 1:54 am
Very helpful information thanks for share!
140 stone crusher http://www.crusherwebsite.com
August 9th, 2010 at 12:42 am
I like it. I’ll try soon.
139 محطم http://www.crushermachines.biz
August 7th, 2010 at 1:59 am
Actually,I like you blog’s comment board more.HAHA..Thanks.
138 Solo http://www.fantasyla5.tk
August 4th, 2010 at 1:16 am
Thanks to your shared..
137 Ian Topple http://www.iantopple.com
July 30th, 2010 at 10:31 am
Wow this was really helpful. I never knew about these new properties in CSS3. This is exciting! Thanks.
136 alfred
July 28th, 2010 at 2:33 am
i want to know how to design a website
which will be successeful