注目キーワード
  1. CSS
  2. WordPree
  3. Amazfit Bip

【CSS】😃ポラロイド写真っぽくおしゃれに装飾📷

CSSでポラロイド写真っぽくおしゃれに装飾

ポラロイド写真っぽくおしゃれに装飾

旅行記や自身の作品紹介にぴったりな、ポラロイドっぽい装飾です。私の画像のチョイスが悪くて遺影みたいになってますが💧元ネタはRi-mode Rainbowさん。
CSSでポラロイドのフチを作って文字を乗せています。

スポンサーリンク

トラブル発生

ポラロイド写真っぽくおしゃれに装飾

そのままコードをコピペすると位置がずれて、文字が隠れてしまいます。えらい所に画像が配置されているの図(笑)Wordpressだとずれるのかなー💧

ポラロイド加工のCSSはこれがダントツで素敵なので、なんとか私のWordpress用に使えないものかと改変した記録です。

表示例

ポラロイド写真っぽくおしゃれに装飾
nico-nico

可愛い!!文字はGoogleフォントの「Barrio」を使用しました。
Googleフォントって何?って方は関連記事をご覧下さい。

HTMLのソース

<div class="polaroid">
<img src="画像のURL" />
<span class="kopolaroid">入れる文字</span>
</div>

CSSのソース

3行目のwidthの値を、画像の幅+左右のフチ(10px+10px)にすると綺麗にできます。(例)画像の幅が400pxの場合は420px

.polaroid {
  position: relative;
  width: 220px; /* 写真の幅 + 20px */
  max-width:100%;
  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;
}
.kopolaroid {
  position: absolute;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  bottom: -45px;/* ポラロイドのフチ下の幅をマイナスで指定 */
  margin-left: auto;
  margin-right: auto;
  font-family: 'Barrio', cursive;/* フォントの書体 */
  color: #756F61;/* フォントの色 */
  font-size:1.5em;/* フォントサイズ */
}

文字が多い場合

ポラロイド写真っぽくおしゃれに装飾
スペースに対して文字が多い場合だよ

内緒ですけど、スペースに対して文字が多い場合、表示が崩れます。CSSでフォントサイズを小さくするか、ポラロイドのフチ下を太くします。

この文章の様に、文字を回り込ませる事も出来ます。.kopolaroidの中にfloat: left;とmargin-right: 30px;を追加してみて下さい。
こちらのイラストは【イラストAC】の「TOM TOM」さんです。
👉 無料イラストなら【イラストAC】

幅が広い場合

ポラロイド写真っぽくおしゃれに装飾

max-width:100%;を省略すると、幅が広い画像の場合、携帯などの小さな画面では画像が途切れますし、PCのブラウザで幅を狭めると(サイドバーがある場合は)はみ出ちゃいます。

幅広 表示例

幅が620pxの表示例です。携帯で見ても表示が途切れません。

ポラロイド写真っぽくおしゃれに装飾
620pxの幅だよ

つぶやき

CSSのtransform: rotateで全体をちょこっと傾けても可愛いです!

0