CSSでポラロイド写真風のボックスを作ってみよう!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは。
シーサイドレーベルweb担当の飯野です。

今回は、CSSを使って
ポラロイド写真風のボックス
を作ってみようと思います。

ワンコの写真だけ用意して、
あとはCSSでデザインします。

pola1

まずは、この様なポラロイド写真風の
設定の解説をします。

htmlファイルにこの様に設定します。

そして、ポラロイド風のCSSの設定は
この様に設定します。

#polaroidでボックスの設定をしてあげてます。
横幅や縦幅は写真に合わせて調整すると良いでしょう。

#polaroid imgで写真に枠線を表示させています。

#polaroid pは写真の説明文の文字設定です。

何も難しい設定は行っていませんが、
設定次第で、この様にポラロイド写真風に
見せることが出来ます。

次は、もう少し凝ったポラロイド写真風の
設定をしてみましょう。

pola2

写真を斜めに表示して、影を入れました。
角も若干丸くしてあります。

では、CSSの設定を見てみましょう。

最初のポラロイド写真風のCSSの設定に
いくつかの項目が追加されている形です。

box-shadowプロパティで影の設定を行い、
border-radiusプロパティで角を若干丸くしてあります。

そして、transformプロパティで回転の指定をしてあります。
transform: rotate(5deg);
この部分ですね。

数値を変えると、回転の角度が変わりますので
試してみてください。

-webkit-など、transformプロパティを
いくつか設定してありますが、ブラウザ毎の設定に
なっています。

ただ、バージョンなどによって、
表示されない場合もあります。

デモサイトはこちら

今回は、CSSを使ったポラロイド写真風の表現の仕方を
説明させて頂きました。

では、また来週お会いしましょう。

●3年ぶりに帰ってきた「藤田哲也の個別コンサルティング」

 ⇒ http://www.japan-forum.jp/sp/kojin.htm

mt

起業初年度1000万円、その後ゆるやかに年商3000万円までを目標に起業に向けて一歩を踏み出したい方向けの起業専門メルマガです。最新のノウハウを始め、セミナーや限定サービスのご案内をご希望の方は今すぐ下記フォームより、メインで使っているメールアドレスをご登録下さい。家族との時間を大切にしながら自由自在に収入を増やせる起業家になる方法を余すことなくお伝えいたします。

メールアドレス(必須)

コミュニティ