株式会社アプリコットデザイン株式会社アプリコットデザイン

tel.0120-622-835

営業時間/10:00〜18:00 定休日/土日祝日

tel.0120-622835

営業時間/10:00〜18:00 定休日/土日祝日

  • instagram
  • facebook

BLOGスタッフブログ

トップページ > ブログ > CSSのネタ帳~グラデーション編#2~

CSSのネタ帳~グラデーション編#2~

UPDATE : 2017.04.14

CATEGORY :
Sato
Sato

Sato

こんにちは、コーダーの佐藤です。
ようやく長野でもちらほらと桜が咲き始めました!
今週末お花見に行かれる方も多いでしょうか?
夜はまだまだ冷え込むので夜桜見物をご計画中の方は、羽織りものやひざ掛けを用意していくのがおすすめです!

さて今回は前回のブログの続きをやっていきます。

CSSで画像にグラデーションをかける

CSSでグラデーション:完成イメージ こちらが今回つくるグラデーションマスクの完成イメージです。

さっそく作っていきましょう。まずはHTMLの記述です。
<body>
<div class="gradation"></div>
</body>
これだけ…!はい、前回と変わりません。

この空のdiv要素にどうやって完成イメージのような表示をさせるかというと、
ずばり、背景に「グラデーション」と「画像」両方を指定すれば良いだけなのです。

CSSの記述は、
.gradation {
width: 640px;
height: 422px;
background: linear-gradient(0deg, rgba(255, 255, 0, 0.3), rgba(255, 50, 0, 0.3)), url(../sample.jpg);
}
いたってシンプルですね!
background: グラデーションの記述, 画像の記述;
「,(カンマ)」で区切って背景を複数指定しています。
CSSでグラデーション:説明 同じ画像を使っても、「画像の上に白抜き文字をのせる」だけよりも、「画像の上にグラデーション、その上に文字」とするだけで、ぐっと雰囲気が出るのでここぞ!というところで使ってみたいですね。
グラデーションをかけた画像のサンプル 応用編:マウスを乗せた時にグラデーション
.gradation {
width: 640px;
height: 422px;
background: url(../sample.jpg);
}
.gradation:hover {
background: linear-gradient(0deg, rgba(255, 255, 0, 0.3), rgba(255, 50, 0, 0.3)),url(../sample.jpg);
}
華やかなホバーアクションになるのでリンクの装飾に良さそうです。


テキストにグラデーションはまた次回に。。それでは~

この記事を書いた人Who wrote this blog

Sato Tomoe

核心をツク鋭い感性を持つ
デザイナー系WEBエンジニア

RELATED POST関連する記事

CONTACTお問い合わせ

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

  • 信州ファームデザイン
  • 信州ファームマーケット
  • 株式会社POCKET
  • 株式会社Think for Design