Text Shadow?

admin

Administrator
Staff member
I have seen on 'Microsoft Word' that it is possible to have a shadow on your text. Is this possible with HTML or CSS? The way that 'Microsoft Word' impliments it, it looks like its just another option like ( bold, italics, underlined ). Can any body help? Thanks. :D<!--content-->There are two ways. An IE only way of doing it is using CSS filters. This would look like this:<br />
<h2 style="filter:shadow()"> or <h2 style="filter:dropshadow()> (they produce slightly different effects.<br />
<br />
The othre (cross browser) way of doing it is to use CSS rules like these, to put another piece of text in a position to be a shadow. You will need to cnofigure the lengths in the CSS.<br />
<br />
<br />
<style media="screen" type="text/css"><!--<br />
#title {<br />
font: bold 75px "Hoefler Text", serif, "Times New Roman", Georgia, Times;<br />
position: relative;<br />
top: 5px;<br />
left: 5px }<br />
#text {position: relative; top: 0px; left: 0px; color: #000000; z-index:2;}<br />
#shadow {position: absolute; top: 4px; left: 4px; color: #999999; z-index:1;}<br />
--></style><br />
</head><br />
<body><br />
<div id="title"><br />
<br />
<span ID="text">CSS drop shadow</span><br />
<span ID="shadow">CSS drop shadow</span><br />
</div><!--content-->Thats exactaly what I wanted. Thank you. :D<!--content-->CSS2 does have a text-shadow property<br />
something like<br />
.shade{<br />
text-shadow:color,fontsize fontsize fontsize<br />
}<br />
<br />
or <br />
.shade{<br />
text-shadow:red 1px 1px 0px;<br />
}<br />
<br />
The last I checked it was not implemented in any of the popular browsers yet.....<!--content-->Are you sure the dropshadow property isn't filter:dropshadow() or filter:shadow()?<!--content-->Off-topic... Cijori, that anti-spam thing was a good idea... :p (In your signature.)<!--content-->Cheers! (Although the idea of making it so small is that people don't try it and get annoyed...)<br />
<br />
:D<br />
<br />
EDIT: If everyone here who has a website (which I should think is just about everyone) puts a tiny link to it on their index, we might actually make a slight difference. Fight back, people!<!--content-->LOL, that dot is so tempting! :p Anyways, back to topic--I thought I'd throw in that filter:dropshadow() does work, but I don't think filter:shadow() works (if it does, it wasn't at Microsoft's site that I could find). See <!-- m --><a class="postlink" href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/dropshadow.asp">http://msdn.microsoft.com/library/defau ... shadow.asp</a><!-- m --> or <!-- m --><a class="postlink" href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/">http://msdn.microsoft.com/library/defau ... e/filters/</a><!-- m --><!--content-->Yeah, but text filters are IE only.<!--content-->You can see the effects of the filters here (<!-- m --><a class="postlink" href="http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_filter">http://www.w3schools.com/dhtml/tryit.as ... tml_filter</a><!-- m -->)<!--content-->Forgot... :p Yeah, there's a shadow(), duh.... :D<!--content-->Within the CSS 2.1 Working Draft it was decided that 'text-shadow' will most likely be removed.<!--content-->
 
Back
Top