SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    can i overlay object to create the illusion of a drop shadow

    hello...

    after extensive css research & trying new things with it i have discovered that virtually no browser supports css2.

    the text-shadow property for ex. cannot be display in any browser (the only one i haven't tested in is EI 6 because i'm nervous to upgrade)

    so anyways...

    i'm creating a very high content website... pages are generated on the fly... naturally all i did for the titles is give them a class

    what i "wanted" to do was give these titles drop shadows... but now i've discovered that i can't... and now i'm wondering would it be worth my time to try and make something using the positioning features? maybe try to duplicate the word and place behind offsetting by 4px or so...???

    should i spend the time doing this? is it theoretically posssible? and another thing... is there a css support chart? a recent one?

    thanks again
    ~nina

    ps. i promise... soon i will stop with stupid questions

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is an IE only filter but the majority of surfers out there are using that. It might be worth a try.

    <DIV STYLE="filter: dropShadow(color=#8b008b,offX=3,offY=3); width:540;">
    <FONT SIZE="7" FACE="arial" COLOR="#ff69b4">
    <B>PUT YOUR TEXT HERE</B></FONT></DIV>
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Evangelist cyngon's Avatar
    Join Date
    Aug 2001
    Location
    Livonia, MI, USA
    Posts
    513
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or you can have the text twice, with one being gray and offset slighly from the other.

    The CSS to do this would be:

    Code:
    P.shadow {
       margin-left: 2px;
       color: #BBBBBB;
       font-size: 28pt;
       font-weight: bold;
       font-family: arial; 
    }
    
    P.text {
       margin-top: -64px;
       color: #339933;
       font-size: 28pt;
       font-weight: bold;
       font-family: arial;
    }
    And the HTML:

    Code:
    <p class="shadow">Headline</p>
    <p class="text">Headline</p>

  4. #4
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not very easy from a maintenance standpoint though. That would make the page messy very quickly.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  5. #5
    SitePoint Evangelist cyngon's Avatar
    Join Date
    Aug 2001
    Location
    Livonia, MI, USA
    Posts
    513
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But I think it is more cross-platform than the filter method. (?)

  6. #6
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure it is...
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes


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
  •