こんにちは。
シーサイドレーベルweb担当の飯野です。
今回は、CSSを使って
ポラロイド写真風のボックス
を作ってみようと思います。
ワンコの写真だけ用意して、
あとはCSSでデザインします。
まずは、この様なポラロイド写真風の
設定の解説をします。
htmlファイルにこの様に設定します。
|
1 2 3 4 |
<div id="polaroid"> <img src="dog.jpg" alt="dog" /> <p>★我が家のかわいいワンコです★</p> </div> |
そして、ポラロイド風のCSSの設定は
この様に設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#polaroid { background: #fff; margin: 30px auto 60px auto; width: 440px; height:420px; } #polaroid img { border: solid 1px #ddd; margin: 20px; } #polaroid p { font-size: 16px; text-align: center; } |
#polaroidでボックスの設定をしてあげてます。
横幅や縦幅は写真に合わせて調整すると良いでしょう。
#polaroid imgで写真に枠線を表示させています。
#polaroid pは写真の説明文の文字設定です。
何も難しい設定は行っていませんが、
設定次第で、この様にポラロイド写真風に
見せることが出来ます。
次は、もう少し凝ったポラロイド写真風の
設定をしてみましょう。
写真を斜めに表示して、影を入れました。
角も若干丸くしてあります。
では、CSSの設定を見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#polaroid2 { background: #fff; margin: 30px auto; width: 440px; height:420px; box-shadow: 0 2px 4px #777; border-radius: 3px; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } |
最初のポラロイド写真風のCSSの設定に
いくつかの項目が追加されている形です。
box-shadowプロパティで影の設定を行い、
border-radiusプロパティで角を若干丸くしてあります。
そして、transformプロパティで回転の指定をしてあります。
transform: rotate(5deg);
この部分ですね。
数値を変えると、回転の角度が変わりますので
試してみてください。
-webkit-など、transformプロパティを
いくつか設定してありますが、ブラウザ毎の設定に
なっています。
ただ、バージョンなどによって、
表示されない場合もあります。
【 デモサイトはこちら 】
今回は、CSSを使ったポラロイド写真風の表現の仕方を
説明させて頂きました。
では、また来週お会いしましょう。
●３年ぶりに帰ってきた「藤田哲也の個別コンサルティング」
