CSSの:before疑似要素や:after疑似要素、transformなどを使って、フォントのアウトラインで切り抜いた紙を片側から少し持ち上げるようなhoverエフェクトを付けます。太め(font-weight:900)の欧文フォントが適しているようですが、日本語フォントや細めのものもそれなりに使えそうです。比較用に「え」、「お」、「北」は「え」font-weight:400にしてあります。また、CSSのみでjavascriptなどは使用していませんが、ベンダープレフィックス用に「prefixfree.js」を使用しています。

A B C D E

西
※参照元:http://codepen.io/diegopardo/pen/GqEho
戻るボタン