free collection of graphic resource for designer include: vector graphic art, vector images, vector illustration, free photos, free hd photo, free pictures, free website templates, free icons, psd graphic, free font, photoshop brush, photoshop patterns, photoshop styles, wallpapers,business card design,logo design,web site design, all are free for download.

Text shadow effect In CSS3

No comments
CSS gives you to play with your type is text-shadow, which seems simple enough at first but can be used to create some remarkable effects with a little ingenuity and creativity.

Today we’re going to run through several text-shadow examples that you can copy and paste for your own work.

The text-shadow property is super easy to work with and works well across all modern browsers without even so much as a vendor prefix! However, as far as I can tell, IE support, even up through IE9. 

The Basic Info

text-shadow: horizontal-offset vertical-offset blur color;

Example 1

.test{

-moz-text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

-webkit-text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

}

 

 Example 2

body {
    background: #222;
}
#text h1 {
    color: rgba(0,0,0,0.6);
    -moz-text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
-webkit-text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}

Example 3

.test{

-moz-text-shadow: 6px 6px 0px rgba(0,0,0,0.2); 

-webkit-text-shadow: 6px 6px 0px rgba(0,0,0,0.2); 

text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

}


No comments :

Post a Comment