Grow your CSS skills. Land your dream job.

text-shadow on LI

  • # January 24, 2010 at 1:02 am

    Is there a simple way to add text-shadow: to the LI’s on my OL’s and UL’s?

    What I need is LI images(disc, circle, decimal, etc.) to be text shadowed the same as text within the LI

    here is screen cap of my OL with list-style:decimal; As you can see the images are plain and the text is shadowed.
    [img]http://1goodshepherd.org/main/wp-content/uploads/2010/01/Clipboard02.gif[/img]

    Here is the markup or that section of page in image;

    Code:

    WE BELIEVE

    1. That it’s by GRACE ALONE people are forgiven. We have peace with God and eternal
      life instead of guilt, fear and condemnation. Grace is God’s undeserved love.
    2. That it’s by FAITH ALONE this free gift of forgiveness is received by
      people. Faith is the God-created personal trust in all God has done for us by the life, death and victorious resurrection of His only Son, Jesus Christ.
    3. That it’s the SCRIPTURE ALONE that is the absolute source of truth. It is to be believed above human reason, experience or tradition. By “SCRIPTURE” we mean the Bible, the divinely inspired, inerrant Word of God.
    4. That New Life is God’s free gift to all who believe in Jesus Christ as their personal Savior from sin. Far from being a license to sin, we have been freed to serve God boldly, carefully, enthusiastically, in joy and peace.
    5. We’re guided by the Word, built up in it, strengthened and renewed in God’s love through it. We look forward to a glorious, eternal life with Jesus Christ, the Lord.

    I have tried this class

    Code:
    .entry li {
    list-style:decimal;
    margin-left:2.0em;
    text-shadow: rgb(0,0,0) 1px 1px 2px;
    }

    but it didnt work like the text-shadow on this class

    Code:
    .entry { font: 18px Arial, serif;
    padding: 5px 0px;
    text-shadow: rgb(0,0,0) 1px 1px 2px;
    }

    The live example of page right click here

    Here is my CSS file

    Help please

    # January 24, 2010 at 7:24 am

    The only way I know of would be to use an image with a drop shadow on it, and use list-style-image. Read this
    http://reference.sitepoint.com/css/list-style-image

    # January 25, 2010 at 11:25 am

    huh… im going to have to check that out – I’ve never used the list-style-image before, only the background-image property. Good find :)

    # January 25, 2010 at 11:42 am
    "xheathen" wrote:
    huh… im going to have to check that out – I’ve never used the list-style-image before, only the background-image property. Good find :)

    Most people simply end up using the background property because the list-style system is so bugged.

    # February 8, 2010 at 3:54 pm

    My Solutions:

    1) (only appears to work in FF3.6 because text-shadow is mostly non-supported due to being a CSS3 attribute)
    Make a wrapper DIV around your OL applying the text-shadow attribute to the DIV.

    2) For a cross-browser solution:

      FIRST) Use a RELATIVE POSITIONED wrapper DIV[/list:u]
      THEN) Use

    identical duplicate content ABSOLUTE POSITIONED DIVs

      DIV1) Text COLOR, TOP and LEFT at 0px, set Z-INDEX to 200[/list:u]
      DIV2) Shadow Text COLOR, TOP and LEFT at 2px(or whatever shadow you want), set Z-INDEX to 100[/list:u]
      [/list:u]
      It’s not a perfect shadow, but will work in all situations and all browsers without being "buggy".

      There are more complicated solutions out there so that the shadow appears to fade, but this will work.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".