SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Shadow effect

  1. #1
    http://TheICE.co.uk/ The Eerie Network's Avatar
    Join Date
    Apr 2001
    Location
    London in the UK.
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Shadow effect

    Hi, would someone be able to supply me with the css code required to give some text a shadow? I know that it can be done by repeating the same text but using diffrent css tags for each of the text items (therefore making one apprear under the other) but I did not want to do this, if possable.

    Thanx
    Daniel Hollands
    New: My Webcam <-- Come and watch me doing what I do
    TheICE.co.uk <-- New sites for the best in UK lifestyle and Competitions.
    The ofDan.Network Forums <-- Come and join in the fun.

  2. #2
    busy Steelsun's Avatar
    Join Date
    Mar 2001
    Location
    Houston, Tejas; Future Capital of the World
    Posts
    2,474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use text-shadow, it's used much like text-decoration or the other text and font properties.

    Here's a description:
    http://www.westciv.com.au/style_mast...ml#text-shadow

    Note that not all browsers support this function though.
    Brian Poirier
    SunStockPhoto: Stock Photos, Fine Art Photos, Event Photography

  3. #3
    http://TheICE.co.uk/ The Eerie Network's Avatar
    Join Date
    Apr 2001
    Location
    London in the UK.
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the link, do you have any example code that I could see? I was going to apply it globally to the p tag (I use <p></p> for all my text)
    Daniel Hollands
    New: My Webcam <-- Come and watch me doing what I do
    TheICE.co.uk <-- New sites for the best in UK lifestyle and Competitions.
    The ofDan.Network Forums <-- Come and join in the fun.

  4. #4
    busy Steelsun's Avatar
    Join Date
    Mar 2001
    Location
    Houston, Tejas; Future Capital of the World
    Posts
    2,474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Modified from the W3C site:

    The example will place a shadow to the right and below the element's text. The shadow will have a 5px blur radius and will be red.

    P { text-shadow: 3px 3px 5px red }

    also a neat effect:

    P.glow {
    background: white;
    color: white;
    text-shadow: black 0px 0px 5px;
    }

    Here, the 'background' and 'color' properties have the same value and the 'text-shadow' property is used to create a "solar eclipse" effect
    Brian Poirier
    SunStockPhoto: Stock Photos, Fine Art Photos, Event Photography

  5. #5
    http://TheICE.co.uk/ The Eerie Network's Avatar
    Join Date
    Apr 2001
    Location
    London in the UK.
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for this code, but it does not work
    Daniel Hollands
    New: My Webcam <-- Come and watch me doing what I do
    TheICE.co.uk <-- New sites for the best in UK lifestyle and Competitions.
    The ofDan.Network Forums <-- Come and join in the fun.

  6. #6
    SitePoint Member
    Join Date
    Mar 2002
    Location
    Newcastle, UK
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I presume this is for a heading (if not its probably overkill).
    Why not have one layer of text above another?
    (one with a higher z-index) so it appears as if the text is below, if you set up the colors right it will appear like a drop shadow.
    Alternatively.
    Use an image ( NOT advertising here but i am using this effect for my link boxes here - http://clix.to/vassago )

    If it is NOT for a heading then i think it might be overkill, but if you get it working (using any method) then plz post a reply here with a link as im interested to see what you mean.

    And if you use
    text-shadow: blah;
    i can guarantee it wont work in many browsers, but as you can (or indeed, if youre using netscape 4.x, cant see) i am all for excluding those with old browsers, starting with my site.

  7. #7
    http://TheICE.co.uk/ The Eerie Network's Avatar
    Join Date
    Apr 2001
    Location
    London in the UK.
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you all for the suggestions, but i've decided that I'm not going to do what I was before, it turns out that making shadows over all are just a pain in the ****

    But thank you all anyway.
    Daniel Hollands
    New: My Webcam <-- Come and watch me doing what I do
    TheICE.co.uk <-- New sites for the best in UK lifestyle and Competitions.
    The ofDan.Network Forums <-- Come and join in the fun.

  8. #8
    Net Senior Citizen tommatthews's Avatar
    Join Date
    Apr 2001
    Location
    Sydney Australia
    Posts
    869
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is another way to do it at evolt.org


    affordable website design

    :: sydney australia ::


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
  •