画像のドロップシャドウ ~ テスト

category-icon

 この辺に落ち着こうかな。

オオハシ
従来のノーマルタイプ。キャプションは画像の下に表示されます。

オオハシ
ポラロイド風。キャプションが画像のボーダー内に含まれるパターン

オオハシ
ドロップシャドウあり、ボーダーなしのパターン

オオハシ
ドロップシャドウなし、ボーダーありのパターン

オオハシ
ドロップシャドウもボーダーもなしのパターン。

 今回の試行で分かったことは、IE7のみに適用されると思っていたCSSハックが、実はOpera9.xにも有効だったこと。

*+html body div.shadow { margin-bottom: -15px; } /* just for IE7 */

 何かOpera9.27での表示がおかしいなと思ったら、このハックがOperaにも適用されていました(追記:XML宣言するとOperaにも通ってしまうみたいです)。なので、純粋にIE7のみをターゲットとしたい場合は、以下のようにすると良いらしい。

*:first-child + html div.shadow { margin-bottom: -15px; } /* just for IE7 */

 ちょっとググった感じでは、IE6とIE7とを一緒にハック対象とする方法が分からなかったんだけど、個別に書かないとダメかなぁ。

 近々、ドロップシャドウのまとめ記事を書こうかと思っています。

 

— posted by martin at 10:11 pm   commentComment [4]  pingTrackBack [0]

この記事に対するコメント・トラックバック [4件]

scrollUp1. BENIT — 2008/04/12@06:54:27

*+htmlはIE7以上とOpera9.27みたいですね。今出てるOpera9.5のベータだと効かないのと、IE8にも効いてしまうのが厄介です(--)

このサイト「
http://thomas.tanreisoftware.com/css_filters/huzzah.htmlLink 」を見る限り、さらに言えば「http://thomas.tanreisoftware.com/css_filters/star_plus_html.htmlLink 」このデモページを見る限りではこのハックはOpera9.27には効かないはずなんですが……

IE6と7のみを一括で対象と出来るハックは上記サイトを眺めても見当たらないですね。IE6と7以外を対象とするなら「html>/**/body」なんですが。


ちなみに、現時点で気にしてもしょうがないのですがIE8だと若干崩れますね。
これは「*:first-child + html」がIE8にも効くからだと思われます。

http://thomas.tanreisoftware.com/css_filters/caio.htmlLink
上記ハックで6と7対象の指定を個別に括ってやると(現時点での)IE8除けにはなるかと思いますが、むしろそれであれば通常指定にIE6,7用の指定をして、「html>/**/body」で正しい指定を上書きしてやる方がいいのかもしれません。

この間色々検証してみたのですが(http://welkin.s60.xrea.com/blog/index.php?UID=1207493829Link )、IE各種、Opera9.27と9.5、Firefox2と3でCSS解釈とハックの効きかたに癖があるっぽいので、Safariまで出てきた今、CSSハックはほんとカオスです……

Owner Comment martin Website  2008/04/12@20:09:52

 こんにちは。star_plus_html.htmlのリンクですが、確かにOpera9.27には効かないように見えますが、ソースを見るとXML宣言がないです。これに

<?xml version="1.0" encoding="UTF-8"?>

を追加するとOperaでも解釈するようですね。ややこしや~(--) IE8はベータ版なので、とりあえず無視ですね。:beforeや:afterの対応も中途半端で、まだまだです。
 BENITさんのサイト、リンクを辿っても、ページがないってXREAに怒られます。。
.htaccess絡みですかね。

3. BENIT — 2008/04/12@22:49:23

>ページがない
あー・・・国外からのアクセスを弾いてたかもしれませんf(--;
ブログの方はスパムが酷くて、.htaccessを色々弄ったもので、今となってはどんな設定したかよくわからなくなってます;
アップデートのときに見直してみます

>XML宣言
ソースが同じだからそっち方面かなとは感じてたんですが、そうかなるほど、確かにないですね

>:before
まだそこまで見てはいなかったんですが、あらまあ、中途半端なんですか。
どうせちゃんと対応をやるなら同業他社水準までは引き上げて欲しいですねぇ・・・

まあ、現時点のレベルでもほとんどのウェブサイトが壊滅しますが(笑

scrollUp4. $関羽$ — 2008/06/23@19:37:19

あ~、すごゆですね、、

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0041 sec.
prev
2024.4
next
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30