[CSS]金属の質感が美しすぎる、スタイルシートで実装されたボタン

ブラシで磨かれたメタル「ブラッシュドメタル」の質感を画像無しで、CSS3グラデショーンで実装したスタイルシートを紹介します。

サイトのキャプチャ

Tried to make a Brushed Metal style in CSS3
デモページ

質感は拡大しても素晴らしいです。

デモのキャプチャ

アクティブ時にはブルーのエフェクトも備えています。

デモのキャプチャ

ボタンをクリックするとブルーに輝きます

対応ブラウザはSafari5.1, Chromeです。
矩形に使用している線状のグラデーション(数字のボタン)は他のブラウザでも表示できますが、円錐状のグラデーション(飛行機のボタン)はSafari, Chromeのみで美しく表示されます。
円錐状の仕組みは「radial-gradient」を重ねてスタイルしています。

sponsors

top of page

©2024 coliss