【CSS】ブログの画像に影をつける & 色を変える方法(#box-shadow)

CSS】ブログの画像に影をつける & 色を変える方法(#box-shadow) Webデザイン&CSS

このページではWebサイトやブログのページ内の画像に影をつける & 色を変えるCSSの設定方法を解説します。

画像に影をつけることで、例えば背景が白い画像でも見えにくくならずに表示することができます。

画像に影を付ける方法

画像に影を付ける方法は、CSSで「box-shadow」プロパティを指定することで実現します。影を左右・上下にずらす幅や、ぼかしや影の広がりの幅を設定することができます。

【CSS】ブログの画像に影をつける & 色を変える方法|まとめ
/* CSSの記述 */
.wp-block-image img{
	box-shadow: 0px 5px 15px 0px rgba(10, 0, 0, 0.3);
}

影なしと影ありを比較してみます。

■影なし

■影あり

このように影を付けることで画像の存在感を出すことができます。

box-shadowの値を変更したサンプル

次は「box-shadow」プロパティの設定値を変えたサンプルを参考としてアップします。

影の左右をずらしたパターン

一つ目の値を変えて左右をずらしています、+20pxなので右に20pxずれています。

#css_sample_003{
	box-shadow: 20px 0px 10px 10px rgba(10, 0, 0, 0.3);
}

影の上下をずらしたパターン

#css_sample_004{
	box-shadow: 0px -10px 10px 10px rgba(10, 0, 0, 0.3);
}

二つ目の値を変えて上下をずらしています、-10pxなので上に10pxずれています。

影のぼかしを強くしたパターン

#css_sample_005{
	box-shadow: 0px 0px 30px 10px rgba(10, 0, 0, 0.3);
}

三つ目の値で影のぼかしを変更しています、30pxを指定することでさっきよりぼかしが強く出ています。

影のぼかしを弱くしたパターン

#css_sample_006{
	box-shadow: 0px 0px 0px 10px rgba(10, 0, 0, 0.3);
}

同じく影のぼかしを変更したパターンです、0pxに指定することで影をぼかさず、枠のように表示することができます。

影の幅を変えたパターン

四つ目の値で影の幅を変更しています、20pxに指定したことでさっきより枠が太くなっています。

#css_sample_008{
	box-shadow: 0px 0px 0px 20px rgba(10, 0, 0, 0.3);
}

色を変えたパターン

#css_sample_007{
	box-shadow: 0px 0px 10px 10px #ff1493;
}

五つ目の値で色を指定できます、rgbでも指定できますが、このようにカラーコードで指定することもできます。

以上が画像に影をつける&色を変える方法と、box-shadowの各設定値を変更したサンプルについての解説でした。

タイトルとURLをコピーしました