Snippets → CSS → Two-Color Three-Dimensional Blocks and Text

Two-Color Three-Dimensional Blocks and Text

Chris Coyier on

We can use multiple text-shadow and box-shadow values to create a three-dimensional look to blocks or text, like this screenshot of David DeSandro’s footer. However in that example, the “three dimesional” part is a solid color.

By alternating colors back and forth in the “stacking order” of our box or text shadow declaration, we can simulate a more three dimensional / lighted effect. 

text-shadow: 1px 0px #eee, 0px 1px #ccc, 2px 1px #eee, 1px 2px #ccc, 3px 2px #eee, 2px 3px #ccc, 4px 3px #eee, 3px 4px #ccc, 5px 4px #eee, 4px 5px #ccc, 6px 5px #eee, 5px 6px #ccc, 7px 6px #eee, 6px 7px #ccc, 8px 7px #eee, 7px 8px #ccc, 8px 8px #eee;

Example

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

  1. Bakaburg
    Permalink to comment#

    Crazy people….

    Reply
  2. Manuel
    Permalink to comment#

    Nice effect, thank you =)!

    Reply
  3. Rikudo Sennin
    Permalink to comment#

    I can’t wrap my mind around this one, how does it work?

    Reply
    • Rikudo Sennin
      Permalink to comment#

      PS: I made a PHP function to automatically make it happen (very primitive and doesn’t check for errors) :)

      function threeDtext($color = array(238,238,238), $size = 10, $smooth = true) { $secondColor = array($color[0] - 24, $color[1] - 24, $color[2] - 24); echo 'text-shadow: '; for($i = 1; $i <= $size; $i++) { echo $i; echo 'px '; echo $i+1; echo 'px '; echo ($smooth) ? '1px ' : null; echo "rgb({$color[0]},{$color[1]},{$color[2]}), "; echo $i+1; echo 'px '; echo $i; echo 'px '; echo ($smooth) ? '1px ' : null; echo "rgb({$secondColor[0]},{$secondColor[1]},{$secondColor[2]})"; echo ($i == $size) ? ';' : ",\n"; } }
  4. Jeff Simeon
    Permalink to comment#

    I did something a bit more involved using {LESS}. You can check it out here:

    http://dl.dropbox.com/u/442561/WoodEffect/textshadowtest.html

    Much more complicated than the example above, but {LESS} makes it easier.

    Reply
  5. matt
    Permalink to comment#

    If you play with transparency and some big numbers you can manipulate this to do some inner-glow style effects.
    Be warned this appears to be a bit volatile so continue at your own risk – this appears to be a bit memory heavy so be ready to force quit youre web-browser… (also dont use your coding program’s preview mode as it may cause it to crash).

    font-size: 500px; text-shadow: 0px 0px 0px transparent, 0px 1px 300px #000, 2px 1px 4px #fff, 1px 2px 5px #000, 3px 2px 5px #888, 2px 3px 5px #000, 4px 3px 5px #777, 3px 4px 5px #000, 5px 4px 5px #666, 4px 5px 5px #000, 6px 5px 5px #eee, 5px 6px 5px #000, 7px 6px 5px #ddd, 6px 7px 5px #000, 8px 7px 1px #ccc, 7px 8px 5px #000, 8px 8px 1px #fff; text-decoration: underline; text-transform: uppercase; font-stretch: extra-condensed; font-weight: bold; color: transparent;

    doesn’t seem to work the same across the browsers but I thought it was interesting enough to share…

    Reply
  6. Sam Iso
    Permalink to comment#

    It’s cool but didn’t work on Google chrome 21.0

    Reply
  7. WAQAR AHMAD
    Permalink to comment#

    3d txt shadow:
    text-shadow: 0px 1px 1px #ddd,
    0px 2px 1px #d6d6d6,
    0px 3px 1px #ccc,
    0px 4px 1px #c5c5c5,
    0px 5px 1px #c1c1c1,
    0px 6px 1px #bbb,
    0px 7px 1px #777,
    0px 8px 3px rgba(100, 100, 100, 0.4),
    0px 9px 5px rgba(100, 100, 100, 0.1),
    0px 10px 7px rgba(100, 100, 100, 0.15),
    0px 11px 9px rgba(100, 100, 100, 0.2),
    0px 12px 11px rgba(100, 100, 100, 0.25),
    0px 13px 15px rgba(100, 100, 100, 0.3);

    Reply

Leave a Reply