Sunday, February 27, 2011

Inicio

  • Inicio




    • CSS level 3 has a property called 'text-shadow' to add a shadow to each letter of some text. In its simplest form, it looks something like this:

    Which adds a dark gray (#333) shadow a little to the right (0.1em) and down (0.1em) relative to the normal text. The result looks like this:

    The noak and the barcicle

    [ del.icio.us poetry ]


    id="POSTEROUS___bookmarklet_div">

    http://boingboing.net/
    http://www.photaki.es/

    Fuzzy text shadow

    The simplest form of the 'text-shadow' property has two parts: a color (such as the #333 above) and an offset (0.1em 0.1em in the example above). This results in a sharp shadow at the indicated offset. But the offset can also be made fuzzy, resulting in a more or less blurred shadow.The amount of fuzziness is given as another offset. Here are two lines, one with a little fuzziness (0.05em) and one with a lot (0.2em):
    h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
    h3.b {text-shadow: 0.1em 0.1em 0.2em black}

    "What do you say?" said the UK

    In order to see more clearly

    Readable white text

    Shadows can make text more readable if the contrast between the foreground and the background is small. Here is an example of white text against a pale blue background, first without a shadow and then with:
    h3 {color: white}
    h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

    Without shadow:

    What is in it for me?

    With shadow:

    With a shovel and some oranges

    Multiple shadows

    You can also have more than one shadow. In general, that looks rather strange:
    h3 {text-shadow: 0.2em 0.5em 0.1em #600,
    -0.3em 0.1em 0.1em #060,
    0.4em -0.3em 0.1em #006}

    I wish wish wish…

    But with two well-placed dark and light shadows, the effect can be useful:
    h3.a {text-shadow: -1px -1px white, 1px 1px #333}
    h3.b {text-shadow: 1px 1px white, -1px -1px #444}

    I, Augustus (you know who)

    That's extra, of course

    This is a bit dangerous, as you can see if your browser doesn't support 'text-shadow'. In fact, the colors of the background and the text in this example are almost the same (#CCCCCC and #D1D1D1), so without the shadows, there is barely any contrast.

    Drawing letters as outlines

    The two-shadows example of the previous version can be taken even further. With four shadows, letters can be given an outline:
    h3 {text-shadow: -1px 0 black, 0 1px black,
    1px 0 black, 0 -1px black}

    Are you feeling red?

    A cat, an apple, etcetera

    It is not a perfect outline, and at this time (August 2005), the discussion is still open whether CSS should have a separate property (or perhaps a value for 'text-decoration') to make better outlines.

    Neon glow

    If you put a fuzzy shadow right behind the text, i.e., with zero offset, the effect is to create a glow around the letters. If the glow of a single shadow isn't intense enough, just repeat the same shadow a few times:
    h3.a {text-shadow: 0 0 0.2em #8F7}
    h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
    h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
    0 0 0.2em #87F}

    With a zest of best

    There's no no like a better no

    Indeed, quite right, Mr M

    Drop shadows

    CSS2 doesn't have a property to add a shadow to a box. You can try to add a border to the right and bottom, but it won't look right. However, if you have two nested elements, you can use the outer one as a shadow for the inner one. For example, if you have a text like this (HTML):

    Die Rose duftet - doch ob sie empfindet

    Heinrich Heine (1797-1856)
    Die Rose duftet - doch ob sie empfindet

    ...
    you can use the outer DIV as a shadow for the inner one. The result might look like this separate page. First, give the BODY a background (light green in this example), the outer DIV a somewhat darker background (green-gray) and the inner DIV another background (e.g., yellow-white):
    body {background: #9db}
    div.back {background: #576}
    div.section {background: #ffd}

    Next, by using margins and padding, you offset the inner DIV a little to the left and up from the outer DIV:
    div.back {padding: 1.5em}
    div.section {margin: -3em 0 0 -3em}

    You also have to move the outer DIV a little to the right. And if you have multiple sections, you probably want some space between them, too:
    div.back {margin: 3em 0 3em 5em}


    That's basically it. You can add a border around the inner DIV if you want. You'll probably also want some padding inside it, e.g.:
    div.section {border: thin solid #999; padding: 1.5em}


    Of course, you can vary the size of the shadow to your taste.

    Text shadows

    CSS does have a property to add a shadow to text. It has four arguments: the color of the shadow, the horizontal offset (positive means to the right), the vertical offset (positive means down) and the blur (0 means a sharp shadow). For example:
    h3 { text-shadow: red 0.2em 0.3em 0.2em }


    Does this text have a shadow?
    Posted by at 3:56 PM

    No comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)
    Related Posts Plugin for WordPress, Blogger...