Result
text-shadowではなく、リアルな影をCSSで作り出す
css
h1 {/*元となるテキスト*/
color: #e0e6e9;
position: relative;
}
h1:before {/*影の部分*/
bottom: 2px;
color: rgba(0, 0, 0, 0.1);
content: attr(title);/*title属性を抜き出してcontentの値にする*/
left: 9px;
position: absolute;
text-shadow: none;
transform-origin: bottom left;
transform: skew(20deg) scale(1, 0.95);/*変形させて実際の影のようにする*/
z-index: -1;/*元テキストの後ろに来るように*/
}
html
<h1 title="かちびと.net">かちびと.net</h1> <!--title属性と内容を合わせる-->
