CSS3だけでアコーディオンメニューをつくる
アコーディオンメニューというと、jQueryなどのajax(javaScript)を使って実装しますが、今回はCSS3のTransitionを使ってアコーディオンの動きを実現させてみます。
CSSだけで実装できますので、ソース的にも軽量で開発者にとってはリソースも軽減できていい事ずくめッスね。
ニュィーンとのびるメニューをCSSで実装
"CSS"に関連する記事
CSSのアレとか
晒すシリーズ。IE6でクラスが読まれない！事件
好評かどうか分からんですけど、晒すシリーズ。の２回目です。初心者のかたへ、こんなWEB屋さんになっちゃダメよ。
いつものように、うちの新人くんがコーディングして、各ブラウザでブラウズのデバック作業に入ります。
しかしそこはWEBの世界。そんなに甘くはないのです！案の定、泣きついてきましたね。
「すみませ〜ん。なんかIEで表示がおかしいんですぅ。」と、別に可愛くないが、本人は精一杯甘えた声を出してきてるんですよ。
「あぁ？なんや？おかしいって、どうおかしいんや？んなもんで分かるか！」と心で思いながら、「どれ・・・」と、一応確認する。
Continue Reading »
appleみたいなドロップダウンメニュー【CSS3】
WebbappersにMac-like Multi-level Dropdown Menu with CSS3という記事がポストされていましたので、ちょっとだけ紹介します。
簡単に言うと、CSS3を使ってappleみたいなカッチョイイドロップダウンメニューをつくちゃおうぜ！ってことです。
CSS3には、ものすごーーーーく期待しているので、ドンドン広がっていって欲しいですね。
CSS3でドロップダウンメニュー
ちょっと待て！Floatの解除がおかしいぞ！
ウチの新人にページをつくらせた時に、ボクがいった言葉です。
どういった状況かというと、いっちょまえにfloatを使って２カラムのページをコーディングしていたんですね。
心の中で「ほほー」と思っていたんですが、floatの最後にdivが入っている。div？ DIV?
「ちょっと待て！お前Floatの解除おかしいぞ？」となったわけです。
Continue Reading »
IEでもCSS3の擬似セレクタを適応させてみよう
前回の記事で「IEでも透過pngやmin_heightとかモダンブラウザみたいにやってみよう」を書きましたが、
今回は、もう少し突っ込んでIEでもCSS3の擬似セレクタを適応させるjavascriptライブラリの「
ie-css3.js (v0.9.4b)」を紹介。
Continue Reading »
ＣＳＳ３の-transitionでボックスを拡大回転させてみる。ただし、safari・chrome専用
CSS3のtransitionを使って、面白いことをやってみます。
ちょっと説明が難しいのですが、ちょっとしたサブメニューやクリックしてもらいたいボックス要素があるとします。
何気なくオンマウスしたときに、ボックス要素が拡大回転しながら背景色が変わっていくテクニックで、ちょっとしたサプライズ的に使えます。
残念なのはfirefox3.5では動作しませんでしたが、将来的に対応するみたいです。IEは当然ダメダメです。
メチャめちゃクールなCSSで書かれた時計
PHPSPOT開発日誌さんに「CSSのrotationを使った時計「CSS Clock」」という記事がポストされました。
これがなんとも！メチャめちゃかっちょいい！このまま壁にかけてもクール！な時計です。
プロダクトとしても秀逸。これがCSSだなんて・・・なんてすてきな未来なんでしょう・・。
IEでも角丸と影をCSS3で表現したい！しかも簡単に！
CSS3で角丸とかドロップシャドウなどの表現がラクチンになったんですが、
プロの現場ではそうでもなかったりします。
IEはCSS3をほとんど（まったく？）受け付けません。もうね、意地になっているんじゃないか？と思うほど。
そんなIEに角丸とドロップシャドウを適応させるCSSテクニックを紹介します。
Continue Reading »