CSSで影をつける

CSS3では「box-shadow」を使って簡単に影をつけることができます。
ただし、Firefoxでは-moz-を、GoogleChromeやsafariでは-webkit-をつける必要があります。
あたらしいバージョンではいらなくなりますが、しばらくはつけて置いてください。
IE9、Operaではいりません。

ボックスの影

色、場所、ぼかしの大きさ、影の広がりの3要素になります。
全部CSSだけで実現できます。

基本

box-shadow: (横にずらす) (縦にずらす) (大きさ) (広がり) (色);
という指定をします。
また、内側に影をつける場合はinsetをつけて、 box-shadow: inset (横にずらす) (縦にずらす) (大きさ) (広がり) (色);
となります。ただし、ぼかしの大きさと広がりは省略できます。
ぼかしの大きさと、広がりについてはブログの方へ。「影のぼやけと広がり」 また、,で区切っていくつも指定できます。
-moz-と-webkit-をつけたバージョンも一緒に記述しましょう。
  div.sample_6_1
  {
  box-shadow:5px 5px 10px #AAA;
  -moz-box-shadow:5px 5px 10px #AAA;
  -webkit-box-shadow:5px 5px 10px #AAA;
  }
  div.sample_6_2
  {
  box-shadow:0px 0px 20px 5px #777;
  -moz-box-shadow:0px 0px 20px 5px #777;
  -webkit-box-shadow:0px 0px 20px 5px #777;
  }
  div.sample_6_3
  {
  box-shadow:-10px -5px 20px -5px #FAA;
  -moz-box-shadow:-10px -5px 20px -5px #FAA;
  -webkit-box-shadow:-10px -5px 20px -5px #FAA;
  }
  div.sample_6_4
  {
  box-shadow:inset 5px 5px 10px 5px #777;
  -moz-box-shadow:inset 5px 5px 10px 5px #777;
  -webkit-box-shadow:inset 5px 5px 10px 5px #777;
  border:1px solid #000;
  }
  div.sample_6_5
  {
  box-shadow:inset 0px 0px 15px #333;
  -moz-box-shadow:inset 0px 0px 15px #333;
  -webkit-box-shadow:inset 0px 0px 15px #333;
  }
  div.sample_6_6
  {
  box-shadow:
  5px 5px 10px #AFA,
  inset 5px 5px 50px #CC5;
  -moz-box-shadow:
  5px 5px 10px #AFA,
  inset 5px 5px 50px #CC5;
  -webkit-box-shadow:
  5px 5px 10px #AFA,
  inset 5px 5px 50px #CC5;
  }
    
[サンプル](非対応のブラウザでは影は表示されません)
sample_6_1
sample_6_2
sample_6_3
sample_6_4
sample_6_5
sample_6_6

これを擬似クラスと組み合わせると、けっこうこった、スタイリッシュな擬似ボタンを作ることができます。
擬似グラデーションのようなことも可能です。
グラデーション、丸角、テキストの影を紹介した後でボタン専門の項目を設ける予定なので、ここでは影を使ったサンプルのみです。
スタイルシートも省略しますが、このページのスタイルシートからサンプル番号のソースを直接見ることができます。
ただし、マージンの設定などはほかの部分の影響を受けている場合があるので、注意してください。

[サンプル](非対応のブラウザでは影は表示されません)
sample_6_7
sample_6_8
sample_6_9
sample_6_10
sample_6_11
sample_6_12

sample_6_13

ブラウザによって、影やボーダーの色に違いが出るようです。今度、いろいろとブログに書かせていただきます。

影を使ったデザイン

box-shadowでの影付けで、ボタン以外のデザインを扱います。
基本的なことは前の項目を参照してください。

写真をデザイン

写真をかっこよく飾ってみます。
写真は「写真素材 足成」よりお借りしました。
サンプル写真 特に記述がない場合、HTMLのほうは、 <img class="サンプル番号" src="画像名" alt="サンプル写真" width="サイズ"> のような形になっています。
新しいスタイルを使わないとこんな感じです。
	img.sample_7_1
	{
	border:1px solid black;
	padding:10px;
	}
	
	img.sample_7_2
	{
	border:3px solid gray;
	padding:10px;
	}
    
