9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

Is It Possible To Drop Shadow On Font With CSS?

by Boris_yo
6 replies
  • WEB DESIGN
    • |
Look at this website:

SAVE $137.6 - Bosch Integra 800 Series 24" Tall Tub Built-In Dishwasher - Stainless-Steel $1238.39

Notice the part on the top "SAVE $137.6 - Bosch Integra 800 Series 24" Tall Tub Built-In Dishwasher - Stainless-Steel $1238.39"?

Do i see dropped down shadow on this writing or is it my illusion?
#css #drop #font #shadow
  • Profile picture of the author Tooschee
    Hi,

    first site that came up in google when I put the "css drop shadow":
    Box-shadow, one of CSS3′s best new features - CSS3 . Info

    and Yes, drop shadow is possible by using .css parameters , some of the newest browser even support transparencies on div's, blocks etc.
    Signature

    I'm available for work. See my Portfolio.
    I'm also a member of Ke.mU Studio
    Need great looking mini site? Visit Professional Landing Pages
    {{ DiscussionBoard.errors[3163287].message }}
    • Profile picture of the author Jahnold
      The example in the link uses the 'text-shadow' CSS property.

      If you're ever curious about CSS on a webpage most of the latest-gen browsers (chrome and opera have it built in, ff you need to install firebug) allow you to right-click on something in the page and 'inspect element'. This gives you a breakdown of what is doing what to each part of the page.
      {{ DiscussionBoard.errors[3163465].message }}
      • Profile picture of the author bossanovawebdesign
        Originally Posted by Jahnold View Post

        The example in the link uses the 'text-shadow' CSS property.

        If you're ever curious about CSS on a webpage most of the latest-gen browsers (chrome and opera have it built in, ff you need to install firebug) allow you to right-click on something in the page and 'inspect element'. This gives you a breakdown of what is doing what to each part of the page.
        To add to what Jahnold said, while inspecting the element, you can also sometimes turn various css elements on and off, add new ones, and change values right there in the inspector window. This is a great way to test how something will look before actually tweaking your css file.
        {{ DiscussionBoard.errors[3163553].message }}
  • Profile picture of the author Oxbone
    That's impressive.
    {{ DiscussionBoard.errors[3163575].message }}
  • Profile picture of the author kevaleb
    Heres a sample of code you would add to your css.

    text-shadow: #4f4f4f 1px 2px 3px;

    #4f4f4f - the color of the shadow
    1px - the size
    2px - the x position of the shadow (relative to the text)
    3px - the y position of the shadow

    Hope that helps
    {{ DiscussionBoard.errors[3169196].message }}
    • Profile picture of the author Boris_yo
      But did anybody notice how page overloads processor when scrolling? I experience this in Firefox, where it scrolls very slowly and not smoothly. However in Internet Explorer the scrolling is smooth but it overloads processor.
      {{ DiscussionBoard.errors[3170909].message }}

Trending Topics