SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: How to do Drop Shadow?
-
Jun 18, 2006, 15:25 #1
- Join Date
- Jan 2006
- Location
- Yorkshire, UK
- Posts
- 1,796
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How to do Drop Shadow?
How should I recreate the drop shadow effect from Photoshop into my web design?
-
Jun 18, 2006, 15:46 #2
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What are the shadows applied to?
-
Jun 18, 2006, 16:07 #3
- Join Date
- Jan 2006
- Location
- Yorkshire, UK
- Posts
- 1,796
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Text.. How can I create the drop shadow effect in CSS and HTML is what I'm asking, sorry it wasn't too clear, I didn't know how to phrase it.
-
Jun 18, 2006, 16:42 #4
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
All the pure CSS methods I've seen have either produced not particularly attractive results or didn't work too well cross-browser. I'd create the whole text and shadow as a graphic and then use image replacement to insert it into your page.
-
Jun 18, 2006, 17:01 #5
- Join Date
- Jan 2006
- Location
- Yorkshire, UK
- Posts
- 1,796
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hmm... Thanks.
-
Jun 18, 2006, 18:19 #6
Drop shadows created with CSS alone (just code without the aid of images) are not nearly as smooth as those created in say Photoshop - they may very well be someday fairly soon - that day has not yet come.
Using image replacement as Tyssen suggested, is the way to get consistent, predictable results across browser.
If not on text, you can easily use CSS to apply a drop shadow from a sliced image created in an image editor which will work cross browser and is not dependant on a proprietary browser filter/code snippet.
Bookmarks