cocoonサンプルビジネスサイトのサーバの凍結解除しました。ご不便をおかけしました。

美しいグラデーションをCSSで簡単に!「CSS Gradient」

WEB
スポンサーリンク

2018年に引き続き、2019年もグラデーションはWEBサイトに多く使われることになりそうです。

いくつかグラデーションが印象的なサイトを集めてみました。

株式会社 New Stories
株式会社 New Stories
薄く入ったドットの升目、オンマウスで浮かび上がる地図など、洗練されてますね。

 

慶應義塾大学 SFC Open Research Forum 2018
慶應義塾大学 SFC Open Research Forum 2018
グラデーションとゆらゆら動く球体が印象的なサイトです。

 

株式会社Donatello
株式会社Donatello
イラストにも見出しにもボタンにも、青から明るい緑のグラデーションが使われています。

 

もはや定番ともいえるグラデーション。
そこで、CSSで簡単にグラデーションを取り入れられるツールを探してきました。

 

CSS Gradient

cssgradient
CSS Gradient

「CSS Gradient」です。

 

CSS Gradientの使い方

CSS Gradientの画面の見方

まずは画面の見方を説明します。

初期画面ではスライダーに3つのカーソルがあります。

cssgradien

それぞれ「0%(スタート部分)」の色、「50%(真ん中)」の色、「100%(終わり)」の色を指しています。
スライダーは左右に移動することができます。
このカーソルをクリックすると下の編集エリアで編集できるようになります。

cssgradient
編集エリアでは色や透明度をピッカーまたは数値で設定することができます。

 

色を追加する、減らす

色を追加するには、スライダーの何もない部分をクリックします。
右の色一覧にも追加されます。

cssgradient

色を減らすには、右下の色一覧の「×」をクリックします。
カーソルも消えます。

cssgradient

 

グラデーションの形状や角度

編集エリアの下ではグラデーションの形状(線状・円形)や角度の設定もできます。
イメージからの色抽出や、プリセットカラーからの選択もできます。

cssgradient

 

生成されたコードをコピペ!

コードは画面下に表示されます。

cssgradient
右上の「Max Compatibility」にチェックを入れるとベンダープレフィックス付きで書き出してくれます。

cssgradient
backgroundを指定したい要素にこのコードを貼りつければ完成です。

 

グラデーションを使ったサンプル

例えば下のサンプルでは、

美しいグラデーションでサイトを彩ろう

コードはこのようになっています。

.gradebox {
width: 100%;
padding: 20px;
color: #fff;
/*ここから下がコピペ部分*/
background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(235,29,29,1) 50%, rgba(252,179,69,1) 100%);
}

 

また、グラデーションを半透明にすることで、背景写真に重ねてオーバーレイ風にすることもできます。

写真に
透明な
グラデーションを
重ねて
オーバーレイ

 

半透明はCSS Gradientの「A」値を「50」にすればOK。

cssgradient

コードはこのようになっています。
グラデーションのコードの後ろに背景に置きたい画像のURLを指定し、さらにbackground-sizeにcoverを指定しています。

.gradebox {
width: 100%;
padding: 20px;
color: #fff;
background: linear-gradient(90deg, rgba(131,58,180,0.5) 0%, rgba(235,29,29,0.5) 50%, rgba(252,179,69,0.5) 100%),url(https://www.nullllog.com/wp/wp-content/uploads/2019/09/grade05.jpg);
background-size: cover;
}

 

CSS Gradient まとめ

グラデーションには「rgba」での指定が必要だったりベンダープレフィックスが必要だったりするので、こういったジェネレータはありがたいです。
使いこなせるようになりたいです。

 

コメント

タイトルとURLをコピーしました