CSS Zen Garden のデザインが
久々に増えてました。
私はこのCSS Zen Garden のデザインを見るのが個人的に好きで、ちょくちょく見てるんですが、今回のデザインは全て綺麗でうっとりしました。
特に私が衝撃を受けたのは、
http://www.csszengarden.com/?cssfile=/212/212.css&page=0
のデザインです。
文房具大好きなので、このデザインを見て真っ先にノートをイメージしました。しかし、それ以上に凄いインスピレーションが湧いてきました。
他のデザインに比べて、とてもシンプルなロゴや素材などで構成されているとは思うのですが、それでもこんなに魅力的なデザインになるんだと、なぜか嬉しく思います。
2008年04月24日
2008年04月03日
bodyの背景画像固定って…。
背景の固定（background-attachment)
って、ＩＥでは上手く固定できないので、
どうかと思ってたんですが、
実はBodyタグには使用できたんですね…。
OPERAなどのブラウザだけで、背景の固定をしようと、たまたまBody要素に背景をfixed指定で設置して、ＩＥでも確認してみたら、背景が固定されててビックリ・・・。
不安に思って本などで調べてみたら、IEでは段落やDivなどで背景を固定する事が出来ないとやっぱり書かれていたんですよ。
でもね…
IEではbodyタグで背景を固定する事は出来ないとは、一言も書かれていないんですよ（笑）
全くややこしい書き方しよって・・・。
しかし、bodyに固定したい背景を設置すると、その背景画像の上にボックスなり段落なりを重ねる事が出来ない為、デザイン的な制約が生まれてしまいます。
（bodyの背景画像は一番下にある為、上にあるボックスや段落の背景色や画像に消されてしまう）
それでも、一つの間違った思い込みを理解できて良かったです。これもきっと使い方次第なんでしょうね。
どうしても背景固定させたい部分がある方は、bodyタグにbackground-attachmentのスタイルをつけてみてはいかがでしょうか？
って事で、とりあえずこのブログの右下に私の大好きな白虎の画像を固定配置してみました。まあこれはおまけって事で・・・。
って、ＩＥでは上手く固定できないので、
どうかと思ってたんですが、
実はBodyタグには使用できたんですね…。
OPERAなどのブラウザだけで、背景の固定をしようと、たまたまBody要素に背景をfixed指定で設置して、ＩＥでも確認してみたら、背景が固定されててビックリ・・・。
不安に思って本などで調べてみたら、IEでは段落やDivなどで背景を固定する事が出来ないとやっぱり書かれていたんですよ。
でもね…
IEではbodyタグで背景を固定する事は出来ないとは、一言も書かれていないんですよ（笑）
全くややこしい書き方しよって・・・。
しかし、bodyに固定したい背景を設置すると、その背景画像の上にボックスなり段落なりを重ねる事が出来ない為、デザイン的な制約が生まれてしまいます。
（bodyの背景画像は一番下にある為、上にあるボックスや段落の背景色や画像に消されてしまう）
それでも、一つの間違った思い込みを理解できて良かったです。これもきっと使い方次第なんでしょうね。
どうしても背景固定させたい部分がある方は、bodyタグにbackground-attachmentのスタイルをつけてみてはいかがでしょうか？
って事で、とりあえずこのブログの右下に私の大好きな白虎の画像を固定配置してみました。まあこれはおまけって事で・・・。
2007年07月24日
ささやかな自己満足。
実はビリヤード小林のホームページを
作っている自分ですが、ビリヤード小林に
所属するあるプロ選手から、ホームページの
リニューアルの時期にある要請を受けました。
俺システムをもし出来たら作って欲しいというもので、写真の手玉にマウスポインターを載せると、密かなメッセージが公開されるみたいな事は出来たら面白いねっ！なんて興味深い話を頂いた。
そこで考えたのは、手玉の画像にJavascript で マウスオーバーさせると言う発想だった。そうして、第一作目が完成したのだが、なんだか凄くインパクトが薄くなった。手玉の周辺にだけ文字が浮かび、なんとも不自然なものになってしまったのだ・・・。
そこで考えた･･･そして、画像そのものを入れ替える作戦に出た。
大きな文字でメッセージを加え、ロールオーバーで写真を完全に入れ替える物ができたんですが、、完成したらしたで、今度はもっとわがままになって、文字を写真から浮いた感じに仕上げたいと考え始めた。そこで思いついたのが、画像を少し大きめのdiv ボックスで囲み、スタイルシートのabsolute を使って写真の位置を固定しつつも、背景と同じ色の枠を画像に加える事で、自然な配置が出来上がった。
そこまで来ると、もうマウスオーバーなんか使わず、ＣＳＳだけで出来るんじゃないかと思い始め、追求し始めた。
そして、この効果が出来上がった。
http://kobayashi.silver-dice.com/content/pro.html#ore
凄く画期的だったのは、a:hover で width や height の枠を広げる事が出来るという事が解った事で、リンクは手玉の画像のみに貼ってあるんですが、マウスが手玉のリンクに乗ると、hover 効果で横幅と縦幅が広がり、写真が完全に入れ替わると言うもの・・・。
うーん・・・うまく表現できない・・・。
Javascript を使えば、簡単に出来ることなんだろうけど、あえて追求した事で、新たなＣＳＳの可能性が見えた。
ただ、問題点がいくつかある・・・。
一つは、hover 効果を使うために、手玉の画像にリンクを貼らなくてはならないという事・・・。
この画像については、リンク先を画像の入っているdiv ボックスのid にしてごまかしたけど、リンクを画像に貼らないでこの効果を作れるかというと、正直微妙・・・。
もう一つは、ＩＥでは最初に画像を読み込むのに、若干時間がかかる為、すこしイラっとすることと、OPERAブラウザでは、最初の一回はhover 効果による横幅と縦幅の広がりが行われない事だと思います。
いや、きっともっと問題沢山あるんだろうけど、現段階ではわかってないです。
だけど、ここからどんどん発展させる事はできると思いました。これは多分スタートラインなんだと思ってます。
これを発展させた形で、びり？ビリオフ会♪の公式サイトで面白い物を試しに作って見ました。
http://b-off.silver-dice.com/
更新履歴の左側にあるアイコンにポインターが乗ると、画像の横幅が広がって、文章が現れるというもの。
しょぼいけど、少しだけ使い方がマシになったと思う（笑）
もう少し研究したら、もっと使える技術になるかもしれないと、個人的にいろいろためしております。
でも、やっぱり Javascript を使った方が早いのかな･･･いや、javascript をオフにしている人をビックリさせることが、この技術を磨く事で可能になるに違いない・・・。
以上、自己満足でした。
作っている自分ですが、ビリヤード小林に
所属するあるプロ選手から、ホームページの
リニューアルの時期にある要請を受けました。
俺システムをもし出来たら作って欲しいというもので、写真の手玉にマウスポインターを載せると、密かなメッセージが公開されるみたいな事は出来たら面白いねっ！なんて興味深い話を頂いた。
そこで考えたのは、手玉の画像にJavascript で マウスオーバーさせると言う発想だった。そうして、第一作目が完成したのだが、なんだか凄くインパクトが薄くなった。手玉の周辺にだけ文字が浮かび、なんとも不自然なものになってしまったのだ・・・。
そこで考えた･･･そして、画像そのものを入れ替える作戦に出た。
大きな文字でメッセージを加え、ロールオーバーで写真を完全に入れ替える物ができたんですが、、完成したらしたで、今度はもっとわがままになって、文字を写真から浮いた感じに仕上げたいと考え始めた。そこで思いついたのが、画像を少し大きめのdiv ボックスで囲み、スタイルシートのabsolute を使って写真の位置を固定しつつも、背景と同じ色の枠を画像に加える事で、自然な配置が出来上がった。
そこまで来ると、もうマウスオーバーなんか使わず、ＣＳＳだけで出来るんじゃないかと思い始め、追求し始めた。
そして、この効果が出来上がった。
http://kobayashi.silver-dice.com/content/pro.html#ore
凄く画期的だったのは、a:hover で width や height の枠を広げる事が出来るという事が解った事で、リンクは手玉の画像のみに貼ってあるんですが、マウスが手玉のリンクに乗ると、hover 効果で横幅と縦幅が広がり、写真が完全に入れ替わると言うもの・・・。
うーん・・・うまく表現できない・・・。
Javascript を使えば、簡単に出来ることなんだろうけど、あえて追求した事で、新たなＣＳＳの可能性が見えた。
ただ、問題点がいくつかある・・・。
一つは、hover 効果を使うために、手玉の画像にリンクを貼らなくてはならないという事・・・。
この画像については、リンク先を画像の入っているdiv ボックスのid にしてごまかしたけど、リンクを画像に貼らないでこの効果を作れるかというと、正直微妙・・・。
もう一つは、ＩＥでは最初に画像を読み込むのに、若干時間がかかる為、すこしイラっとすることと、OPERAブラウザでは、最初の一回はhover 効果による横幅と縦幅の広がりが行われない事だと思います。
いや、きっともっと問題沢山あるんだろうけど、現段階ではわかってないです。
だけど、ここからどんどん発展させる事はできると思いました。これは多分スタートラインなんだと思ってます。
これを発展させた形で、びり？ビリオフ会♪の公式サイトで面白い物を試しに作って見ました。
http://b-off.silver-dice.com/
更新履歴の左側にあるアイコンにポインターが乗ると、画像の横幅が広がって、文章が現れるというもの。
しょぼいけど、少しだけ使い方がマシになったと思う（笑）
もう少し研究したら、もっと使える技術になるかもしれないと、個人的にいろいろためしております。
でも、やっぱり Javascript を使った方が早いのかな･･･いや、javascript をオフにしている人をビックリさせることが、この技術を磨く事で可能になるに違いない・・・。
以上、自己満足でした。
