テキストにリアルな影を与える

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

via

Simple Skewed Text Shadow (CSS)