CSS TEXT-SHADOW
This property defines one or more comma-separated shadow effects to be applied to the text content of the current element. Effects consist of a shadow color, a maximum blurring radius for the shadow effect and x/y offset of the shadow effect from the element content. Multiple effects are applied to the element in the order specified in the property. Effects can overlap each other, but they should never overlap the text content.
Examples
blockquote {
text-shadow: blue 2px 2px, red -2px -2px
}
Possible Values
inherit: Explicitly sets the value of this property to that of the parent
none: Defines normal text, with no shadow
[shadow effects]: Specifies one or more comma-separated shadow effects for the current element. Effects are given as X/Y offsets along with optional shadow-color and blur-radius values.
[Shadow-color]: This uses a color to create the shadow effect and may be placed at the beginning or end of the text-shadow effect syntax (see below.) If no color is specified, the value of the ‘color’ property is used.
[Shadow-offset]: This is given as a pair of length values indicating x- and y- distances to use as offset references from the original text content. The first value specifies the horizontal distance of the offset (positive values are to the right, negative values to the left.) The second value specifies the vertical distance of the offset (positive values are below, negative values are above.)
[Blur-radius]: A length value indicating the boundary of the blurring for the current text-shadow effect.
15 Responses
plz send me some easy way to apply css for drop down menu, as i searched on net but they r quite difficult to understand and apply.
Thanks Regards
Priya Jindal
This is easy code for u to use drop down menu by the use of css. use is it and enjoy and any problem u can mail me than i solve-out it.ok good bye…..
easy way to apply css for drop down menu
body{font-family:georgia;}
#container{width:500px;margin:auto;font-size:11pt;}
#menu{position:absolute;margin-top:10px;}
#menu ul .item{display:none;}
#menu ul:hover .item{display:block;background:#000;padding:1px;margin:1px;}
#menu ul:hover .item a{color:#fff;text-decoration:none;}
#menu ul:hover .item a:hover{color:#999;}
#menu ul{width:100px;float:left;margin:0px;padding:2px;background:#b10000;list-style:none;}
.clear{clear:both;height:10px;}
menu item
menu item 1
menu item 2
menu item 3
menu item
menu item 1
menu item
menu item 1
menu item 2
menu item
menu item 1
menu item 2
menu item 3
menu item 4
example: text-shadow: white 1px 1px 5px;
this is: color x y blur-radius
It was in CSS2.0. Now you can using this in firefox with addon(https://addons.mozilla.org/en-US/firefox/addon/5410)
Hello,
The text-shadow style, run in I.Explorer 7?
Thanks!
how to apply text-shadow by css using.
Eugenia, it doesn’t work with IE7
[…] Dette er Oral OpenType med tekstskygge […]
Not of any help, it works in Opera & Safari but it has no effect on Firefox and Internet Explorer, man why don’t they follow one single rule. I hate the clashes.
Firefox 3.5 does support text-shadow! Internet Explorer 8 and below doesn’t.
This property has compatibility problems.
[…] http://www.css3.com/css-text-shadow/ […]
Put this code in Stylish if you want to get rid of dumb script kiddies that are abusing shadows:
* {
text-shadow: none !important;
}
#shadow{
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
This is working well …………
Works Well.. I am just gonna do some smoothing to remove the Jagged Text
thanks, check out for more examples on following link
http://jignesh2882.wordpress.com/2013/06/03/text-shadow-using-css3/
:)