Author
R.U.I(ルイ)
ガジェットブロガー
ECサイト運営会社でWEBエンジニア&マーケターとして日々従事しており、会社ではWindows、お家ではmacの両刀遣い。SEOやWEBデザインが好き。ガジェットやモノで生活に刺激を与えたいという想いで人におすすめしたいモノの紹介記事を軸にブログ運営をしています。趣味でベースも嗜んでおり、F-Bassというハイエンドベースを愛用しています。
この記事のもくじ
CATEGORY
ルイログ愛用テーマSWELL

【コピペで簡単】CSSで写真・画像のおしゃれ加工。ポラロイド風ボーダーを実装する

コピペで簡単!CSSで画像にポラロイド風加工を施す方法

今回は写真・画像をcssでおしゃれ加工する方法の1つとして、影を利用したポラロイド風のボーダーをつけることによるおしゃれ加工を実装します。

もちろんコピペで簡単に実装できるようにしたので、是非参考にしてください。

もくじ

コピペで簡単!cssで写真・画像のおしゃれ加工。ポラロイド風ボーダー

まずはhtmlをば。

htmlは基本的なもの

<img src="画像URL" class="polaroid" alt="">

画像の指定に、「class=”polaroid”」で今回のcssを反映させるだけです。

メインのCSSはこちら

img.polaroid{
    background:#000;
    border:solid #fff;
    border-width:6px 6px 20px 6px;
    box-shadow:1px 1px 5px #333;
    -webkit-box-shadow:1px 1px 5px #333;
    -moz-box-shadow:1px 1px 5px #333;
    width:100%;
    height:auto;
}

widthの横幅やheightの高さはお好みでどうぞ。

CSSで画像にポラロイド風加工を施した結果
CSSで画像にポラロイド風加工を施した結果

これだけでポラロイド写真風の魅せ方ができます。おしゃれ加工も簡単だ!

img{〜〜}

と、クラス指定をせずにすべての画像に対して反映させるでも良いのですが、それだとポラロイド風になってほしくない・・・たとえばロゴ画像だとかタイトル用画像だとかまでポラロイド風になってしまいます。

なので、今回のようにcssで目的の画像に対して反映するように指定してあげましょう。

「border-width」で下側のボーダーだけ分厚くして、「box-shadow」で影をつけることによって立体的な雰囲気をだしています。

まとめ

今回は「コピペで簡単!cssで写真・画像のおしゃれ加工。ポラロイド風ボーダー」ということで、ただ写真を並べるだけではなく、CSSで少しおしゃれ風に加工したいなと思ったときに使えるテクニックを紹介しました。

写真をメインにしたコンテンツや、ECサイトだとセールページで商品画像をポラロイド風に加工してあげて雰囲気を出したり、メインで使う写真を1枚だけ目立たせるためにCSSを適用したりと、使い方はたくさんありそうです。

コピペで簡単に実装できるようにしたので、是非利用してみてください。

 

良きWEBデザインをっ!

コピペで簡単!CSSで画像にポラロイド風加工を施す方法

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ
閉じる