2013.05.03
css

CSSでポラロイド写真みたいなエフェクト

CSSだけでできる面白いエフェクトです。

CSSでポラロイド写真みたいなエフェクト

ボーダーをうまく使ってフォトショップのようなポラロイド写真風の枠を作成する方法です。
borderのサイズを変えるひと工夫で簡単にできてしまうのが嬉しいところ。

HTML

HTMLソース
<div class="polaroid">
  <p>Snapper's Grill</p>
  <img src="画像のパス" width="400">
</div>

今回は幅400pxの画像を用意するか、上記のようにwidthで400と指定します。

Web Fontを使用

ポラロイドの文字部分は、手書き風でオシャレなウェブフォントを使って表示しています。
無料のGoogle Web Fontサービスを利用し、Kaushanというフォントで表示するので、下記をHTMLのhead内に記述。

HTMLソース
<link href="http://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" type="text/css">

CSS

CSSソース
.polaroid {
  position: relative;
  width: 420px;
}
 
.polaroid img {
  border: 10px solid #e6e6fa;
  border-bottom: 45px solid #e6e6fa;
  -webkit-box-shadow: 3px 3px 3px #777;
     -moz-box-shadow: 3px 3px 3px #777;
          box-shadow: 3px 3px 3px #777;
}
 
.polaroid p {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0px;
  font-family: 'Kaushan Script', cursive;
  color: #756F61;
  font-size:21px;
  line-height:0.3;
}
CSSの説明
  • 2行目と15行目のposition
  • 2行目のrelativeに対してその子要素であるpへ15行目でabsoluteを対応させます。

  • 7行目~8行目
  • 7行目で上下左右すべてのボーダーを10pxに。
    その後border-bottomだけ45pxと記述。
    CSSは後から記述されたほうが優先になるというのがポイントです。

  • 17行目
  • widthを100%にすることで、文字が画像の下にくるようになります。

  • 22行目
  • フォントの種類、サイズによってline-heightで文字の位置を調整します。

このポラロイド写真風エフェクト、使い方次第ではデザインを引き立ててくれそうですね。

参考サイト: design shack
関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP