画像を使わずCSSだけでアニメーションするチェックボックスを作ってみるTips : アートあいくる
DEMO こんな感じにアニメーションしてくれるチェックボックスを作ってみます。 IE9以上で動作。スマホ用として使っていけるはず…。 実装手順 input要素を非表示に 擬似要素とCSS3を使ってチェックボックスのデザインを作る 擬似要素と擬似セレクタとCSS3を使ってアニメーションさせる HTML <label> <input type="checkbox"> <span><i></i>利用規約に同意する</span> </label> 必要に応じてクラス名をつけて下さい。今回はそのまま要素名でスタイルを指定していきます。 順番に見ていきましょう。 1. input要素を非表示に label { cursor: pointer; display: inline-block; height: 44px; position: relative; } input { display: none
CSSだけで作る「多階層」なドロップダウンメニュー
以前書いた「CSSだけで作る動きのあるドロップダウンメニュー｜Webpark」という記事が検索エンジン経由でそこそこアクセスがあり、よく質問をいただきます。そのなかで多階層にできないのかという質問があったので作ってみました。 IE7の場合擬似要素が使えませんので、次の階層があることを示す矢印が表示されません。ドロップダウンの機能はIE7でも問題ありませんので、IE7に対応させる場合は矢印を画像にするなどすればよいと思います。 それではHTMLからいきます。 HTML かなり長くなるのでメニュー1の部分だけ載せています。 <ul id="dropmenu"> <li><a href="#">メニュー1</a> <ul> <li><a href="#">子メニュー</a> <ul> <li><a href="#">孫メニュー</a></li> <li><a href="#">孫メニュー</a>
CSSだけで作る「多階層」なドロップダウンメニュー
HTML <ul id="dropmenu"> <li><a href="#">メニュー1</a> <ul> <li><a href="#">サブメニュー</a> <ul> <li><a href="#">サブサブメニュー</a></li> <li><a href="#">サブサブメニュー</a> <ul> <li><a href="#">サブサブサブメニュー</a></li> <li><a href="#">サブサブサブメニュー</a></li> <li><a href="#">サブサブサブメニュー</a></li> <li><a href="#">サブサブサブメニュー</a></li> </ul> </li> <li><a href="#">サブサブメニュー</a></li> <li><a href="#">サブサブメニュー</a></li> </ul> </li> <li><a hr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
