Text shadow effect In CSS3
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);
} 
Subscribe to:
Post Comments
(
Atom
)
Labels
CSS
(
5
)
CSS3
(
3
)
Designer
(
1
)
Designs
(
7
)
Fullscreen
(
1
)
Gradients
(
1
)
HTML5
(
2
)
Jquery
(
1
)
Layout
(
2
)
Logo
(
2
)
PSD
(
16
)
Photoshop
(
18
)
Slider
(
1
)
Wallpaper
(
6
)
abstracts
(
12
)
adobe
(
7
)
attractive
(
2
)
backgrounds
(
9
)
banners
(
3
)
beauty
(
1
)
bottle
(
1
)
business
(
19
)
collection
(
8
)
coming soon psd
(
1
)
corporate
(
2
)
creative
(
19
)
design
(
19
)
download
(
22
)
downloads
(
54
)
free
(
13
)
free download
(
7
)
free fonts
(
4
)
graphics
(
4
)
grunge
(
1
)
holiday
(
1
)
hot
(
1
)
html template
(
2
)
icons
(
6
)
in psd
(
19
)
interface
(
2
)
label
(
2
)
loading bar design
(
1
)
menu
(
2
)
mockup designs
(
2
)
music banner design
(
1
)
nature banner design
(
1
)
navinations
(
1
)
print design
(
2
)
psd templates
(
6
)
radio buttons
(
1
)
responsive
(
3
)
restaurant template design
(
2
)
ribbons
(
2
)
sale
(
1
)
sale vector designs
(
1
)
salon
(
1
)
shape
(
1
)
skyline
(
1
)
submit buttons design
(
1
)
summer
(
2
)
template design
(
2
)
templates
(
3
)
twitter
(
1
)
vector
(
11
)
vector design
(
3
)
vectors
(
3
)
we template
(
3
)
web button
(
3
)
web design
(
5
)
website templates
(
2
)
No comments :
Post a Comment