Two-Color Three-Dimensional Blocks and Text

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

Comments

  1. User Avatar
    Bakaburg

    Crazy people….

  2. User Avatar
    Manuel

    Nice effect, thank you =)!

  3. User Avatar
    Rikudo Sennin

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

    • User Avatar
      Rikudo Sennin

      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. User Avatar
    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.

  5. User Avatar
    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…

  6. User Avatar
    Sam Iso
    Permalink to comment#

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

  7. User Avatar
    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);

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag