角丸
2006-10-01(日) 22:52:44 -
design
上期末を無事（？）乗り切って、10月突入。
一息ついたついでに、uriblogのデザインをいじりました。
今回は、Javascriptで角を丸くするライブラリ「NiftyCorners」を使ってみました。
いちいち画像を用意したり、レイアウト複雑にしたりする必要無く、
とっても簡単に、角が丸い枠を作ることができます。
Nifty Corners Cube - freedom to round
で、角を丸くするのはいいとして、、、
相変わらず、季節感を無視した色合いになってしまいました。。。
ま、目には優しそうだし、しばらくはコレでいきます。
[2006/10/02 追記]
最近ではもっと高機能なスクリプトもいくつか出てきているようです。
Transparent custom corners and borders, version 2 | 456 Berea Street
Transcorners ? Cornerus Pride is there *scared*
一息ついたついでに、uriblogのデザインをいじりました。
今回は、Javascriptで角を丸くするライブラリ「NiftyCorners」を使ってみました。
いちいち画像を用意したり、レイアウト複雑にしたりする必要無く、
とっても簡単に、角が丸い枠を作ることができます。
Nifty Corners Cube - freedom to round
で、角を丸くするのはいいとして、、、
相変わらず、季節感を無視した色合いになってしまいました。。。
ま、目には優しそうだし、しばらくはコレでいきます。
[2006/10/02 追記]
最近ではもっと高機能なスクリプトもいくつか出てきているようです。
Transparent custom corners and borders, version 2 | 456 Berea Street
Transcorners ? Cornerus Pride is there *scared*
コメント
NIKO さん
(2006-10-02(月) 20:39:22)
僕もざっとソース眺めてみただけなんですが、
やってることはとても単純なようです。
要は、角丸の外側に、背景と同じ色で、
高さ1pxの幅を変えたブロック要素を並べてるみたい。
角丸処理をする数にもよると思いますが、
大した負荷にはならないような気がします。
ちなみに、最近ではもっと高機能なスクリプトも
出てきてるみたいなので、是非試してみて下さい〜
（本文追記にリンク記載）
やってることはとても単純なようです。
要は、角丸の外側に、背景と同じ色で、
高さ1pxの幅を変えたブロック要素を並べてるみたい。
角丸処理をする数にもよると思いますが、
大した負荷にはならないような気がします。
ちなみに、最近ではもっと高機能なスクリプトも
出てきてるみたいなので、是非試してみて下さい〜
（本文追記にリンク記載）
ケンタ さん
(2006-10-03(火) 10:49:07)
>最近ではもっと高機能なスクリプトも
出てきてるみたいなので
うはっ、英語…。
え？これってもしかしてアルファのドロップシャドウがかけられるのかな？スゲー！！ドロップシャドウは動的にかけられればいいなぁと思ってたんですよね。IEの独自機能とかじゃなくて。
出てきてるみたいなので
うはっ、英語…。
え？これってもしかしてアルファのドロップシャドウがかけられるのかな？スゲー！！ドロップシャドウは動的にかけられればいいなぁと思ってたんですよね。IEの独自機能とかじゃなくて。
NIKO さん
(2006-10-03(火) 21:53:11)
追記した1つ目のやつですね？
コレも同じような原理で角丸化してるみたいなんですが、
違うのは、アルファチャンネルを持ったPNGファイルを重畳表示する点のようです。
それで、見た目、うまいこと影のついたような枠になってくれるんですね。
ただ、IEだと肝心の影がうまく表示されないようです。
おそらく、7より前のバージョンだと、
アルファチャンネル付きのPNGに対応してないからじゃないかなぁ・・・
コレも同じような原理で角丸化してるみたいなんですが、
違うのは、アルファチャンネルを持ったPNGファイルを重畳表示する点のようです。
それで、見た目、うまいこと影のついたような枠になってくれるんですね。
ただ、IEだと肝心の影がうまく表示されないようです。
おそらく、7より前のバージョンだと、
アルファチャンネル付きのPNGに対応してないからじゃないかなぁ・・・
ケンタ さん
(2006-10-04(水) 11:10:52)
>アルファチャンネルを持ったPNGファイルを重畳表示する点のようです。
そっかPNGかぁ。ちょっと反則っぽいなぁ（笑）PNGが一般的になれば、アルファが使える分かなり楽になるんですが、今のところGIFとJPEGだけですね。動的に影をってことになるとFlashになっちゃうかも。
そっかPNGかぁ。ちょっと反則っぽいなぁ（笑）PNGが一般的になれば、アルファが使える分かなり楽になるんですが、今のところGIFとJPEGだけですね。動的に影をってことになるとFlashになっちゃうかも。
NIKO さん
(2006-10-04(水) 21:20:25)
ブラウザによってサポート状況にばらつきのあるPNGは、
デザイナ的にはまだ使いづらいんですかね。
僕なんかは普通にPNG使っちゃいます。色々と便利ですもんね。
というわけで、IEの対応の遅さにはいらついてます。笑
デザイナ的にはまだ使いづらいんですかね。
僕なんかは普通にPNG使っちゃいます。色々と便利ですもんね。
というわけで、IEの対応の遅さにはいらついてます。笑
ケンタ さん
(2006-10-06(金) 12:24:36)
>ブラウザによってサポート状況にばらつきのあるPNGは、
>デザイナ的にはまだ使いづらいんですかね。
そうなんですよ。
フルCSSはNN4等非対応ブラウザが少なくなって、使う事に抵抗はなくなってるようなんですが、pngはブラウザの対応がホント進まないですよね。
>デザイナ的にはまだ使いづらいんですかね。
そうなんですよ。
フルCSSはNN4等非対応ブラウザが少なくなって、使う事に抵抗はなくなってるようなんですが、pngはブラウザの対応がホント進まないですよね。
コメントを追加
トラックバック
トラックバックはありません
ローカルトラックバック
ローカルトラックバックはありません
RSS2.0
画像使わないんだ〜。
これってどうやってるんでしょ？
1pxづつ幅を調整して丸く見せてるのかな？
ソース見てたんですが、途中で挫折しました（笑）
処理的に軽いならかなりいいですね、これ。