2018年03月27日(火)
[CSS]こんなやり方があるとは！ボタンのシャドウに2色の美しいグラデーションを与えるテクニック
ボタンや矩形などの要素にシャドウを付ける時は「box-shadow」が便利ですが、1色または重ねても全体が均一のカラーでしかシャドウを適用することができません。
2色の美しいCSSグラデーションでシャドウを適用するPure CSSの実装を紹介します。
Gradient shadow in pure CSS
デモ
まずは、実際の動作から見てましょう。
2色の美しいグラデーションを伴ったシャドウは、ボタンのノーマル時・ホバー時・アクティブ時のそれぞれで異なります。実装
Step 1: HTML
HTMLはシンプルで、button要素でボタンを実装しています。
Let's Go !
...
0
150
60
158author:
コリス
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ
‹ PREV
デザインにアクセントを加えてくれるモダンフリーフォント「15 Modern Free Fonts for Graphic Designers」
NEXT ›
もうイヤだ！遅い旧型iMacを外付けSSDでサクサク動かす方法【買い替え不要】
Ads
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『[CSS]こんなやり方があるとは！ボタンのシャドウに2色の美しいグラデーションを与えるテクニック』についてまとめています。
この記事は特にアニメーション・SEO・Mac・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
