ＣＳＳで角丸・・・ではなく角斜

Mozilla独自拡張の角丸「-moz-border-radius」と多重ボーダー「-moz-border-top（など）-colors」を同時に使うことで「角丸にならずに角斜になってしまうバグ」を逆手に取る技。技というかまあバグでしかないんだけど。pre要素のスタイル確認の為にまあついでに書いておくよ。

-moz-border-radius-topright:10px;
border:solid 3px #666;
-moz-border-top-colors:#000 #999 #f00;/*指定したborder-widthの分を指定*/
-moz-border-right-colors:#000 #999 #f00;/*指定したborder-widthの分を指定*/

これを応用して

定義リストとか: 定義リストとかにドロッップシャドー的なものを入れてみたり
定義リストとか: 定義リストとかにドロッップシャドー的なものを入れてみたり

borderの両側に薄い影入れて上質な感じ（謎）を醸し出したり

はみ出す背景色を敢えてデザインと言い張ったり

また、こんな感じにＤＴＰではお馴染みの「立体物のプレートにずらしカゲ」みたいなものも激しくブロック要素を多様せずとも１つのブロック要素へのスタイル指定のみで驚くほどシンプルに！さあ、あなたも無駄なdivからdiveして清清しい春を迎えてみませんか？費用はすべてジャパネッツタカダがご負担いたｓ

そんな感じで。他ブラでも、近い将来こういうことが普通にできるようになれば面白いなと思うんだが、どうでもいいな。というか極惡ＣＳＳの類だな、これも。

但し、やりすぎるとページが激しく重くなるので（既にこのページも重いと思うが）ほどほどにしておくのが大人というものです。オレのようにバカノイッチョオボエよろしくやりまくるとほんとバカみたいに見えますんで。ご用心ご用心。

書いた人：l-_-l
このページのURL：http://ima.pandach.com /cgi-bin/mt/2007/03/post_98.php

« 200 »