SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Canterbury
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pure CSS dropshadow on Text

    Has anyone got any tips on how to get drop shadow on text using CSS that works on more than just IE.
    Its for a navigation bar, I'd like the text to stand out a bit from the background. I have seen techniques that hardcode the text into the CSS, or duplicate the text elsewhere but for <li> elements (and clarity in my code) I dont think that's appropriate
    Sharing knowledge saves valuable time!

    Simon

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Canterbury
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone?
    Sharing knowledge saves valuable time!

    Simon

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Well ie uses proprietary filters for drop shadows which means other browsers can't use it and most other methods rely on drawing the text twice using an offset.

    (similar to this)
    http://www.pmob.co.uk/temp/outlinetext.htm

    There is a method here that automates the process with js using unobtrusive dhtml.

    http://www.kryogenix.org/code/browser/aqdropshadow/

    You might also want to read evolts article as there is quite a lot of dicussion about shadows also.

    http://evolt.org/article/Simple_CSS_...dows/17/18583/

    Or wait a few years until browsers implement text shadow.

    http://www.w3.org/TR/REC-CSS2/text.h...ef-text-shadow


    Paul

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B
    Or wait a few years until browsers implement text shadow.

    http://www.w3.org/TR/REC-CSS2/text.h...ef-text-shadow
    Safari already supports it
    http://www.macedition.com/cb/resourc...sssupport.html

  5. #5
    SitePoint Enthusiast tentonjim's Avatar
    Join Date
    Aug 2003
    Location
    Seattle, WA USA
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,
    Have a look at this - the "Jim's CFM Examples" header at the top:
    http://freecfm.com/t/tentonhead/jimscfm.cfm

    and the link to the stylesheet:
    http://freecfm.com/t/tentonhead/c/jimscfm.css

    This is 3 <h1> tags positioned and z-indexed on top of one another, each having a different color.

    Here is the html from the page:
    <h1 class="title">Jim's CFM Examples</h1>
    <h1 class="shadow">Jim's CFM Examples</h1>
    <h1 class="dropshadow">Jim's CFM Examples</h1>

    Here is the CSS for the <h1> tags:
    h1 {
    font: italic bold 4em/1em impact, sans-serif;
    margin:0px;
    padding:10px;
    }
    h1.dropshadow {
    position:absolute;
    top:14px;
    left:14px;
    z-index:1;
    color:#00f;
    background-color:transparent;
    }
    h1.shadow {
    position:absolute;
    top:13px;
    left:13px;
    z-index:2;
    color:#ff6342;
    background-color:transparent;
    }
    h1.title {
    position:absolute;
    top:12px;
    left:12px;
    z-index:3;
    color:#ff9c4a;
    background-color:transparent;
    } Hope this helps, I have never tried it in the context you are asking for but offhand do not see why it would not work... just a bunch of extra code.

    Jim S.
    Jim Summer
    ~ Twitter SEO_Web_Design or Google+

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Thanks Jim but thats virtually the same as in my example above.

    http://www.pmob.co.uk/temp/outlinetext.htm

    Its fine and will work ok but isn't the best semantically to have to repeat everything


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
  •