グラフィックソフト不要:CSSで画像に透過グラデーションの帯を重ねる

エ・ビスコム・テック・ラボ
2009-03-06 12:27:01
  • このエントリーをはてなブックマークに追加

 「FirefoxとSafariのCSS徹底検証」の第57回では、CSSでグラデーションを表現する方法を紹介した。

 そのなかで、グラデーションを透過して背景に溶け込むように指定する方法を紹介したが、これを応用して画像に透過グラデーションの帯を重ねてみよう。

画像に透過グラデーションの帯を重ねる

 透過グラデーションを画像に重ねて利用すると、これまではグラフィックソフトでの処理が必要だった効果もCSSだけで簡単に設定できるようになる。

 たとえば、次のサンプルは画像に文字を重ねるときに、黄色い帯に文字を載せてレイアウトしたものだ。このとき、黄色い帯をグラデーションで透過すれば、帯を下の画像に溶け込ませることができる。ここでは、右端にかけて透過するように指定している。

画像に透過グラデーションの黄色い帯を重ねたもの(画像をクリックすると拡大します) 画像に透過グラデーションの黄色い帯を重ねたもの(画像をクリックすると拡大します)
div{
width: 750px;
height: 200px;
background: url(photo.jpg);
border: solid 1px #aaaaaa;
margin: auto;
}

h1{
font-size: 2em;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-weight: bold;
margin: 20px 0;
padding: 20px 10px;
width: 10em;
background: #ffff00;
background: -webkit-gradient(linear, left top, right top, from(#ffff00), to(rgba(255,255,255,0)));
}

Gradient System

ブラウザで表示を確認する

 なお、-webkit-gradient()に未対応のブラウザでは次のように表示される。

-webkit-gradient()に未対応のブラウザでの表示(画像をクリックすると拡大します) -webkit-gradient()に未対応のブラウザでの表示(画像をクリックすると拡大します)
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]