サンプル写真 サンプル写真
つづいて、シンプルに影をつけてみます。
直接指定してもいいし、フレーム風にしてみるのもいいです。
普通より浮き上がって見えるため、ポップアップのjavascript等と組み合わせるのもお勧めです。
	img.sample_7_5
	{
		border:1px solid black;
		padding:10px;
		box-shadow:2px 2px 5px black;
	}
	img.sample_7_4
	{
	border:1px solid black;
	padding:10px;
	box-shadow:5px 5px 10px #666;
	}
    
サンプル写真 サンプル写真

さらに、内側に影をつけることも可能です。
内側につけると浮き上がりとは違う雰囲気になります。
	.sample_7_5
	{
	border:3px ridge black;
	padding:15px;
	box-shadow:inset 0px 0px 10px 15px #663300,
	0px 0px 20px #000;
	}
    
サンプル写真
サンプル写真
このように、額縁風にしたり、へこんでいるようにすることもできます。
使いどころによっては影が生きてきます。
さらに発展して、写真の上にかぶせることも可能です。
	.sample_7_7
	{
	display:block;
	width:250px;
	height:190px;
	border:3px ridge black;
	padding:3px;
	box-shadow:inset 0px 0px 100px 50px #000;
	}
	.sample_7_7 img
	{
	width:240px;
	height:180px;
	position: relative;
  	z-index: -1;
	}
	
サンプル写真

ちょうどこの写真だと蜂にスポットライトがあたったようになって、かっこいいですね。
ほかのサイト様も紹介しておきます。
輪郭線をぼかすサンプルです。
CSS の box-shadow を使った画像輪郭のぼかし

ちなみに、なぜかdivで囲うと(私がバカだからだとおもいますが)配置がうまくいかないです・・・

文字に影をつける

box-shadowで各要素に影をつける方法を前の項目で紹介しました。
それと同じように文字にも影をつけられます。
CSS2で制定、CSS2.1で消去され、このたびCSS3で再制定されました。
box-shadowとは違い、-moz-や-webkit-をつける必要はありません。

使い方

下記のように指定します。
text-shadow:(横方向のずれ),(縦方向のずれ),(ぼかしの具合[省略可]),(色) ぼかしの広がりが無いほかはbox-shadowと変わりありません。
box-shadowと同じく、「,」で区切って複数指定できます。
これを使うと、あたかも画像のような文字を作り出すことができます。
ですが、あくまで文字なので選択も、コピーもできます。
修正もいちいち画像を作り直したりする必要も無く、簡単です。
デザイン性と作成者、閲覧者どちらから見ても利便性が高く作れるのです。

基本サンプル

まずはシンプルな影です。
.sample_8_1
{
 text-shadow:2px 2px 5px #000;
}
.sample_8_2
{
 text-shadow:-2px -2px 5px #F00;
}
.sample_8_3
{
 text-shadow:5px 5px 2px #F00,
 -5px -5px 2px #0F0;
}
.sample_8_4
{
 text-shadow:0px 0px 3px #00F;
}
.sample_8_5
{
 text-shadow: 2px 2px 3px #00F,
 0px 0px 2px #F00;
}

	 
サンプル sample_8_1 sample_8_2 sample_8_3 sample_8_4 sample_8_5 sample_8_6
このようにできます。指定を小さくすれば、でしゃばらず、手軽に使えると思います。

応用的な影付け

