CSSだけ！クリックでスムーズに開閉するアコーディオンメニュー
この前「CSSだけで作る動きのあるドロップダウンメニュー｜Webpark」という記事を書きました。jQueryでしそうなことをCSSのみで作ったのですが、これはマウスを乗せたとき動くようにしたいのでhoverを使いました。 今回はクリックで開閉するということで、hoverは使えません。では何を使うのか。 ラジオボタンを使います。ある項目にチェックするとそれまでチェックされていた項目のチェックが外れる。アコーディオンメニューと仕組みが一緒です。 今回もサンプルを用意していますのでご覧ください。 IE8以下の場合「:checked」が非対応なのでうまく表示されません。しかし、CSS3セレクタはSelectivizrを使えば簡単に対応できます。使い方は「CSS3を使うにあたって知っておきたいIE対策のまとめ｜Webpark」をご参考に。 それではHTMLから紹介します。 HTML <div id
CSS3アニメーションを「:hover」だけではなく、他にも仕込んでみるチュートリアル
CSS3アニメーションはたいていの場合、ホバー時（:hover）に仕込まれるものが多いと思います。 ここでは他の疑似クラス「:active」や「:focus」などやMedia Queriesに仕込んでみるチュートリアルを紹介します。 CSS3 Transitions Without Using :hover [ad#ad-2] 下記は各ポイントを意訳したものです。 「:active」を使ってCSS3アニメーション 「:focus」を使ってCSS3アニメーション 「:checked」を使ってCSS3アニメーション 「:disabled」を使ってCSS3アニメーション 「Media Queries」を使ってCSS3アニメーション 各スタイルシートについてのメモ 「:active」を使ってCSS3アニメーション 疑似クラス「:active」をトリガーにするCSS3アニメーションは、あらゆるエレメ
CSS3だけでクリックでアニメーションさせる
CSS3だけでクリックでアニメーションさせる CSS3でアニメーションが使えるようになり「hover」と組み合わせればマウスオーバーアニメーションならJSを使わなくても余裕な感じですが、クリックでアニメーションしたいときはそれらしいセレクターがないのでできないかなと思ってましたが、頑張ればできるらしいです。 投稿日2011年12月21日 更新日2011年12月21日 クリックした要素自身をアニメーションする チェックボックスを使用して、クリックした状態でcssを切り替えることでアニメーションさせます。 動かしたい要素を「label」で囲めばチェックボックスと連動するんです。 html <input type="checkbox" id="start"> <label for="start"> <div id="box"></div> </label> css /* チェックボックスは非表示
CSSアニメーションを実行するトリガーのまとめ５＋１個
先日『CSS3のtransitionプロパティでアニメーションを試してみた』をエントリーしましたが、とりあえずは:hoverで動作するものばかりを試作していたのですが、:hover以外はどんなのがあるか？と思い、とりあえず調べてまとめてみた。 E:hover まずは前回同様:hoverから。マウスを要素に乗せることで動作します。 .demo1 div{ width:150px; height:100px; background-color:#0066cc; border:3px solid #ffffff; color:#ffffff; -webkit-border-radius: 5px; -moz-border-radius:5px; border-radius: 5px; -webkit-transition: 1s; -moz-transition: 1s; -o-transiti
CSS3 Transitionプロパティでアニメーションを実行させるパターン【ページロード／マウスオーバー／クリックアクション】｜BLACKFLAG
CSSのみでアニメーション動作を可能とするCSS3の機能Transition。 海外のサイトではもうすでにCSS3アニメーションを実装しているサイトを見かけることもちらほら。 そんなCSS3アニメーションのテクニックを紹介しているサイトは多く見かけますが、 ここではCSS3アニメーションを実行させるタイミングに関してサンプルをもとに紹介してみます。 サイト上にアニメーションを組み込む際、その動作を実行させるタイミングは —————————— ・ページロード時 ・マウスオーバー時 ・クリック時 —————————— とパターンがあると思います。 今回はこの３パターンでのCSS3 Transitionを実行させる方法のサンプル。 サンプルでは上記３つの状況で、画像が回転するアニメーションを実装させます。 ※動作環境はCSS3 Transition対応ブラウザのSafariやGoogleChro
CSS3アニメーションを利用したサンプル
CSS3アニメーションを利用したサンプル CSS Niteビギナーズ：HTML5+CSS3でCSS3アニメーションを紹介したところ、使いどころがよく分からないとの意見をたくさん頂いたので、サンプルをいくつかご紹介します。 実際の動作はサンプルページから確認できます。 sample1 ボタンにマウスをのせた際にアニメーションして背景色を切り替えます。 /*sample1*/ .sample1 a{ background:#3f8bad; text-decoration:none; padding:1em; color:white; -webkit-transition:all 400ms; -moz-transition:all 400ms; -ms-transition:all 400ms; -o-transition:all 400ms; transition:all 400ms; }
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
CSSアニメーションの基礎
今さらながらCSS Animationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011CSS animations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。 ちなみにwww.w3.orgにある仕様は「CSS Animations Module Level 3」です。これを書いている現在、こっちは2009年3月20日版が最新となっています。 基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。 2つ目のは『Mozilla Developer Network』のドキュメントです。日本語版も
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
