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

202 Comments

1 8 9 10
  1. Ruth
    Sep 7, 2011 @ 1:13 am

    These are really BEAUTIFUL, Nick! But just where do I put the codes?

    Reply

  2. Cheryl B
    Sep 11, 2011 @ 6:53 pm

    @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.

    Reply

  3. 360 xbox på spel xbox
    Oct 25, 2011 @ 12:53 pm

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

    Reply

  4. Ahmad Awais
    Nov 10, 2011 @ 10:20 am

    Your tutos made me subscribe your site !
    Very nice tutorials !

    Reply

  5. Moliva
    Dec 9, 2011 @ 8:58 am

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

    Reply

  6. LibertyBloggers
    Jan 1, 2012 @ 10:44 am

    subscribed another great css chack, thank U mate :)

    Reply

  7. Felipe Machado
    Jan 6, 2012 @ 4:44 pm

    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!

    Reply

  8. Prodyot
    Jan 19, 2012 @ 10:45 pm

    Insanely beautiful and useful tutorial.
    Thanks for the tips.

    Reply

  9. bond chiwewe
    Feb 13, 2012 @ 3:30 pm

    basics of css and layout

    Reply

  10. Luthfi All
    May 20, 2012 @ 12:42 am

    wow.., its so cool..
    I like CSS3

    thanks so much…, its so useful

    Reply

  11. Alicia
    Jun 6, 2012 @ 5:49 am

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

    Reply

  12. suresh kumar
    Jun 22, 2012 @ 12:41 pm

    useful tutorial for all.Three box shadow is beautiful..

    Reply

  13. www.eubtour.com
    Jul 20, 2012 @ 12:33 am

    very nice!
    Thank you!

    Reply

  14. Yue
    Aug 14, 2012 @ 10:02 pm

    These tips are really nice and those examples are very beautiful. Thanks a lot

    Reply

  15. artisaini
    Sep 10, 2012 @ 7:25 am

    Thank u so much… really like it

    Reply

  16. DymoLabels
    Jun 1, 2013 @ 3:35 am

    hi sir
    Thanks for sharing these basics of Css3 with us
    thanks

    Reply

1 8 9 10

Leave a Reply