SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    The I's for intelligent silver trophy iTechno's Avatar
    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?

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What are the shadows applied to?

  3. #3
    The I's for intelligent silver trophy iTechno's Avatar
    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.

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    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.

  5. #5
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm... Thanks.

  6. #6
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •