CSSで画像に影をつけて見やすくする方法

画像 影 CSS

どーも、ダンゴです( ̄▽ ̄)ノ

今までずっと、Photoscapeという
無料の画像編集ソフトを使って加工していたのですが、
カスタマイズの記事などはどうしても画像が多くなるので、
「1個1個編集するのめんどくさい!」って思ってました(ノ∀`:)笑

そこで今後のことを考えて、
CSSで画像に影をつけてみることに☆

今回は、その方法をご紹介したいと思います(*^^*)

 

影で画像を見やすく!

今回は試しに、
こちらの画像に影をつけてみます☆

CSSで編集すると。。

 

CSS

↓ ↓ ↓

CSS

 

わかりますかね?(´∀`;)

微妙な変化ですが、
背景が白基調の画像などは特に、
ちょっとだけ浮き出るので見やすいかなぁと思います☆

 

CSSで影をつける手順

やり方はとっても簡単で、
まずCSSに影のデザインを記述します。

参考までに僕の場合はこんな感じ☆

場所はCSSのどこに書いてもOKです。

.shadow{
width: 300px;
-moz-box-shadow: 2px 2px 3px 3px #CCC;
-webkit-box-shadow: 2px 2px 3px 3px #CCC;
box-shadow: 2px 2px 3px 3px #a9a9a9;
background-color: #EEE;
text-align: center;
padding: 0px;
margin: 20px;
}

 

「2px 2px 3px 3px」って部分は、左から順番に

・水平方向の影の大きさ
・垂直方向の影の大きさ
・影のぼかし幅の大きさ
・影の大きさ

となっています(*^^)b

いろいろイジってみて、
ご自分のサイトに合うように編集してみてください☆

ちなみに、
すべての画像サイズに適応するような記述がわからなかったので、
とりあえず応急処置的なやり方で、widthで大きさを指定しています(^_^;)

もっといい方法をご存じの方がいらしたら、
教えていただけたらとても嬉しいですm(_ _)m

またより良いやり方を発見した際には、
追記させていただきますね☆

 

で、CSSを保存したら、

<div class="shadow">画像コード</div>

 

という風に投稿画面に書けば、
影をつけることができます\(^o^)/

細かいカスタマイズですが、
少しでも読者さんが見やすいブログになるよう、
よければ試してみてください☆

 

ちなみに、今回の記事は、
こちらのブログを参考にさせていただきました。

CSS3でドロップシャドウ(影)を付ける

とってもわかりやすく説明されているので、
僕の記事がわかりづらかったら、
こちらも見てみてくださいヾ( ̄▽ ̄)ノ

管理人プロフィール
▼名前:ダンゴ
ダンゴ プロフィール
どーも、ダンゴです。

お酒と漫画とお笑いが大好きな大学生で、現在はネットビジネスとスロットで学費と生活費を稼ぎながら、細々と暮らしてます。

数年前ブラック企業に内定し、「雇われるリスク」を肌で感じた結果、就職を放棄。

とはいえ食わねばいけないので、藁にもすがる思いでネットビジネスを始めたところ、毎月10万円以上の収入を生み出すことに成功!

知識ゼロから月収10万円を稼ぐまでの道のりをメールで紹介していますので、興味があれば登録してみてください☆

⇒10万を稼ぐ第1歩


コメントを残す

サブコンテンツ

このページの先頭へ