Monday, August 12, 2013

How to make 3D Blocks and Text using CSS

We can make three-dimensional blocks or texts using multiple text-shadow and box-shadow values.

 Here some examples:

First Example (3D Text using 2 colors):

3D Text using CSS (2 colors)

CSS Code:

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;

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.

Second Example ( 3D Block using 2 colors):

How to make 3D Blocks using CSS

CSS Code:

padding: 20px 40px;
color: #6280b7;
background: #fff;
-webkit-box-shadow: 1px 0px #546a92, 0px 1px #384762, 2px 1px #546a92, 1px 2px #384762, 3px 2px #546a92, 2px 3px #384762, 4px 3px #546a92, 3px 4px #384762, 5px 4px #546a92, 4px 5px #384762, 6px 5px #546a92, 5px 6px #384762, 7px 6px #546a92, 6px 7px #384762, 8px 7px #546a92, 7px 8px #384762, 8px 8px #546a92;
-moz-box-shadow: 1px 0px #546a92, 0px 1px #384762, 2px 1px #546a92, 1px 2px #384762, 3px 2px #546a92, 2px 3px #384762, 4px 3px #546a92, 3px 4px #384762, 5px 4px #546a92, 4px 5px #384762, 6px 5px #546a92, 5px 6px #384762, 7px 6px #546a92, 6px 7px #384762, 8px 7px #546a92, 7px 8px #384762, 8px 8px #546a92;
box-shadow: 1px 0px #546a92, 0px 1px #384762, 2px 1px #546a92, 1px 2px #384762, 3px 2px #546a92, 2px 3px #384762, 4px 3px #546a92, 3px 4px #384762, 5px 4px #546a92, 4px 5px #384762, 6px 5px #546a92, 5px 6px #384762, 7px 6px #546a92, 6px 7px #384762, 8px 7px #546a92, 7px 8px #384762, 8px 8px #546a92;
Disqus Comments