画像を使わずドロップ&シャドウ
CSSの気になるコネタって角丸とドロップ&シャドウとドロップダウンメニューかな?
この手のTipsはみつけたらとりあえずブックマークしています。
今日もdel.icio.us経由でドロップ&シャドウについてのページをみつけました。
(関係ないですがこのサイトAdsenseとの融和具合がスゴイ!)
3色のグレーの濃淡の背景色を2pxづつずらしてグラデーションっぽく見せるやり方です。
画像を用意しなくてもいいことと、サイズの指定がないことで使い回ししやすい方法だと思います。
ただし致命的な欠点が…
背景色が白以外はちょっと不自然な感じになってしまうのです。
やっぱり画像なしでドロップ&シャドウ効果を出すには限界があるのかも…
上に挙げた方法って前にどっかで見た覚えがあります。
探したら似た方法がありました!
background-color method(背景色メソッド)ということで1番最初に紹介されています。
画像を使う方法1
2番目に紹介されている方法alpha channel method(透過画像メソッド)は2枚のグレーの濃淡の画像を使ってドロップ&シャドウ効果を出しています。
透過画像なのでどんな背景色でも使える方法です。
2枚の画像を用意しなければなりませんが同じHTMLコードで実現できるなら使い回しのきくこちらの方法がよりベターな気がします。
画像を使う方法2
最後に紹介されている方法image stretching method(画像拡大メソッド)は1枚のグラデーション透過PNGをサイズに合わせて引き延ばす方法です。
こちらも透過画像なのでどんな背景色でも使える方法です。
上の方法は2色の濃淡だけで影っぽく見せるので不自然な感じがしなくもないですがこちらはグラデーション画像を使っているのでより自然なドロップ&シャドウ効果がでています。
ただしこちらもちょっとした欠点が…
Operaでみたらえらいことになってました。
簡単で使い回しができて、あらゆる環境で思い通りの動作が望める方法ってなかなか難しいですね。
画像のサイズが決まっている場合はこんなに悩む必要もないんですけどね…
こんにちは、lomoさん。
># CSS drop shadow
>背景色が白以外はちょっと不自然な感じになってしまうのです。
影色指定を背景色に向けて変化させればいいのでは？
背景に画像等使ってない場合は、一番軽い処理になると思いますが。
＞oscarさん
おはようございます :-)
ゴメンナサイ!!
意味がよく理解できませんでした。
影の背景色をグレーの濃淡にするのではなく、例えば上の例ならグリーンの濃淡を指定するということですか?
(#496100と#7AA300とか)
それともグレーの濃淡の順序を逆に指定するということですか?
違ってたらごめんなさい。
背景色やサイズを限定することなく1つのCSSで効果を出すということを考えていたのですがなにか勘違いしてたらお恥ずかしい限りです。
言葉足りないの、私の方ですね。
背景色は普通サイト内で共通なことが多いので、
背景色が#99FF99だとしたら、一番濃い影を#333333に、その後#557755・#77BB77という風にすれば良いじゃないのと思っただけです。
確かにこの方法だと、背景色は限定されちゃいますね。
細かいことですけど、drop shadowは「影を落とす」という連語なので「＆」はいらないと思います。
＞oscarさん
すいません!
わかりましたっ!!
今回は使い回しのきくやり方はなんだろう??って考えてみたのでやっぱり画像を使うしかないのかなって結論に達してしまいました。
背景色を決め打ちするならもちろん画像じゃない方が軽いですねー
＞okelaさん
ご指摘いただくまでずっと&をつけてました。
ドラッグ&ドロップとごっちゃになったんでしょうか…
勘違いがわかってよかったです。
コメントありがとうございました!
ドロップシャドウを
ダウンロードしたい
のですが、
ダウンロードの所
が見つかりません>ｍ<
すぐダウンロード
出来るように
サイトを貼っていただきたいのですが…
＞あっしゅさん
ドロップシャドウの手法についての記事を紹介しただけで特になにかをダウンロードできるようにしていないです。ごめんなさい。
紹介元は海外の記事ですがソースを見るのには困らないはずです。確認してみてください。