久々に当ブログのCSSを触るも・・・(角丸、グラデーション)

Pocket

昨日、Internet Explorer 9がようやく日本でもリリースされたので、
ここからダウンロード出来るようになりました。(Win7、Vistaのみ。XP対応しません)
というわけで、少しスマートフォン版でも触り始めているCSS3を
PC版にも取り入れていこうということで、手始めにリンクページ等で
昔作ったragnarok onlineちっくな角丸ボックスを上段、下段の
divタグ2個だけで表現してみました。1個にしろとか言うな。
・・・上ボーダーを太くグラデーションに出来れば再現できるかもだけど・・・
サンプルはこちら


要は角丸+グラデーション塗りつぶし ってことなんですが、
IE9だけまだCSSでグラデーションがかけられなかったので、
SVGで出来るのを見つけました。
上段のCSSは以下のようになりました。

.marudiv_top{
/* firefox */
background: -moz-linear-gradient(-90deg, #7575FF 0%, #6666FF 100%) repeat scroll 0 0 #6666FF;
/* chrome safari */
background: -webkit-gradient(linear, center top, center bottom, from(#7575FF), to(#6666FF));
/* IE9 chrome... */
background-image: url("/css/ie9grad.svg");
height:1.5em;
border: 1px solid #6666FF;
border-radius: 12px 12px 0 0;
}

ie9grad.svgの中に記述するコードはこちらのサイトに掲載されています。
ie9grad.svgの行はIE9のために書いたのですが、どうやらchrome11も読めるようでSVG塗りが優先されてしまいました。
Firefox4は期待通り-moz-linear-gradientで塗れていました。
過去ブラウザを無視して、ブログの記事を囲む線にもためしで
border-radiusの角丸を入れてみました。
すると、ボーダーが点線の場合Firefoxだと丸い部分だけ実線のように
みえてしまっていたり。。
とりあえずここまではよし。
我がブログの訪問者さんの大多数はIE8なので、上記の方法では四角くて真っ白なボックスが見えるだけです。
ie8はフィルターでグラデーションだけでも載せようかなとも思ったのですが、そうするとie9でも
フィルターが優先されて四角塗りになってしまったり。うーん、どうすれば。
あとIE8以下でもdivの角を丸くする方法がこちらにも載っていました。
これも実際ie8で試したところうまくいったのですが、うちのブログのデザイン上で描画すると
どうもwrapperよりも裏に描画されてしまい、一番おもてにのっているdivの見た目が変わらなかったり。
今回は、手っ取り早く、tableで組んでいたのをdivに組みなおしてリンクのページを
保存して、今日は終わりました。
見た目より中身どうにかしろってはなしですが。毎回。
このブログの訪問者さんの大多数はIE8なのですが、OSではすでに
Windows7がXPを超えていて、7組がどんどんie9に乗り換えていくと、
いい感じになりそうです。
XPがie9未対応で切られたと思えば、ie10でVistaが切られるようで、
うーん、Vistaはやっぱり無かったことにされる子だったんだな
–追記
jQueryを使ってdivの角丸を実現する方法もあるみたい。
これが一番簡単ぽいかな?

人気記事一覧

コメントを残す