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

2019年2月28日2022年4月5日

R.U.I

今回は写真・画像を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の高さはお好みでどうぞ。