応用すれば、さらに高度なことができます。
ちなみに、影を上に載せたい場合、sample_8_11のようにCSS3で定義される、アルファ値を持つ色を指定できるrgbaを使えばできます。
.sample_8_8
{
color:#FFF;
text-shadow:0px -1px 3px #000, 0px 1px 3px #000,1px 0px 3px #000,-1px 0px 3px #000;
}	
.sample_8_9
{
text-shadow:0px -1px #FFF, 0px 1px #FFF,1px 0px #FFF,-1px 0px #FFF,3px 3px 2px #000;
}	
.sample_8_10
{
font-weight:bold;
text-shadow:0px -1px #FFF, 0px 1px #FFF,1px 0px #FFF,-1px 0px #FFF,
	0px -2px 1px  #000, 0px 2px 1px #000,2px 0px 1px  #000,-2px 0px  1px #000;
}	
.sample_8_11
{
color:rgba(0,0,255,0.5);
text-shadow:2px 2px rgba(255,0,0,0.5);
}	
.sample_8_12
{
padding:10px 0px 10px;
background-color:#555;
text-shadow:1px 1px #FFF;
}	
.sample_8_13
{
font-weight:bold;
color:#AAA;
text-shadow:1px 1px #000,
2px 2px #000,
3px 3px #000,
4px 4px #000;
}	
.sample_8_14
{
font-weight:bold;
color:#333;
text-shadow:0px -1px #FFF, 0px 1px #FFF,1px 0px #FFF,-1px 0px #FFF,3px 3px 2px #000,	
1px 1px 1px #000,
2px 2px 1px #000,
3px 3px 1px #000,
4px 4px 1px #000;
}	
	 
サンプル グレー sample_8_7 sample_8_8 sample_8_9 sample_8_10 sample_8_11 sample_8_12 sample_8_13 sample_8_14
このように、上下左右に0pxや1pxのぼかしを指定することで、縁取りを行うことができます。
縁取りをすれば、色が濃い背景や、画像の上でも可読性の高い文字にできます。
ただし、ある程度文字が大きくないとぐちゃぐちゃになってしまうので、タイトルなどで使うとよいでしょう。
sample_8_10は2重にふちをつけています。
影を使って立体感を出す場合、sample_8_11、sample_8_12のように複数のずらした影をつけることで解決します。 ここでは黒ですが、もちろん、好きな色に変えられます。
ここまでくると、もう画像の代わりとして十分使えるのではないでしょうか。

角を丸くする

CSS3で角を丸くします。
Operaでは10.50、IEは9から、それ以外はもう少し早く実装済みです。
ただし、OperaとIEを除き最新版以外では、Firefoxでは-moz-を、GoogleChromeなどでは-webkit-をつける必要があります。
まだ普及しきっていないのでまだつけておきましょう。
ちなみに、ずいぶん前から実装していたFirefoxはCSS3と指定のしかたが違っていました。 しかし、ドコからかはわかりませんが、普通に-moz-をつけるだけで適用されるようになったようです。 どうやら、両方に対応しているようです。3.6あたりでは対応済みなので、もう古い記法をする必要は無いでしょう。
すいません。3.6に近いバージョンで確認したところ、対応していませんでした。
Firefoxようでは指定の角に適用する場合のみ、違う書き方をする必要があります。
Firefox4では-moz-は不要になっています。

基本

すべての角に適用する場合は以下のようにします。
下の図は、50x50のボックスにそれぞれの大きさの角丸を設定した例です。 角丸の値が半径を超えると、まん丸になり、それ以降は変化がなくなります。 border-radius:(丸の半径) と指定します。数値が大きくなるほど、角は丸くなります。 角丸サンプル
実際に表示して見ます。

.sample_9_1
{
 background-color:green;
 width:100px;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
}
.sample_9_2
{
 background-color:green;
 width:100px;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
}
.sample_9_3
{
 background-color:green;
 width:100px;
 height:2em;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
}
.sample_9_4
{
 background-color:green;
 width:100px;
 height:2em;
 border-radius:20px;
 -moz-border-radius:20px;
 -webkit-border-radius:20px;
}
	  
サンプル
sample_9_1
sample_9_2
sample_9_3
sample_9_4

この数値は、円の半径の大きさになります。その半径を持った円の弧の分、角が丸くなるのです。
たとえば、20pxを指定すると、以下のようになります。
角丸サンプル
このように、半径20pxの円と丸角はぴったりと重なります。
ちなみに、pxなどのほかにボックスに合わせた%も利用可能です。


まとめて設定

paddingやmarginのようにまとめて指定することもできます。
border-radius:(左上) (右上) (右下) (左下) 左上から時計回りに適用されます。
次のsample_9_5は、
[右上:5px] [左上:10px]
[右下:20px] [左下15px]
という指定になっています。
また、このように指定する場合、省略ができます。
左下(4つめ) => 右上と同じ
右下(3つめ) => 左上と同じ
右上(2つめ) => 左上と同じ
それで、2つ略したのがsample_9_6です。

.sample_9_5
{
 background-color:green;
 width:100px;
 height:2em;
 border-radius:5px 10px 15px 20px;
 -moz-border-radius:5px 10px 15px 20px;
 -webkit-border-radius:5px 10px 15px 20px;
 }
.sample_9_6
{
 background-color:green;
 width:100px;
 height:2em;
 border-radius:5px 20px;
 -moz-border-radius:5px 20px;
 -webkit-border-radius:5px 20px;
}
 	  
サンプル
sample_9_5
sample_9_6

若干変な形ですが、こういうのを画像なしで表示できるのです。


複雑な指定

さらに、もっと複雑に指定できます。
角丸を円ではなく楕円で指定できるのです。
最初の4つで横方向の指定をします。「/」で区切って、縦方向の指定をします。
border-radius:(左上) (右上) (右下) (左下) / (左上) (右上) (右下) (左下)

.sample_9_7
{
 float:left;
 border-radius:40px / 20px;
 -moz-border-radius:40px / 20px;
 -webkit-border-radius:40px / 20px;
 width: 100px;
 height:100px;
 background-color:green;
}

.sample_9_8
{
 border-radius:40px 20px 20px 60px / 10px 20px 50px 30px;
 -moz-border-radius:40px 20px 20px 60px / 10px 20px 50px 30px;
 -webkit-border-radius:40px 20px 20px 60px / 10px 20px 50px 30px;
 width: 100px;
 height:100px;
 background-color:green;
}	  
	  

このような図形もできるのです。

サンプル

sample_9_7

sample_9_8
このように、変形させることができます。
sample_9_8に円を表示したものです。(width、heightを2倍にしています)
サンプル
確かに、楕円の形の角になっていることがわかると思います。


指定した角に適用

特定の角のみ、という指定もできます。
左上 : border-top-left-radius
右上 : border-top-right-radius
右下 : border-bottom-left-radius
左下 : border-bottom-right-radius
1つだけ値を設定すると、円に。
2つ指定すると1つめが横幅、2つめが高さの楕円になります。
最新版でないFirefoxの場合、少し指定法が変わります。 -moz-border-radius-topleft のような形になります。注意してください。

.sample_9_9
{
 border-top-left-radius:20px;
 -moz-border-radius--topleft:20px;
 -webkit-border-top-left-radius:20px;
 width: 100px;
 height:100px;
 background-color:green;
}
.sample_9_10
{
 border-top-left-radius:20px 100px;
 -moz-border-radius-topleft:20px 100px;
 -webkit-border-top-left-radius:20px 100px;
 border-top-right-radius:20px 100px;
 -moz-border-radius-topright:20px 100px;
 -webkit-border-top-right-radius:20px 100px;
 width: 100px;
 height:100px;
 background-color:green;
}
	 
サンプル

次の項目で実装例をやります。

角丸実装例

前の項目で紹介した角丸を実際に使用した例を紹介します。


シンプルにボックス

シンプルなボックスのデザインです。

 .sample_10_1
 {
 background-color:white;
 width:150px;
 height:100px;
 border:1px solid #AAA;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-radius:10px;
 box-shadow:0px 0px 10px #000;
 -moz-box-shadow:0px 0px 10px #000;
 -webkit-box-shadow:0px 0px 10px #000;
 }
 .sample_10_2
 {
 background-color:white;
 width:150px;
 height:100px;
 border:1px solid #AAA;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-radius:10px;
 box-shadow:inset 0px 0px 20px #000;
 -moz-box-shadow:inset 0px 0px 20px #000;
 -webkit-box-shadow:inset 0px 0px 20px #000;
 }
 .sample_10_3
 {
 background-color:white;
 width:150px;
 height:100px;
 border:1px solid #AAA;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-radius:10px;
 box-shadow:5px 5px 10px #666
 ,inset 1px 1px 3px #666;
 -moz-box-shadow:5px 5px 10px #666
 ,inset 1px 1px 3px #666;
 -webkit-box-shadow:5px 5px 10px #666
 ,inset 1px 1px 3px #666;
 }
 .sample_10_4
 {
 background-color:white;
 width:150px;
 height:100px;
 border:10px solid #AAA;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-radius:10px;
 }
	  
サンプル
sample_10_1
sample_10_2
sample_10_3
sample_10_4
シンプルに影をつけたり、枠を太くしただけです。
それでも、十分デザインされた枠に見えます。
sample_10_3のように影をつけると簡単なポップアップウィンドウにも見えます。


INPUTを丸くする

border-dadiusを使うと、inputなども丸くできます。
このスタイルのテキストボックスは検索窓などに利用されていることもあります。

 .sample_10_5
 {
border:1px solid #666;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding-left:5px;
padding-right:5px;
 }
 .sample_10_6
 {
border:1px solid #666;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:inset -3px -3px 3px #CCC;
-moz-box-shadow:inset -3px -3px 3px #CCC;
-webkit-box-shadow:inset -3px -3px 3px #CCC;
 }	 
	 
サンプル

ボタンをつくる

inputを装飾するだけでもよいのですが、Divなどを使って独自のボタンも作れます。
影のところでも紹介しましたが、今回もサンプルだけです。
また今度、ボタンの項目を作って紹介する予定です。

サンプル
sample_11_1
sample_11_2
sample_11_3



背景画像を複数指定する

CSS3では、複数の背景画像を指定することができます。
これはMultiple background imagesと呼ばれています。
いままで、背景にいくつも画像を設定することはできず、やるとしたらhtmlとbody、さらにdivに設定したりして重ねていたと思います。
しかし、cssがごちゃごちゃする上に、重ね具合によっては無意味なDIVタグが大量にできてしまいます。
それが、この複数背景で解決します。


複数背景指定を使わない場合

とりあえず、この3枚の絵を重ねます。(2枚目のグラデーションは、わかりやすいように背景に黒を設定してありますが、本来は白のみです。)
 div.sample_12_1
  {
  width:300px;
  height:300px;
  background:url(htmlcss/image/picture1.jpg) no-repeat;
  }
  div.sample_12_2
  {
  width:300px;
  height:300px;
  background:url(htmlcss/image/multiBackground_1.png) no-repeat right bottom;
  }
  div.sample_12_3
  {
  width:300px;
  height:300px;
  background:url(htmlcss/image/multiBackground_2.gif) repeat-y right top;
  }	
		
 		<div class="sample_12_1">
		 <div class="sample_12_2">
		  <div class="sample_12_3">
		  	背景を重ねるテストです。




うまく重なりますが、divが多くなっています。 </div> </div> </div>
背景を重ねるテストです。




うまく重なりますが、divが多くなっています。

新しい複数背景を使うと

次は、同じことを複数背景を使ってやってみます。
複数背景は、先ほどの指定を「,」で区切って複数指定するだけです。
先に書いたものほど上に来るので注意してください。
  div.sample_12_4
  {
  width:300px;
  height:300px;
  background:url(htmlcss/image/multiBackground_2.gif) repeat-y right top
  ,url(htmlcss/image/multiBackground_1.png) no-repeat right bottom
  ,url(htmlcss/image/picture1.jpg) no-repeat;
  }
  
   <div class="sample_12_4">
		背景を重ねるテストです。




DIVはひとつだけです </div>
背景を重ねるテストです。




DIVはひとつだけです
このように、ぐっとDIVの数を減らせ、CSSも短くなりました。
新しいブラウザなら結構対応しているようです。
この例ではあまりかっこよくありませんが、まあ、例なので。 うまいこと使えば芸術的なサイトが無駄なタグなしでできるようになります。