creatersnest200

【少しのコードでリッチに!】CSSでシャドウをかける方法を教えてくれる記事15選


お久しぶりです、たかひろまーきゅりーです。
皆さん、勉強してますかー!?

この度はCSSで文字や画像にシャドウをかける方法を紹介していきますよ!
CSS3がなかった頃はCSSを用いてテキストにシャドーをかけることはできませんでした。
CSS3の登場により、いとも簡単にシャドウをかけることができます!!

ちょっとコツをつかめばすぐに自由自在にシャドウ効果を操れる影の魔術師になることができますよ☆
それでは見ていきましょう!

CSS3 text-shadow box-shadow の使い方


http://www.css-lecture.com/log/css3/css3-text-shadow-box-shadow.html

まずは、text-shadowとbox-shadowの基本的な設定の仕方を覚えましょう!
ぼかし具合や影の色などを設定する方法もこの記事に載っているので、
是非とも参考にしてください。

 

CSSで影を付けるbox-shadowの使い方

投稿の編集 ‹ NESTonline Blog — WordPress12
http://webnonotes.com/css/box-shadow/

こちらの記事では、box-shadowの設定の仕方を詳しく説明してくれています。
影の向きなどを設定することで、表現の幅が増えます。ぜひ参考にしてみてください!

 

[CSS]ボックスに影を付ける(ドロップシャドウ)CSS のプロパティ「box-shadow」

ウェブアンテナ
http://www.webantena.net/css/css3-box-shadow/

こちらもbox-shadowに関する記事です。

何番目の数値がどの効果をもたらすかについて詳しく書かれているので、
忘れてしまった方はここで今一度確認してみてください。

 

CSSで区切り線と文字に1pxの影をつけるとかっこいいデザインに!

【少しのコードでリッチに!】CSSでシャドウをかける方法を教えてくれる記事15選   NESTonline Blog
http://naifix.com/smart-shadow/

さあさあ、シャドウのつけ方はだんだんわかってきましたでしょうか??

覚えたてのシャドウをガンガン使ってみたい!と思っているあなた、
その心意気は素晴らしいのですが、あまりやりすぎると下品なデザインになってしまうってご存知ですか?

この記事では上品にシャドウを付ける方法を伝授してくれています。ご参考までに。

 

これだけでデザイン力アップ間違いなし!CSS3で作るBox Shadowエフェクト徹底解説

【少しのコードでリッチに!】CSSでシャドウをかける方法を教えてくれる記事15選   NESTonline Blog1
http://programmerbox.com/2013-05-29_css_box_shadow_effect/

さて、基本的なシャドウのつけ方を覚えたら、
今度は応用と行きましょう。
白い画像にシャドウをかけて立体的な紙のように見せるなど、
シャドウでできることはたくさんありますよ!

 

