Search
  1. CSS Gradient Text Effect〔テキストにグラデーションをかける〕
  2. 5 Ways to Spice up Your Images with CSS〔画像にCSSで様々なエフェクトを付ける〕
  3. CSS Decorative Gallery〔CSSで飾りつけをした画像ギャラリー〕
  4. Fade Out Bottom〔スクロールしても常にページの下部にフェードアウト効果を付ける〕
  5. 画像に影をつける

CSS Gradient Text Effect
テキストにグラデーションをかける

unknown

CSS Gradient Text Effect

グラーデーションのかかった透過PNG画像をテキストにCSSで重ねて、テキストにグラーデーション効果を付ける方法が掲載されています。 親要素内にspan要素とテキストを指定し、span要素の背景画像としてグラーデーションのかかった透過PNGを指定しています。 IE6は透過PNG未対応のため、IE6対応する場合は、下記のコードをspan要素に指定する必要があります。

background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='背景画像URL', sizingMethod='scale');

jQueryを使用して、動的に親要素内にspan要素を追加するサンプルも掲載されています。

例:白背景
<!-- HTML -->
<div class='cgte gradient-glossy'><span></span>Gradient Glossy</div>
<div class='cgte gradient-white'><span></span>Gradient White</div>
<div class='cgte gradient-grey'><span></span>Gradient Gray</div>

<!-- CSS -->
<style type='text/css'>
div.cgte {
    font-family:verdana,sans-serif;
    line-height:1;
    font-weight:bold;
    font-size:30px;
    position:relative;
    color:#464646;
    padding:15px 0;
}
div.cgte span {
    position:absolute;
    display:block;
    width:100%;
}
/* Gradient Glossy */
div.gradient-glossy span {
    height:30px;
    background:transparent url(/content/img/css/css_gradient/gradient-glossy.png) repeat-x 0 0;
}
* html div.gradient-glossy span {
    background: none;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/img/css/css_gradient/gradient-glossy.png', sizingMethod='scale');
}
/* Gradien White */
div.gradient-white span {
    height:30px;
    background:transparent url(/content/img/css/css_gradient/gradient-white.png) repeat-x 0 0;
}
* html div.gradient-white span {
    background: none;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/img/css/css_gradient/gradient-white.png', sizingMethod='scale');
}
/* Gradient Gray */
div.gradient-grey span {
    height:30px;
    background:transparent url(/content/img/css/css_gradient/gradient-grey.png) repeat-x 0 0;
}
* html div.gradient-grey span {
    background: none;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/img/css/css_gradient/gradient-grey.png', sizingMethod='scale');
}
</style>
Gradient Glossy
Gradient White
Gradient Gray
例:黒背景
<!-- HTML -->
<div style='background-color:#000;color:#fff; padding:10px;'>
    <div class='cgte_b gradient-dark'><span></span>Gradient Gray</div>
    <div class='cgte_b gradient-shine'><span></span>Gradient Shine</div>
    <div class='cgte_b gradient-dark-stripe'><span></span>Vertical Stripe</div>
    <div class='cgte_b gradient-dark-stripe-hz'><span></span>Horizontal Stripe</div>
    <div class='cgte_b pattern'><span></span>Pattern Zebra</div>
</div>

<!-- CSS -->
<style type='text/css'>
div.cgte_b {
    padding:15px 0;
    font-weight:bold;
    font-size:40px;
    position:relative;
    color: #b7b7b7;
    overflow:hidden;
    line-height:1;
}
div.cgte_b span {
    position: absolute;
    display: block;
    width: 100%;
    height:40px;
}
div.gradient-dark span {
    height:40px;
    bottom: -0.1em;
    background:transparent url(/content/img/css/css_gradient/gradient-dark.png) repeat-x 0 0;
}
* html div.gradient-dark span {
    background: none;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/img/css/css_gradient/gradient-dark.png', sizingMethod='scale');
}
div.gradient-shine {
    color: #fff;
}
div.gradient-shine span {
    height:80px;
    background:transparent url(/content/img/css/css_gradient/gradient-shine.png) repeat-x 0 0;
}
* html div.gradient-shine span {
    background: none;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='content/img/css/css_gradient/gradient-shine.png', sizingMethod='scale');
}
div.gradient-dark-stripe span {
    background:transparent url(/content/img/css/css_gradient/gradient-dark-stripe.png) repeat-x 0 0;
    bottom: -0.1em;
}
* html div.gradient-dark-stripe span {
    background: none;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='content/img/css/css_gradient/gradient-dark-stripe.png', sizingMethod='scale');
}
div.gradient-dark-stripe-hz span {
    background:transparent url(/content/img/css/css_gradient/gradient-dark-stripe-hz.png) repeat-x 0 0;
    bottom: -0.1em;
}
* html div.gradient-dark-stripe-hz span {
    background: none;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='content/img/css/css_gradient/gradient-dark-stripe-hz.png', sizingMethod='scale');
}
div.pattern span {
    background:transparent url(/content/img/css/css_gradient/pattern-zebra.png) repeat-x 0 0;
}
* html div.pattern span {
    background: none;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='content/img/css/css_gradient/pattern-zebra.png', sizingMethod='scale');
}
</style>
Gradient Gray
Gradient Shine
Vertical Stripe
Horizontal Stripe
Pattern Zebra

