ドロップシャドウの画像分割について
質問させて頂きます。
中のコンテンツによってサイズが変わらないボックスに、ドロップシャドウをつける場合
1:一枚の背景
2:「上部、縦シャドウ(繰り返し)、下部」(または横)と分化する
3:CSSのみでドロップシャドウを表示する
という選択肢があるとおもいますが、3は実際のサイトでは見たことがなく
さまざまなサイトでボックスの「背景を表示」してみると1と2が混在していました。
ボックスのサイズが変わるのであれば、画像を分割する必要があると思いますが
画像の転送量を減らすほかに、メリットやデメリットがあるのでしょうか?
また、CSSのみで表示することは実用に耐えられるものでしょうか?
わかり辛い質問で申し訳ありませんが、助言を頂ければ幸いです。
No.1
- 回答日時:
CSSでのドロップシャドウは、ブラウザごとに対応が異なり、特に古いバージョンのIEに対応させることが面倒だった為に画像を作成して配置するほうが簡単だったのが理由だったのではないでしょうか。
No.2ベストアンサー
- 回答日時:
3.についてはCSS3からの実装なので、
IE系ではほとんど再現されません。
ブラウザシェアで、まだIE6/7/8を使用している方は多いので、
企業向けサイトを作ってる身なので、これらを無視することはまだむずかしいです。
残る1と2ですが、
自分は殆どの場合2を使います。
中のコンテンツに寄ってサイズが変わらないボックスといっても
ブラウザによっては添付画像くらいサイズが変わるものなので、
画像の高さが絶対に足りることはありえないと思っているので…
(添付画像は上:Firefoxの標準の文字サイズ、
下:Firefoxの文字サイズ変更で可能な限り文字サイズを上げてみたもの)
画像まで添付して頂いて、非常にわかりやすかったです。
諸事情によりIEをメインとしたページなので、2番で作ろうと思います
ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- フリーソフト アイコンとして保存アプリが不調 2 2022/04/16 06:39
- その他(動画サービス) VLCメディアプレーヤーについて 1 2022/11/29 14:19
- HTML・CSS HTMLのフォームについてお尋ねします 1 2022/12/03 21:47
- ホームページ作成・プログラミング グリッドレイアウトHTMLとCSS 1 2023/02/22 02:36
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- その他(プログラミング・Web制作) このWEB用語、WEB文章、意味が分かりますか? 理解できない人が多いようなんですが・・・ 7 2022/10/22 09:13
- Windows 10 zoomで自分の顔の背景 3 2023/06/07 22:34
- Chrome(クローム) サイトのショートカットアイコンの格納場所は? 1 2022/12/26 01:38
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
HTML電卓で1文字消す方法
-
<!DOCTYPE html>あってますか?↑
-
テーブルの行を折りたたみたい...
-
Duolingo のソースコードの名前...
-
HTML入門でもう躓いてしまった。
-
HTMLで画像をポップアップで表...
-
初心者html・CSS ウィンドウを...
-
スマホで、左右にスワイプして...
-
アコーディオンメニューが思う...
-
テーブルタグのセルの幅の一部...
-
HTMLです すいません教えてくだ...
-
フロントエンジニアで一人前と...
-
HTMLで特定の文字だけ色を変え...
-
WEBページを強制的に横画面で見...
-
、URL化させるにはどうしたらい...
-
CSSについて教えてください。 ...
-
CSS、Bootstrapについて contai...
-
コードを書いて下さい( ; ; )...
-
htmlで<form>~</form>を並べて...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルのセルデータを自動改...
-
goo は、放置?
-
htmlソース文の 各行 改行位置...
-
1つの「ホームページビルダー2...
-
HPレイアウトが同じページのヘ...
-
CSS、Bootstrapについて contai...
-
CSSについて教えてください。 ...
-
静止画画像をクリックすると音...
-
、URL化させるにはどうしたらい...
-
テーブルの行を折りたたみたい...
-
css初心者 フレックスボックス...
-
WEBページを強制的に横画面で見...
-
Webページのリンクの貼り方を教...
-
Duolingo のソースコードの名前...
-
メモ帳の段落の揃え方
-
スマホ(android)のタッチパネ...
-
コードを書いて下さい( ; ; )...
-
HTMLで画像をポップアップで表...
-
角丸画像の背景色を透明にした...
おすすめ情報