WordPressを用いたホームページ制作はお任せください!岡山県を中心に絶賛活動中!
  • 美しいグラデーションをCSSだけでどこまで実現できるのか検証してみました。

美しいグラデーションをCSSだけでどこまで実現できるのか検証してみました。

background-784377_1280

美しいグラデーションをCSSだけでどこまで実現できるのか検証してみました。CSSだけでデザインにグラデーションを導入したい方は参考にしてください。5分後にはグラデーションを自由自在に操れるようになります。

この記事は約 6 分で読めます。

背景とグラデーション

CSSだけで実現できる背景のグラデーション装飾をご紹介します。
知っているとデザインの幅が広がりますよ!

基本的なグラデーション

背景にグラデーションを敷く場合、【background】に【linear-gradient】の値を使って定義します。
基本的に1行のコードを指定するだけでOKです。

<div class="css-gradation-01"></div>
.css-gradation-01 {
background: linear-gradient(#FF9999, #ff0000);
width: 500px;
height: 250px;
}

定義した要素の上から下へ【#FF9999】⇒【#ff0000】とグラデーションになっています。

配色を変更したい場合は、上記のカラーコードを変更してください。
後述する全てのパターンで共通です。

角度を変えたグラデーション

グラデーションの角度を変えたい場合、【deg】で角度を定義してやります。
数値を変更するだけで角度を変えられますので、色々と試してみてください。

<div class="css-gradation-02"></div>
.css-gradation-02 {
background: linear-gradient(-90deg, #FF9999, #ff0000);
width: 500px;
height: 250px;
}

【-90deg】の部分が角度を定義している箇所です。
数値を色々と変更して好みの角度を表現してください。

上記のコードでは【-90】となっていますが、もちろん+域も定義可能です。

円形のグラデーション

円形状のグラデーションは、【linear-gradient】ではなく【radial-gradient】で定義します。

<div class="css-gradation-03"></div>
.css-gradation-03 {
background: radial-gradient(#FF9999, #ff0000);
width: 500px;
height: 250px;
}

中心から外へ【#FF9999】⇒【#ff0000】とグラデーションになっています。

画像と重ねたグラデーション

背景画像の上にグラデーションをオーバーレイすることもできます。
ちょっとした定義で幻想的な背景を作れるのには驚きました。

<div class="css-gradation-04"></div>
.css-gradation-04 {
background: linear-gradient(-90deg, rgba(250, 200, 0, .7), rgba(277, 0, 127, .7)),
url(ここに背景画像のURLを記述);
background-size: cover;
width: 500px;
height: 250px;
}

グラデーションの配色を変更するときは、【rgba】部分の数値を変更してください。
背景画像は【ここに背景画像のURLを記述】部分に画像URLを定義してやります。

テキストとグラデーション

最後に背景ではなく、テキストにグラデーションを施す方法です。
タイトルとかで使えそうですね。

テキストをグラデーションで装飾

<span class="css-gradation-text">テキストをグラデーションで装飾</span>
span.css-gradation-text {
font-size: 30px;
font-weight:bold;
background: -webkit-linear-gradient(#FF9999, #ff0000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

定義した要素の上から下へ【#FF9999】⇒【#ff0000】とグラデーションになっています。

まとめ

美しいグラデーションをCSSだけでどこまで実現できるのか検証してみました。

一昔前にグラデーションをとなると、CSSだけでは無理でした。
今回ご紹介しただけでも、色々なグラデーションをCSSだけで実現できます。

便利な時代になりましてね。

シェアしていただきありがとうございます。

background-784377_1280

この記事が気に入ったら【いいね】しよう!

著者:とあるWEBディレクター

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に7年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • sunset-210466_1280

    3コピペだけ!アクセスから一定期間で消えるボックスを設置しよう。

    アクセスから一定期間で消えるボックスを設置する方法をご紹介します。コピペだけで設置できますのでどなたでも設置可能です。このコンテンツを確認して頂ければ、3分後にはアクセスから一定時間経過で消えるボックスが設置できてしまいます。 記事を読む

  • -shared-img-thumb-MIYAKO75_yatta--20140726_TP_V

    画像が読み込めなかった時に別の画像を表示させる方法

    画像が読み込めなかった時に別の画像を表示させる方法をご紹介します。画像が読み込めない時、altのテキストではなく別の画像を表示させたい方は必読です。3分後には実装可能です。 記事を読む

  • bsYUKA862_megane15205354

    これで一発解決!固定ナビゲーションのページ内リンクのズレを解消

    固定ナビゲーションのページ内リンクがズレてしまう現象を解消する方法をご紹介します。固定ナビゲーションとページ内リンクを合わせて使うと、遷移する位置が思った場所よりズレしまうことがあります。そんな時の解決方法を2分程度で知ることができます。 記事を読む

  • iphone-6-458159_1280 (1)

    【スマホサイト】iPhoneからフォームを入力するとき勝手に画面を拡大させない方法

    iPhoneでWEBサイトの検索フォームを利用する場合など、自動的に画面が拡大されてしまいます。この機能、便利に感じる場合もありますが、ちょっと【うっとおしい】とかんじる場合もあります。今回は、この画面拡大を回避する方法のご紹介です。 記事を読む

  • cat-300572_1280

    サイト上でALT設定を可視化できる「Google Chrome」拡張機能

    サイト上でALT設定を可視化できる「Google Chrome」拡張機能をご紹介します。【Alt & Meta viewer】という拡張機能ですが、Alt属性のチェックには欠かせない拡張機能です。WEBサイトを制作する方は、インストールしておいて損はありません。 記事を読む

コメントを残す


(必須)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)