5 Ways to Spice up Your Images with CSS
画像にCSSで様々なエフェクトを付ける

2008/12/6

5 Ways to Spice up Your Images with CSS

画像にCSSを使用してエフェクトを付ける方法が5つ紹介されています。

例1:画像に影を付ける

下と左に影を付けた影画像(1000px×1000px)をimg要素の背景に指定し、内余白(padding)を調整して影を落としたような効果を与えています。

くまさんケーキ

<style type='text/css'>
img.shadow {
  background:transparent url(/content/img/css/shadow-1000x1000.gif) no-repeat right bottom;
  padding:5px 10px 10px 5px;
}
</style>
<img class='shadow' src='画像URL' alt='' />

例2:画像を2重線で囲ったようなエフェクトを付ける

外側の枠線はimg要素のborderプロパティで指定し、内側の枠線はimg要素の内余白(padding)と背景色で指定します。

くまさんケーキ

<style type='text/css'>
img.double-border {
  border:5px solid #ddd; /* 外側のボーダー */
  padding:5px; /* 内側のボーダの太さ */
  background:#fff; /* 内側のボーダー色 */
}
</style>
<img class='double-border' src='画像URL' alt='' />

例3:画像に額縁のような枠線を付ける

画像の上に、画像と同じサイズの枠線付きの透過PNGをCSSで重ねて表示しています。IE6は透過PNG未対応なので、filterを使うなどの対策が必要です。

 
<style type='text/css'>
.frame-block {
  width:240px; height:180px; /* 画像の幅・高さと同じ */
  position:relative;
  display:block;
}
.frame-block span {
  background:transparent url(背景画像URL) no-repeat center top;
  width:240px; height:180px; /* 画像の幅・高さと同じ */
  display:block;
  position:absolute;
  /* for IE6 */
  background:none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/img/css/spup_frame.png', sizingMethod='scale');
}
</style>
<div class='frame-block'>
  <span> </span>
  <img src='画像URL' alt='' />
</div>

例4:画像にウォーターマークを付ける

ウォーターマーク画像の上に画像を重ね、画像の方を透過させることで、背景画像が透けて見えるようになっています。

くまさんケーキ
<style type='text/css'>
.transp-block {
  background:#000 url(ウォーターマーク画像URL) no-repeat 0 0;
  width:240px; height:180px; /* 画像の幅・高さ */
  overflow:hidden;
}
.spup_transp-block img.transparent {
  filter:alpha(opacity=75);
  opacity:.75;
}
</style>
<div class='transp-block'>
  <img class='transparent' src='画像URL' alt='' />
</div>

例5:画像に半透明のタイトル帯を付ける

画像の上に、画像のタイトルを指定したcite要素を重ね、cite要素をCSSで透過させています。

くまさんケーキ (^・ω・^)
<div class='img-desc'>
  <img src='画像URL' alt='' />
  <cite>画像のタイトル</cite>
</div>
<style type='text/css'>
.img-desc {
  position:relative;
  display:block;
  width:240px; height:180px;
  overflow:hidden;
  text-align:center;
}
.img-desc cite {
  margin:0; padding:10px;
  background:#111;
  filter:alpha(opacity=55);
  opacity:.55;
  color:#fff;
  position:absolute;
  bottom:0; left:0;
  width:220px;
  border-top:1px solid #999;
}
</style>

Fade Out Bottom
スクロールしても常にページの下部にフェードアウト効果を付ける

2007/8/19

Fade Out Bottom

ページをスクロールしても、常にフッタ部分にフェードアウト効果を付けるCSSテクニックが掲載されています。 フェードをかけている部分はフェードアウト用画像(bottom-fade.png、透過PNG)を使用していますが、CSSハックを使用しているのでIE 6にも対応しています。

設置イメージ設置イメージ
CSS
<style type="text/css">
  #wrap { width:600px; z-index:1; margin:10px auto; }
  #bottom_fade { 
    width:600px; height:200px; z-index:99; position:fixed; bottom:0px;
    background:url("フェードアウト用画像URL") bottom center no-repeat;
  }
