[CSS]セレクタの便利な使い方も学べる、一枚の画像で写真を重ねたように見せるスタイルシートのテクニック

Demo 1 まずは、HTMLから。 HTML img要素をdiv要素で内包したシンプルなHTMLです。 divにclassを付与するのがポイントです。 <div class='stackone'> <img src="image.jpg" /> </div> デモでは下記の画像を使用しました。 Tinkerbell 画像のサイズ：200x130 [ad#ad-2] CSS CSSはステップごとに、説明します。 まずは、margin, paddingをリセットし、bodyの背景カラーをセットします。 * {margin: 0; padding: 0;} body {background: #ccd3d7;} 画像に少しスタイルを加えます。 画像の周りに写真のような縁取りをし、シャドウを加えます。 ※height, widthは画像のサイズに合わせて変更してください。 .stackone {

[lotus_tribal]

おもしろーい！

[SpeedcoreTokyo]

勉強になります

[gotack]

写真を重ねたように見せるテク

[warriorking]

(CSS)セレクタの便利な使い方も学べる、一枚の画像で写真を重ねたように見せるスタイルシートのテクニック | コリス

[nibushibu]

:beforeと:afterは色々使い道があるなー。そして、その度にIE用にjQueryで.ie-beforeみたいな要素をappend()するという無駄な作業はやめにしたい…

[yuria_s]

セレクタの便利な使い方も学べる、一枚の画像で写真を重ねたように見せるスタイルシートのテクニック

[Donca]

✔ [CSS]セレクタの便利な使い方も学べる、一枚の画像で写真を重ねたように見せるスタイルシートのテクニック