コピペで使えるCSS!画像まわり加工デザインCSS-6選-

いつもPhotoshopで画像を加工してから画像をUPしていたのですが、

普段使用しているPCが故障してしまい、Photoshopも今使えないので、

CSSで画像を加工しようと思ったのですが、どうせならみんなが使えるように、

画像に簡単に影を付けるようなコピペで簡単に使えるCSSを紹介しますね。



  • 下に影を入れる
2017072406

このように画像の下に影を入れるソースです。

<div class=”sh001″><img src=”ファイル名.jpg” ></div>

 

.sh001{
/*下に影を入れる*/
-webkit-box-shadow: 0 28px 16px -26px #8d8c8c;
-moz-box-shadow: 0 28px 16px -26px #8d8c8c;
box-shadow: 0 28px 16px -26px  #8d8c8c;
}




  • 下と右側に影を入れる
2017072410

このように画像の下と右側に影を入れるソースです。

<div class=”sh004″><img src=”ファイル名.jpg” ></div>

 

.sh002{
/*下と右側に影を入れる*/
-webkit-box-shadow: 3px 3px 3px #7C7C7C;
box-shadow: 3px 3px 3px #7C7C7C;
width:300px;
}

 




  • ちょっとポラロイド風
2017072408

ここにコメント入るよ。

ちょっとポラロイド風

<div class=”sh003″><img src=”ファイル名.jpg” ></div>

 

.sh003 {
/*ポラロイド風*/
width: 300px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}




  • 全体に影
2017072409

このように画像の全体に影を入れるソースです。

<div class=”sh002″><img src=”ファイル名.jpg” ></div>

 

.sh004
{
/*全体に影*/
width: 300px;
height:225px;
-webkit-box-shadow: 0px 2px 68px -5px rgba(0,0,0,0.73);
-moz-box-shadow: 0px 2px 68px -5px rgba(0,0,0,0.73);
box-shadow: 0px 2px 68px -5px rgba(0,0,0,0.73);

}




  • ラインで囲う
2017072410

このように画像をラインで囲う感じ。

<div class=”sh005″><img src=”ファイル名.jpg” ></div>

 

.sh005{
/*囲ってる感じ*/
margin:2em 0;
position: relative;
padding: 0.5em 1.5em;
border-top: solid 2px black;
border-bottom: solid 2px black;
width: 400px;
}
.sh005:before, .sh005:after{
content: ”;
position: absolute;
top: -10px;
width: 2px;
height: -webkit-calc(100% + 20px);
height: calc(100% + 20px);
background-color: black;
}
.sh005:before {left: 10px;}
.sh005:after {right: 10px;}
.sh005 p {
margin: 0;
padding: 0;
}




  • 上にタイトルをいれる。
2017072406

このように画像の上にタイトルを入れれます。

<div class=”sh006″><img src=”ファイル名.jpg” ></div>

 

.sh006{
/*タイトル入れれるよ*/
border: 1px solid #999999;
border-radius: 5px;
position: relative;

width: 306px;
height: 250px;
}
.sh006:before{
background-color: #eeeeee;
border-radius: 5px 5px 0px 0px;
color: #666666;
content: ‘TITLEつけれます’;
height: 25px;
padding: 0px 0px 10px 10px;
position: absolute;
top: 0;
left: 0;
right: 0;

}

iwannatop-bottom  

今日も押してくれてありがとう


↓ここにもたくさんダックスいるよ。↓

にほんブログ村 犬ブログ ミニチュアダックスフンドへ
にほんブログ村


関連記事

関連記事がありません。