画面越しでも「触覚」を感じさせるデザインがあります。
紙に強い圧力をかけて文字を凹ませる「活版印刷（レタープレス）」のエフェクトは、Webサイトに上質なクラフト感と温もりを与えます。 この記事では、CSSの text-shadow をミリ単位で調整し、文字が背景に沈み込んだり、浮き上がったりする「型押し」のアニメーションを5つ厳選しました。
表示中も光の当たり方が微細に変化し、マウスホバーでさらに押し込まれる繊細な動き。SWELLにコピペするだけで、細部まで計算されたプロの質感を実装できます。
Deep Deboss（ディープ・デボス）
硬い紙に文字を深く押し込んだような、最もクラシックなレタープレス表現です。待機中は光源がゆっくりと左右に揺らぎ、影の向きが微細に変化。ホバーすると、さらにグッと深く押し込まれます。
See the Pen Deep Deboss by BaseKENT (@basekent) on CodePen.
調整方法
- 押し込みの深さ:
.press-deboss:hover内のtext-shadowの2pxを大きくすると、より深く押し込まれた印象になります。 - 背景色:
.press-wrapのbackground-colorを変更する場合、明るい色（ベージュやライトグレー）を選ぶと型押しが綺麗に見えます。真っ黒な背景ではこのエフェクトは機能しません。
Soft Emboss（ソフト・エンボス）
文字が背景からふっくらと浮き上がっている（エンボス）表現です。待機中は文字がゆっくりと呼吸するように膨らみ、ホバーした瞬間に指で押し込まれたように「凹む（デボス）」状態へと反転します。
See the Pen Soft Emboss by BaseKENT (@basekent) on CodePen.
調整方法
- 浮き上がりの高さ:
text-shadowの4pxを6pxなどに変更すると、より高く盛り上がっているように見えます。 - 文字色: 色付きの文字にしたい場合は
colorを変更しますが、背景と同色（同化）にするのが最も美しいエンボスになります。
Letterpress Stamp（レタープレス・スタンプ）
強い力でスタンプを押したように、文字のエッジが少し滲んで（ぼやけて）紙に馴染んでいるような質感を表現します。待機中はインクが紙に染み込んでいくような微小な揺らぎを見せます。
See the Pen Letterpress Stamp by BaseKENT (@basekent) on CodePen.
調整方法
- インクの色:
color: #2c3e50;を#8b0000（深い赤・朱肉）などに変更すると、アンティークなスタンプのようになります。 - にじみ具合:
.press-stamp:hoverのfilter: blur(0.5px);の数値を大きくすると、水に濡れたようにインクがぼやけます。
Translucent Press（トランスルーセント・プレス）
背景を透過した、ガラスやアクリル板に刻印されたような洗練されたデボス表現です。文字の「線（ストローク）」にだけ色をつけ、内部は影の錯覚だけで凹みを表現しています。
See the Pen Translucent Press by BaseKENT (@basekent) on CodePen.
調整方法
- 輪郭の濃さ:
-webkit-text-strokeのrgba(0,0,0,0.1)の透明度（0.1）を上げると、枠線がくっきりとしてプラスチックのような質感に近づきます。
Kinetic Light Press（キネティック・ライト・プレス）
文字の凹凸はそのままに、照らしている「光源」が文字の周囲をぐるぐると360度回転しているように見える、非常に高度な錯覚アニメーションです。ホバーすると光が中央でピタッと止まります。
See the Pen Kinetic Light Press by BaseKENT (@basekent) on CodePen.
調整方法
- 光の回転速度:
animation: rotateLight 4sの秒数を短くすると、光源が素早く回り、サイレンのような印象になります。ゆったり見せる場合は6sなどが適しています。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
