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

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

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

この記事の著者

ガジェットブロガー

R.U.I ルイ

詳しいプロフィール

プロフィール

ガジェットやモノで生活に刺激を「ルイログ」。当サイトではAppleデバイスやその周辺機器、使えるソフト・アプリ、さまざまなガジェットや生活家電・モノをレビューしています。他にもWEBをデザインのコピペで簡単に使えるコードを紹介したりも。WEBエンジニアの方やPCが趣味・PCを使って仕事をしている方にとって役立つ情報を発信しています。カメラ・写真が好きなのでレビュー商品も写真を多め撮影し掲載することでより商品の魅力や細かいが伝わるよう心がけています。 プロフィール詳細やレビューガイドライン

コピペで簡単！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の高さはお好みでどうぞ。

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

img{〜〜}

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

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

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

まとめ

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

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

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

良きWEBデザインをっ！