PDA

Click to See Complete Forum and Search --> : Text Shadow?

Jick
04-22-2003, 02:21 AM
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
Nevermore
04-22-2003, 03:23 AM
There are two ways. An IE only way of doing it is using CSS filters. This would look like this:
<h2 style="filter:shadow()"> or <h2 style="filter:dropshadow()> (they produce slightly different effects.

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.


<style media="screen" type="text/css"><!--
#title {
font: bold 75px "Hoefler Text", serif, "Times New Roman", Georgia, Times;
position: relative;
top: 5px;
left: 5px }
#text {position: relative; top: 0px; left: 0px; color: #000000; z-index:2;}
#shadow {position: absolute; top: 4px; left: 4px; color: #999999; z-index:1;}
--></style>
</head>
<body>
<div id="title">

<span ID="text">CSS drop shadow</span>
<span ID="shadow">CSS drop shadow</span>
</div>
Jick
04-22-2003, 04:05 AM
Thats exactaly what I wanted. Thank you. :D
khalidali63
04-22-2003, 05:33 AM
CSS2 does have a text-shadow property
something like
.shade{
text-shadow:color,fontsize fontsize fontsize
}

or
.shade{
text-shadow:red 1px 1px 0px;
}

The last I checked it was not implemented in any of the popular browsers yet.....
Nevermore
04-22-2003, 09:55 AM
Are you sure the dropshadow property isn't filter:dropshadow() or filter:shadow()?
Jona
04-22-2003, 10:37 AM
Off-topic... Cijori, that anti-spam thing was a good idea... :p (In your signature.)
Nevermore
04-22-2003, 10:39 AM
Cheers! (Although the idea of making it so small is that people don't try it and get annoyed...)

:D

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!
Jona
04-22-2003, 10:44 AM
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 http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/dropshadow.asp or http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/
Nevermore
04-22-2003, 10:46 AM
Yeah, but text filters are IE only.
Nevermore
04-22-2003, 10:47 AM
You can see the effects of the filters here (http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_filter)
Jona
04-22-2003, 10:48 AM
Forgot... :p Yeah, there's a shadow(), duh.... :D
Robert Wellock
04-23-2003, 09:56 AM
Within the CSS 2.1 Working Draft it was decided that 'text-shadow' will most likely be removed.