on:2014年7月10日sponsorsブラウザいっぱいの背景や小さいサイズのパネルにも使える、CSSグラデーションを使った背景テクニックを紹介します。画像の使用はもちろん一切無しです。ヴィンテージのディスプレイみたいで、面白い演出ができそうですね。デモは「radial-gradient」を使用しているため、モダンブラウザでご覧ください。Gradient実装は非常にシンプル、コピペで簡単に利用できます。HTMLデモではdivとspanの二つを使用していますが、背景用にはdiv一つのみでOKです。Background</span></div>CSSまずは、美しいグラデーションのスタイルシートから。グラデーションの設定は楕円(ellipse)状でボックスの一番遠い角に合わせて(farthest-corner)います。100%);}デモのようにテキストを天地左右の中央に配置させるには、下記のようになります。}美しいグラデーションは小さいサイズのパネルに適用することもできます。コードはこんな感じになります。Posts関連記事が見つかりませんでした。