on:2012年3月14日sponsors画像は一枚だけで、複数の写真を重ねたように配置するスタイルシートのテクニックを紹介します。下記のキャプチャは、それぞれ一枚の画像しか使用していません。1まずは、HTMLから。HTMLimg要素をdiv要素で内包したシンプルなHTMLです。divにclassを付与するのがポイントです。/></div>デモでは下記の画像を使用しました。Tinkerbell画像のサイズ:200x130[ad#ad-2]CSSCSSはステップごとに、説明します。paddingをリセットし、bodyの背景カラーをセットします。#ccd3d7;}画像に少しスタイルを加えます。画像の周りに写真のような縁取りをし、シャドウを加えます。widthは画像のサイズに合わせて変更してください。1/4:写真のような縁取りを擬似要素を使って、さらにスタイルを加えます。画像の下にもう一つ画像があるようにします。画像の下にもう一枚あるようにこの時点では、単に崩れているようにしか見えません。ポジションを変更してみます。最後に、もう一つ擬似要素を使ってみます。この2番目はポジションを少し変え、背景カラーも異なるものにします。1の実装を応用して、さまざまなエフェクトに挑戦してみます。1と同様の方法で、3枚の画像を配置します。class名がそれぞれ異なるので、注意してください。/></div>CSSまずは、写真の縁取りをします。rgba(0,0,0,0.3);}上記のようにclassを一つずつ記述してもよいのですが、ここではもう少し楽になるように、セレクタを利用して記述します。rgba(0,0,0,0.3);}これで記述が楽になりました。画像を増やしても「stack」とつけていれば、スタイルシートの変更は必要ありません。写真のような縁取りを同様にセレクタを使って、画像の下にもう一枚画像があるようにしてみます。画像の下にもう一枚あるように最後に、3つの画像の重なり具合を変えて、スタイルしてみます。Posts関連記事が見つかりませんでした。