[CSS]文字にちょっとかわいいエフェクトを加えるスタイルシート -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-lett

[KOUkun]

文字にかわいいエフェクトを加えるスタイルシート

[w-colonello]

“Opening Type”

[www_taca]

これはかわいい

[xinx]

cute!

[ml0021234]

css

[stakaya]

これはちょっと面白いエフェクト。

[combobske31]

【小人閑居シテ駄文記ス】http://www.plusxplus.co.uk/

[mzkzzz]

ちょおおおおかわいい。

[poppun1940]

画像は一切使用せず、その文字をホバーするとパタっと開くエフェクトを実装するスタイルシートを紹介します。 単に開くだけでなく、シャドウも開きに応じて変化してるのがスゴイ！ 実際の動作は、下記ページで確認で

[honeybe]

cssオンリーか。開き方がかわいい。使い所を少し考えよう。

[kakei]

確かにかわいい

[s12bt]

パタパタ開くしかけ絵本みたい。かわいい。そしてつかえそう。

[deritmi]

画像は一切使用せず、その文字をホバーするとパタっと開くエフェクトを実装するスタイルシートを紹介します。 単に開くだけでなく、シャドウも開きに応じて変化してるのがスゴイ！ 実際の動作は、下記ページで確認で

[kagioo2uma]

応用ききそう

[kana321]

コリス

[nors]

http://codepen.io/diegopardo/full/GqEho

[tihata]

すごーい!!

[masapon49]

面白いエフェクト