Code examples from Visual Stylin' with CSS3 by Charles Wyke-Smith
font:50px/1 "Arial Black";
border:1px solid;
padding:0px 0 10px;
margin-top:18px;
color:#17A6C3;
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
-moz-transform: rotate(20deg) skew(20deg);
-webkit-transform: rotate(20deg) skew(20deg);
transform: rotate(20deg) skew(20deg);
-moz-transform: rotate(20deg) skew(20deg) translate(-40px, 20px);
-webkit-transform: rotate(20deg) skew(20deg) translate(-40px, 20px);
transform: rotate(20deg) skew(20deg) translate(-40px, 20px);
-moz-transform: rotate(20deg) skew(20deg) scale(1.25);
-webkit-transform: rotate(20deg) skew(20deg) scale(1.25);
transform: rotate(20deg) skew(20deg) scale(1.25);
no transform applied
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
transform:rotate(20deg);
-moz-transform-origin:left top;
-webkit-transform-origin:left top;
transform:rotate(20deg);
-moz-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
transform:rotate(-20deg);
-moz-transform-origin:right bottom;
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
:before
pseudo-class, a shadow is added to a large letter. The following figures show step-by-step how this effect is created. See Figure 88 for the complete CSS.
h1 {
margin:0;
padding:0;
font: 130px/.8 Trocchi, serif;
color:hsla(31,100%,54%,.8);
text-shadow:
1px -1px 0 #999,
2px -2px 0 #BBB,
3px -3px 0 #DDD;
}
<h1 title="K">K</h1>
title
tag.
h1:before {
content:attr(title);
text-shadow:none; /* turn off '3-D' shadows */
text-shadow:1px -1px 0 #555;
}
:before
pseudo-class is used to add a copy of the letter.h1 {
margin:0;
padding:0;
font: 130px/.8 Trocchi, serif;
color:hsla(31,100%,54%,.8);
position:relative;
text-shadow:
1px -1px 0 #999,
2px -2px 0 #BBB,
3px -3px 0 #DDD;
}
.shadow_transforms.demo13 h1:before {
content:attr(title);
text-shadow:none; /* turn off '3-D' shadows */
text-shadow:1px -1px 0 #555;
}
h1 {
margin:0;
padding:0;
font: 130px/.8 Trocchi, serif;
color:hsla(31,100%,54%,.8);
position:relative;
text-shadow:
1px -1px 0 #999,
2px -2px 0 #BBB,
3px -3px 0 #DDD;
}
h1:before {
content:attr(title);
text-shadow:none; /* turn off '3-D' shadows */
text-shadow:1px -1px 0 #555;
color:transparent;
position:absolute;
-moz-transform-origin: bottom center;
-webkit-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-0-transform-origin: bottom center;
transform-origin: bottom center;
-moz-transform: skewX(-70deg);
-webkit-transform: skewX(-70deg);
-ms-transform: skewX(-70deg);
-o-transform: skewX(-70deg);
transform: skewX(-70deg);
left:-16px;
z-index:-1;
}