menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/07/07
  • CSS

CSSでテキストやイメージ画像にグラデーションをかける

cssgradetion
CSSのみで画像やテキストにグラデーションをかける方法をご紹介します。マウスホバーやWordPressの抜粋(excerpt)などで使用するといいと思います。

使用方法

画像のグラデーション

gra1

背景に画像を設定します。
「background: linear-gradient」でグラデーションを上からかぶせるように設定していきます。
画像を透過させるのではなく、背景画像に上から透過グラデーションを重ねていきます。

HTML


CSS


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

テキストを囲んでいる要素に「::after」で上からグラデーションをかけていきます。
大切なのは「position」と「z-index」です。グラデーションをかける範囲は任意で設定してください。
「div」でも「p」でもタグは何でも構いません。

縦グラデーション

gra2
テキストを上から下へ徐々にグラデーションで隠していきます。

HTML


CSS


横グラデーション

gra3
テキストを左から右へ徐々にグラデーションで隠していきます。

HTML


CSS


グラデーションからHoverで全文表示

マウスホバーでグラデーションからテキストを全文表示します。

HTML


CSS

とても簡単に設定でき、見た目も良いので結構使用できると思うのでオススメです。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11