[CSS]文字にちょっとかわいいエフェクトを加えるスタイルシート -Opening Type

画像は一切使用せず、その文字をホバーするとパタっと開くエフェクトを実装するスタイルシートを紹介します。

単に開くだけでなく、シャドウも開きに応じて変化してるのがスゴイ！

実際の動作は、下記ページで確認できます。

Opening type

面白そうなので、日本語でも試してみました。

日本語、しかも漢字でもOK

実装はこんな感じになります。

HTML

文字はspan要素で配置し、上に表示されるホワイトの文字はdata-letterに記述します。

<div class="foo">
  <span class="letter" data-letter="A">A</span>
  <span class="letter" data-letter="B">B</span>
  <span class="letter" data-letter="C">C</span>
  ...
  ...
</div>

日本語は、こんな感じです。

<div class="foo">
  <span class="letter" data-letter="あ">あ</span>
  <span class="letter" data-letter="空">空</span>
  <span class="letter" data-letter="C">C</span>
</div>

CSS

フォントの種類やカラー、パタパタの開き具合はスタイルシートで調整します。

@import url(http://fonts.googleapis.com/css?family=Lato:900);
*, *:before, *:after{
  box-sizing:border-box;
}
body{
  font-family: 'Lato', sans-serif;
    ;
}
div.foo{
  width: 90%;
  margin: 0 auto;
  text-align: center;
}
.letter{
  display: inline-block;
  font-weight: 900;
  font-size: 8em;
  margin: 0.2em;
  position: relative;
  color: #00B4F1;
  transform-style: preserve-3d;
  perspective: 400;
  z-index: 1;
}
.letter:before, .letter:after{
  position:absolute;
  content: attr(data-letter);
  transform-origin: top left;
  top:0;
  left:0;
}
.letter, .letter:before, .letter:after{
  transition: all 0.3s ease-in-out;
}
.letter:before{
  color: #fff;
  text-shadow: 
    -1px 0px 1px rgba(255,255,255,.8),
    1px 0px 1px rgba(0,0,0,.8);
  z-index: 3;
  transform:
    rotateX(0deg)
    rotateY(-15deg)
    rotateZ(0deg);
}
.letter:after{
  color: rgba(0,0,0,.11);
  z-index:2;
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    skew(0deg,1deg);
}
.letter:hover:before{
  color: #fafafa;
  transform:
    rotateX(0deg)
    rotateY(-40deg)
    rotateZ(0deg);
}
.letter:hover:after{
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(40deg)
    rotateZ(0deg)
    skew(0deg,22deg);
}

スタイルシートはプレフィックス（-webkit-, -moz-）が省略されているので、利用する際はプレフィックスを追加するか、プレフィックスを自動で追加するスクリプト「prefixFree」をご利用ください。