Code Snippet

Home » Code Snippets » CSS » Two-Color Three-Dimensional Blocks and Text

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

Reference URL

Subscribe to The Thread

  1. Bakaburg

    Crazy people….

    Reply ↓
  2. Manuel

    Nice effect, thank you =)!

    Reply ↓
  3. Rikudo Sennin

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

    Reply ↓
    • 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";
      }
      }

      To use (example with all arguments used, all arguments are optional):

      h1 {

      }

  4. Jeff Simeon

    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 ↓
    • Mary Jane Rutkowski

      The examples are beautiful! Can you share?

  5. matt

    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 ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~