[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ

【少しのコードでリッチに!】CSSでシャドウをかける方法を教えてくれる記事15選   NESTonline Blog2

css3-box-shadows-effects-by-paulund.html

紙の様なエフェクトをつけるパターンは色々とありますよ!
ふんわりとまるで紙が浮いているようなエフェクトをかけることも可能です。

 

CSS3のbox-shadowを使ってデザイン性の高いシャドウをつくる場合の注意点

【少しのコードでリッチに!】CSSでシャドウをかける方法を教えてくれる記事15選   NESTonline Blog3

http://cappee.net/coding/css3/css3-box-shadow-effect

こちらも紙風にシャドウをかける方法のやり方を余すことなくお伝えしています。
シャドウの位置や量によりまったく違う印象を与えることができるんですねー!

 

【CSS】付箋紙っぽいエフェクトをつける方法

【少しのコードでリッチに!】CSSでシャドウをかける方法を教えてくれる記事15選   NESTonline Blog4
http://wordpress-design.net/archives/1325

今度は付箋っぽくみせるためのシャドウのつけ方です!

こういうのは今まで画像でしか実現し得なかったものですが、
CSS3のおかげで簡単に表現できちゃいますね♪

 

CSSでボックスの内部に影をつける方法

【少しのコードでリッチに!】CSSでシャドウをかける方法を教えてくれる記事15選   NESTonline Blog5
http://fridayeight.jp/2012/03/02/289/

今まで紹介してきたものは外側にシャドウをつけるものが多かったですが、
この記事では内側にシャドウをつける方法です。

え?内側?あんまり使い道なさそう・・・と思う方もいらっしゃるでしょうが、
意外にも内側シャドウは使いますよ!
これはデザイン的な知識ですが、ボタンなどに内側シャドウを薄く入れることで押したくなるボタンに仕上がります。

 

CSS:text-shadowを使用し、文字に影や縁取りをする

【少しのコードでリッチに!】CSSでシャドウをかける方法を教えてくれる記事15選   NESTonline Blog6

text-shadowを使用し、文字に影や縁取りをする

テキストシャドウも紹介させていただきます!

テキストなんかもCSS3がない頃は画像として表現せざるを得なかったわけです、
しかし今ならその必要は無く、データ容量を抑えることにもなります。

 

HTML5&CSS3入門 第5回 text-shadowによるテキストの装飾

HTML5&CSS3入門 第5回 text-shadowによるテキストの装飾
http://www.adobe.com/jp/devnet/dreamweaver/articles/html5pack_css3_part5.html

テクニカルなtext-shadowのかけ方が紹介されています!
ブラウザにより見え方の説明もされているので参考にしてみてください!

 

[CSS]コピペでOK、text-shadowを使ってテキストにさまざまなスタイルを与える全23種類のスタイルシートのまとめ

【少しのコードでリッチに!】CSSでシャドウをかける方法を教えてくれる記事15選   NESTonline Blog7

css-text-shadow-comilation-by-boltaway.html

こちらでは様々なパターンのtext-shadowのかけ方が紹介されております。
まるでPhotoshopでデザインしたかのようなトリッキーな影も再現できてしまうのだから驚きです。

 

CSSでボックスシャドウを簡単に作成できるジェネレーター「Box Shadow」

【少しのコードでリッチに!】CSSでシャドウをかける方法を教えてくれる記事15選   NESTonline Blog8
http://bl6.jp/web/webservice/box-shadow-generator-css-tool/

もしあなたがオリジナルの変わった表現のシャドウを設定したい時、
いちいち、ブラウザとコーダーを行き来しながら調整するのは非常に面倒なことです。

しかしこのジェネレーターがあれば簡単に自分の思うがままのシャドウを再現できるコードを取得できますよ!

 

box-shadowジェネレーター

【少しのコードでリッチに!】CSSでシャドウをかける方法を教えてくれる記事15選   NESTonline Blog9
http://www.bad-company.jp/demos/box-shadow/

こちらもジェネレーターです。
サイト内は英語がデフォルトですが、感覚的に使えるので特に説明がなくても、
使えちゃうくらい簡単です♪

 

IE8 でも box-shadow を使う

【少しのコードでリッチに!】CSSでシャドウをかける方法を教えてくれる記事15選   NESTonline Blog10
http://qiita.com/wings1685/items/0cdee110a3d394409780

CSS3はその登場から5年程存在し続けている技術ですが、
未だに対応していないブラウザもあります。

特にIE8では-ms-をつけてもbox-shadowが反映されないので別途、
filterという表記をしなければなりません。

上記のサイトではその方法が載っているのでIE対応したい方はぜひ目を通してください。

 

IE6、IE7、IE8でもCSS3のようなドロップシャドウを実装する方法

【少しのコードでリッチに!】CSSでシャドウをかける方法を教えてくれる記事15選   NESTonline Blog11
http://html5-css3.jp/tips/ie6-ie7-ie8-css3.html

こちらもIE対応のためのコードです。
まだまだ、日本においてのIE依存は続いています。
コピペして置いておくだけで効果を発揮するのでササッと対応しちゃいましょう。

 

おわりに

いかかでしたでしょうか?今までPhotoshop上で影をつけたものをそのまま切り出していた方も、
この記事を見たらCSSで影をつけたくなってしまいたくなるのではないでしょうか?

なるべくなら画像サイズは小さいほうがいいので、CSS3を使ってどんどん軽いWebサイト制作を目指しましょう!

それでは、また会う日までSee you again!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articlephotoshopで画像ファイルを劣化させない為にすることまとめ