A CSS Block Navigation Menu | Vikiworks™ Studio
- A CSS Block Navigation Menu | Vikiworks™ Studio
短い説明文が追加されたボックスメニューの書き方です。:hover時に説明文とメニューがそれぞれ違う色にしてるのがポイントですかね。書き方自体は単純ですがメニューに説明文を追加するという発想が目から鱗のようなものが落ちるものでしたのでご紹介。
chromaSYNTHETIC Journal » Blog Archive » Flash Without Flash: Elegant Menu Fly-out
- chromaSYNTHETIC Journal » Blog Archive » Flash Without Flash: Elegant Menu Fly-out
デモページ KOHLER: Kitchen and Bath Fixtures and FaucetsのようなFlashで実装されている動きの豊かなメニューをCSS+Javascript(mootoolsというフレームワーク)で実装するテクニックが紹介されています。
ちょっと複雑ですが一味違うメニューを用意したいという時には使うのもありかなと思います。
One pixel notched corners as used by Google Analytics (Ask the CSS Guy)
- One pixel notched corners as used by Google Analytics (Ask the CSS Guy)
デモページ Google Analyticsのボックスの角をよく見たことはありますか? 実はborderの交点がある場所1pxが空白となっていたんです。あえて1px空けることで遊び心を感じさせるドット絵のゲームに出てきそうなボックスに見えてきますね。
しかもこれ画像を一切使用してないという、画像編集ソフトが苦手なデザイナーさんには嬉しいテクニックです。逆に無駄にボックス要素を入れ子にするので、マークアップが汚くなるのは耐えられないというデザイナーさんには向いてませんね。
Nuno Silva » Blog Archive » Divs instead of tables
- Nuno Silva » Blog Archive » Divs instead of tables
table要素を使わずdiv要素のみでレイアウトを書くのはcssでfloatやclearを使いこなさなければいけず大変ですので、一部のウェブ制作者の方は今もtable要素のみでレイアウトを書いていると聞きますが、divレイアウトは本当に大変だろうかという問いかけです。5つのtableレイアウトよりもdivレイアウトが優れている点を挙げた上でtableレイアウトをdivレイアウトに書き換える例を解説しています。シンプルなのでいつかはCSSでレイアウトしてみたいなと考えてる方は是非読みましょう。
ちなみにdivレイアウトが優れている5つの理由とは
となっています。あとよく言われるのはtableレイアウトだとtable内を全部読み込んでからでないと表示されないというのもありますね。ブロードバンドが普及して最近はあまり話題にならないことですが。
woork: Liquid expandable section with rounded corners using CSS
- woork: Liquid expandable section with rounded corners using CSS
- デモページ セクションのタイトルをクリックすると中身が表示されたり消えたりするといえばいいのかな。仕組みはシンプルだけどなんか言葉にしにくい。要はコンテンツをjavascriptでdisplay:blockとdisplay:noneを切り替えてるだけなんだけど。
Swedish fika » Creating a fading header
- Swedish fika » Creating a fading header
- デモページ jQueryを使ってマウスエンター時とマウスアウト時にフェードイン・フェードアウトさせる方法。親BOXに空スパンの子要素とリンクの子要素をHTML上で追加し、CSSでそれぞれ背景を設定し親ボックスのサイズに重ねる。後はjQueryでアニメーション。目新しくはあるけど、marqueeと同じで慣れるとうざい恐れ有り。
リンクのデザインに役立つ8+アルファのTips | コリス
- リンクのデザインに役立つ8+アルファのTips | コリス
- デザインというのはちょっと違うのが含まれてる気がしなくもないけどリンクを張るときに気をつけたいルールではある。