Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

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

Comments

  1. Bakaburg

    Crazy people….

  2. Nice effect, thank you =)!

  3. Rikudo Sennin

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

    • 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. 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. 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. Permalink to comment#

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

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```