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

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".