サイトに「高級感」を持たせたい時、テキストの質感を変えるのは非常に効果的です。
この記事では、ベースの黒文字の美しさを保ちながら、金属の表面に光が反射するような「シャイン＆メタリック」エフェクトを5つ紹介します。 画像を使わず、CSSのグラデーションを動かすだけで、磨き上げられた金属のような質感を表現。SWELLにコピペするだけで、待機中も静かに光を放ち、マウスホバーで鮮やかに輝くリッチな演出を実装できます。
Chrome Sweep（クローム・スウィープ）
磨き上げられた黒い金属（ブラッククローム）の表面を、鋭い一条の光が走り続けます。シンプルで最も使いやすいメタリック表現です。ホバーすると、文字全体が輝くシルバーメタリックに変化します。
See the Pen Chrome Sweep by BaseKENT (@basekent) on CodePen.
調整方法
- 光の速さ:
animation: shineSweep 3sの秒数を短くすると、光が高速で通り過ぎます。 - 光の太さ: グラデーションの
%（40%, 50%, 60%）の間隔を狭めると、光の線がより鋭く細くなります。
Dark Gold Shimmer（ダークゴールド・シマー）
重厚な黒文字の中に、鈍く光るアンティークゴールドの輝きがゆらゆらと漂います。派手すぎない上品な高級感があり、ホバーすると純金のようにまばゆい輝きに変わります。
See the Pen Dark Gold Shimmer by BaseKENT (@basekent) on CodePen.
調整方法
- 通常時のゴールドの色味:
#b8860bの部分を変更することで、ローズゴールド（銅色）やプラチナなど、別の金属の質感を表現できます。
Obsidian Edge（オブシディアン・エッジ）
黒曜石（オブシディアン）のような漆黒の文字の「輪郭」だけが、金属のように鋭く光ります。待機中は輪郭の光が呼吸するように明滅し、ホバーで文字の内側に光が溢れ出します。
See the Pen Obsidian Edge by BaseKENT (@basekent) on CodePen.
調整方法
- 輪郭の太さ:
-webkit-text-stroke: 1.5pxの数値を大きくすると、より無骨な金属感が出ます。 - データ属性: HTMLの
data-text="Contents"もテキストに合わせて変更するようご注意ください。
Brushed Steel（スチール・ブラッシュ）
ヘアライン仕上げ（一方向に細かな傷をつけた金属加工）のステンレス鋼のような、細かなグラデーションが斜めに動きます。マットで硬質な印象があり、ホバーで研磨されたようにクリアな光を放ちます。
See the Pen Brushed Steel by BaseKENT (@basekent) on CodePen.
調整方法
- ヘアラインの粗さ:
4pxや8pxの間隔数値を細かくするとより繊細に、大きくすると粗削りな金属になります。
Premium Reflection（プレミアム・リフレクション）
黒いテキストの下に、磨き上げられた大理石や金属の床に映り込んでいるかのような反射（リフレクション）を作ります。待機中は反射部分にキラリと光が走り、ホバーで文字が浮き上がります。
See the Pen Premium Reflection by BaseKENT (@basekent) on CodePen.
調整方法
- 反射の距離:
-webkit-box-reflect: below -5pxの数値を-10pxなどに変更すると、文字と反射の隙間を調整できます。 - 注意点:
-webkit-box-reflectはSafariやChromeなど主要ブラウザで動作しますが、Firefox等のごく一部の環境では反射が表示されない場合があります（その場合も上の本テキストは通常通り綺麗に表示されます）。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
