CSS3: 3D Text Using text-shadow
Overview
The following demonstrates how we can use the text-shadow and transform CSS rules in order to render 3D text. The 3D effect demonstrated relies entirely upon the ability to layer individual text-shadow rules.
LODIO
DRIVE
Annotated CSS
A basic text-shadow rule is specified by an x-offset, a y-offset, a box-blur radius and a color value, in that order. The offsets and blur radius can be specified using any standard CSS measurement unit. The coordinate space for the x and y offsets are the same for positioning all elements using CSS so that text-shadow: 1px 1px #BBB; would produce a clean shadow appearing to the bottom right of the text. Both the blur radius and color are optional with the color generally defaulting to black when none is specified.
In theory any number of additional rules may be specified. Each rule specifies an individual shadow which are layered in the order they are written.
- CSS
@font-face{
font-family: Xirod;
src: url('/css/font/xirod.ttf');
}
div.lodiodrive-text {
font-family: Xirod;
text-shadow: 2px 0px 0px #FFF, /* right edge highlight */
-1px 0px #EEE, /* left edge highlight */
0px -2px 0px #FFF, /* front top edge highlight */
0px 1px #EEE, /* front bottom edge highlight */
-3px 3px 1px #888, /* bottom-left side dark shadow */
-3px 0px 1px #888, /* left side dark shadow */
0px 1px 2px #AAA, /* bottom side medium shadow */
-5px 5px 2px #AAA, /* bottom-left side medium shadow */
-5px 0px 2px #AAA, /* left side medium shadow */
-7px 5px 0px #BBB, /* back bottom-left contrast */
-7px 0px 0px #BBB, /* back left contrast line */
-10px 10px 7px rgba(0, 0, 0, 0.65), /* dark soft cast shadow */
0px 0px 10px rgba(0, 0, 0, 0.15); /* ambient shadow */
font-size: 140px;
line-height: 132px;
color: #F3F3F3;
letter-spacing: -5px;
-ms-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg); /* 15 degree counter-clockwise rotation */
}
Check out DJ LODIODRIVE