</style>
<!--[if lte IE 6]>
  <style type="text/css" media="screen">
    #bottom_fade {
      background:none;
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='フェードアウト用画像URL',sizingMethod='scale');
      left:0px;
      height:200px;
      position:absolute;
      bottom:-18px;
      width:expression(document.body.clientWidth);
    }
    html, body { height:100%; overflow:auto; }
  </style>
<![endif]-->
HTML
<div id="wrap">
  ・・・
  <div id="bottom_fade"></div>
</div>
Fade Out Bottomの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>Fade Out Bottom | 設置サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css"  type="text/css" media="all" />
        <style type="text/css">
            #wrap { width:600px; z-index:1; margin:10px auto; }
            #bottom_fade { width: 600px; height: 200px; z-index: 99; position: fixed; bottom: 0px; background: url(/content/img/css/bottom-fade.png) bottom center no-repeat; }
        </style>
        <!--[if lte IE 6]>
            <style type="text/css" media="screen">
                #bottom_fade {
                    background: none;
                    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/img/css/bottom-fade.png',sizingMethod='scale');
                    left: 0px;
                    height: 200px;
                    position: absolute;
                    bottom: -18px;
                    width: expression(document.body.clientWidth);
                }
                html, body {
                    height: 100%; overflow: auto;
                }
            </style>
        <![endif]-->
        <style type="text/css">
            dl { margin:0 0 100px 0; padding:0; background-color:#000; }
            dt { margin:0; padding:0; width:250px; height:190px; float:left; color:#333; }
            dt img { display:block; width:240px; height:180px; margin:5px; }
            dd { margin:0 0 0 250px; padding:0; color:#fff; height:190px; }
            dd p { padding:10px 10px 0 10px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://css-tricks.com/examples/FadeOutBottom/'>Fade Out Bottom</a> | 設置サンプル</h1>
            <p>▼ページをスクロールしても、ページのフッタ部分に常にフェードアウト効果がかかった状態になります。</p>
            <dl>
                <dt><a href="http://www.flickr.com/photos/22559849@N06/3032375214/" title="サインがいっぱい@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_m.jpg" width="240" height="180" alt="サインがいっぱい@鳥小屋" /></a></dt><dd><p>芸能人の方や、著名人の方のサインが壁にところなしと!</p></dd>
                <dt><a href="http://www.flickr.com/photos/22559849@N06/3031535599/" title="レバ刺@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_m.jpg" width="240" height="180" alt="レバ刺@鳥小屋" /></a></dt><dd><p>びっくりするぐらい美味しいレバ刺!鮮度抜群!味付きでたれには付けて食べないタイプ。ぜんぜんレバーの臭みがなくて、ちょっとレバーって嫌いって人でもつるつるいけちゃいそう!いままで食べた中で一番おいしいレバ刺でした♪何皿もいけそうなくらい!!</p></dd>
                <dt><a href="http://www.flickr.com/photos/22559849@N06/3031535435/" title="ハツ刺@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3055/3031535435_6af4618ea1_m.jpg" width="240" height="180" alt="ハツ刺@鳥小屋" /></a></dt><dd><p>珍しいハツ刺。生でハツ食べるなんて初めてでした!味は、レバ刺よりもあっさりめで、まったくクセがなくて、口に入れるととろける感じがグー!うまい。としか言いようがありません♪</p></dd>
                <dt><a href="http://www.flickr.com/photos/22559849@N06/3031535573/" title="明太子玉子焼き@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_m.jpg" width="240" height="180" alt="明太子玉子焼き@鳥小屋" /></a></dt><dd><p>玉子焼きの中に明太子がたっぷり♪上に乗ったマヨネーズとの愛称抜群でどことなーく懐かしいお袋の味!玉子焼きは半熟でとろっとろっ♪ほっぺたがおちそうでした!</p></dd>
                <dt><a href="http://www.flickr.com/photos/22559849@N06/3032375140/" title="モツ鍋@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_m.jpg" width="240" height="180" alt="モツ鍋@鳥小屋" /></a></dt><dd><p>キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわw</p></dd>
                <dt><a href="http://www.flickr.com/photos/22559849@N06/3032375082/" title="モツ鍋@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_m.jpg" width="240" height="180" alt="モツ鍋@鳥小屋" /></a></dt><dd><p>キャベツがしんなりしてきてかき混ぜると・・・キャベツの中に隠れていた大量のモツがお目見え!</p></dd>
                <dt><a href="http://www.flickr.com/photos/22559849@N06/3032375106/" title="モツ鍋@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3151/3032375106_226d2a6d52_m.jpg" width="240" height="180" alt="モツ鍋@鳥小屋" /></a></dt><dd><p>かき混ぜて3分待つと出来上がり!!彩りもきれい。さぁ食べるぞー!!</p></dd>
                <dt><a href="http://www.flickr.com/photos/22559849@N06/3032374922/" title="モツ鍋の〆@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_m.jpg" width="240" height="180" alt="モツ鍋の〆@鳥小屋" /></a></dt><dd><p>ちゃんぽん麺か雑炊が選べます!今回はちゃんぽん麺をチョイス!ぱっと見、カルボナーラみたいだけどw麺が太くてコシがあって、醤油ベースのスープとすごく合う!</p></dd>
                <dt><a href="http://www.flickr.com/photos/22559849@N06/3032374882/" title="モツ鍋の〆@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_m.jpg" width="240" height="180" alt="モツ鍋の〆@鳥小屋" /></a></dt><dd><p>モツやら野菜やらしいたけやらいろいろなダシが出た後のスープにちゃんぽん麺を投入!スープと麺が絡み合ってめちゃくちゃ美味しかったです!</p></dd>
                <dt><a href="http://www.flickr.com/photos/22559849@N06/3032374798/" title="モツ鍋@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_m.jpg" width="240" height="180" alt="モツ鍋@鳥小屋" /></a></dt><dd><p>食べ終わった後のモツ鍋。ここにスープを足して、これから〆にまいります!このスープ、きっと何を入れても合うんだろうなってくらい美味しい♪</p></dd>
            </dl>
            <div id="bottom_fade"></div>
        </div>
    </body>
</html>

画像に影をつける

2007/8/19

シャドウ用画像:5x5

<style type="text/css">
	/* 親要素 */
	.shadow {
		background-image:url(/content/img/css/shadow.gif);	/* 背景画像を指定 */
		background-repeat:repeat;	/* 背景画像の繰り返し */
		background-position:right bottom;	/* 背景画像の表示位置 */
		float:left;	/* 左寄せ */
		margin:13px 5px 0 5px;	/* 文字との間隔調節 */
		padding:0;
	}
	/*
		親要素から画像をずらした部分が“影”になります。
		left、topの数値が小さくなるほど影が太くなります。
		画像に枠線を付けたい場合は、ボーダープロパティで指定します。
		例) border:1px solid #000;
	*/
	.shadow img {
		position:relative;	/* 親要素から相対位置に表示 */
		left:-3px;	/* 親要素から左に3pxずらす */
		top:-3px;	/* 親要素から右に3pxずらす */
		border:0;	/* 画像の枠線なし */
	}
</style>

<div class="shadow"><img src="/content/img/pic1-thumb.png" alt="ケーキの写真" /></div>
<p>
	シャドウ(影)に使用する画像を1枚用意します。
	そのシャドウ用画像をdiv要素の背景に指定し、そのdiv要素の中にある写真画像を、そのdiv要素から左上に少しずらして表示することで画像を浮き出た感じに見せています。
</p>
<p>
	ずらしが大きいほど影が大きくなります。シャドウ用画像は5px四方のグレーの背景画像を使用しています。
	シャドウは、写真の大きさに合わせて伸縮します。
</p>
<br clear="all" /><!-- 画像の回り込みを解除したい位置に挿入 -->

<div class="shadow"><img src="/content/img/pic1.png" alt="ケーキの写真" /></div>
<p>
	シャドウ(影)に使用する画像を1枚用意します。
	そのシャドウ用画像をdiv要素の背景に指定し、そのdiv要素の中にある写真画像を、そのdiv要素から左上に少しずらして表示することで画像を浮き出た感じに見せています。
</p>
<p>
	ずらしが大きいほど影が大きくなります。シャドウ用画像は5px四方のグレーの背景画像を使用しています。
	シャドウは、写真の大きさに合わせて伸縮します。
</p>
<br clear="all" /><!-- 画像の回り込みを解除したい位置に挿入 -->
ケーキの写真

シャドウ(影)に使用する画像を1枚用意します。 そのシャドウ用画像をdiv要素の背景に指定し、そのdiv要素の中にある写真画像を、そのdiv要素から左上に少しずらして表示することで画像を浮き出た感じに見せています。

ずらしが大きいほど影が大きくなります。シャドウ用画像は5px四方のグレーの背景画像を使用しています。 シャドウは、写真の大きさに合わせて伸縮します。


ケーキの写真

シャドウ(影)に使用する画像を1枚用意します。 そのシャドウ用画像をdiv要素の背景に指定し、そのdiv要素の中にある写真画像を、そのdiv要素から左上に少しずらして表示することで画像を浮き出た感じに見せています。

ずらしが大きいほど影が大きくなります。シャドウ用画像は5px四方のグレーの背景画像を使用しています。 シャドウは、写真の大きさに合わせて伸縮します。


関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop