box-shadow を使って、本体の DIV の影をいくつも複製して、それぞれにサイズや色や透過の処理を施す事ができます。 ここでは、本来の影としての『ぼかし処理』は使用せずに、影分身がどういうふうに行われるかが良く解るようにコードを作成しました。
最初の一つ目だけが、border で枠線を引いていますが、影は二つを重ねてボーダーと同じ表現をしています。 影は追加すると、後ろへ重なり隠れます。ですから、ボーダーを作る場合は順序は重要です。 数はいくらでも作成できるので、模様やアイコンを作成するのに有効ですし、複数の DIV や文字そのものも組み合わせて行く事ができます。CSS でアイコンを作るサイト http://one-div.com/
<style type="text/css">
#target1 {
/* 最初の DIV にボーダー指定 */
margin: 0 0 0 50px;
width: 100px;
height: 100px;
border-radius: 20px; /* 形状が影にも反映される */
border: solid 5px #909090;
-webkit-transform:skew(40deg);
-moz-transform:skew(40deg);
-ms-transform:skew(40deg);
-o-transform:skew(40deg);
transform:skew(40deg);
}
#target2 {
/* 最初の DIV */
margin: 0 0 0 50px;
width: 100px;
height: 100px;
border-radius: 20px;
border: solid 5px #909090;
box-shadow:
/* グレーの同じサイズの影 */
110px 0px 0px 0px rgba(144,144,144,1)
;
/* DIV に対する特殊形状効果( 当然影にも反映される ) */
-webkit-transform:skew(40deg);
-moz-transform:skew(40deg);
-ms-transform:skew(40deg);
-o-transform:skew(40deg);
transform:skew(40deg);
}
#target3 {
/* 最初の DIV */
margin: 0 0 0 50px;
width: 100px;
height: 100px;
border-radius: 20px;
border: solid 5px #909090;
box-shadow:
/* 白の少し小さい影 */
110px 0px 0px -5px rgba(255,255,255,1),
/* その後ろにグレーでボーダーを再現 */
110px 0px 0px 0px rgba(144,144,144,1)
;
/* DIV に対する特殊形状効果( 当然影にも反映される ) */
-webkit-transform:skew(40deg);
-moz-transform:skew(40deg);
-ms-transform:skew(40deg);
-o-transform:skew(40deg);
transform:skew(40deg);
}
#target4 {
/* 最初の DIV */
margin: 0 0 170px 50px; /* 170px は、影のぶんマージンを取って表示場所を確保 */
width: 100px;
height: 100px;
border-radius: 20px;
border: solid 5px #909090;
box-shadow:
/* 影なので、後ろへ後ろへと重なる */
110px 0px 0px -5px rgba(240,240,240,1),
160px 50px 0px 0px rgba(255,0,0,1),
210px 100px 0px 0px rgba(0,255,0,1),
260px 150px 0px 0px rgba(0,0,255,1)
;
/* DIV に対する特殊形状効果( 当然影にも反映される ) */
-webkit-transform:skew(40deg);
-moz-transform:skew(40deg);
-ms-transform:skew(40deg);
-o-transform:skew(40deg);
transform:skew(40deg);
}
</style>
<div id="target1"></div>
<div id="target2"></div>
<div id="target3"></div>
<div id="target4"></div>
コードのテスト http://jsdo.it/sworc/ecgp
タグ：CSS3
|
|
【CSS3の最新記事】
- CSS/jQuery : 『display:table-cell』 と 『margin:auto』 と 『vertical-align:middle』 を使用して、吹き出し画像の中央に文章を表示する
- CSS の box-shadow を jQuery を使ってスライダーでどうなるか確認して定義文字列を取得できるようにしました
- CSS アニメーションによるハンバーガーアイコンの作成方法と CSS プロパティの意味
- CSS だけで回る、実行中アイコン ( 但し IE9 は不可 ) の指定されたCSSの意味の解説
- 『3D Bouncing Ball with CSS3』のデータを使って光沢ボタンを作成する
- フリーフォントを使った背景透過PNGとCSSを使って、グラデーションな影付き吹き出しやボタンを作る。
- Google ストリートビューを表示している class="gm-style"
- linear-gradient のみで、ほぼ大丈夫なようです(IEは10限定、Windows Safariはアウト)
- 現時点の IE9、IE10、Chrome、Firefox、Opera、Safari でグラデーションの CSS 記述
- CSS で画像が立ってるような影を付けて、画像の角は丸くしておく
- IE 兼用背景 Fade transition の実装
- CSS3 と HTML5 で実装具合の表示テスト - 2 / ( 透過・倍率編 )
- CSS3 と HTML5 で実装具合の表示テスト
- ブラウザ別の角丸とグラデーションの適用状態の比較画像
- CSS3 の borderRadius で、四角から円へのモーフィング
- CSS3 : 絶対位置指定(absolute)を使用して簡単にアニメーション。しかも、適用するのは、JavaScript
