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属性と内容を合わせる--> |
