[CSS]チェックボックスを使ってできるちょっと面白いテクニックのまとめ

コンテンツスライダー、画像拡大、ツリー型メニューなど、チェックボックスを使ってできるちょっと面白いテクニックをまとめたスライドを紹介します。

サイトのキャプチャ

Checkboxes and the ridiculous things you can do with them

上記のスライドでは、チェックボックスを使ったさまざまなテクニックがまとめられています。
1ページ目のチェックをオンにすると、ロケット発射から始まります。

サイトのキャプチャ

スライドから面白そうなテクニックをいくつかピックアップしました。

チェックボックスを使ったフック

まずは、ベースとなるチェックボックスを使ったイベントのフックの使い方です。
チェックボックスをオンにすると、テキストのスタイルが変わります。

サイトのキャプチャ

スライド:2

仕組みは下記のスタイルシートをベースに、チェックの有無でスタイルを定義します。

CSS

// オフ時
input[type="checkbox"] ~ div {
	// オフ時のスタイル
}

// オン時
input[type="checkbox"]:checked ~ div {
	// オン時のスタイル
}

チェックボックスの美しくスタイル

フックはちょっとだけ離れて、チェックボックスの美しいスタイル例です。

サイトのキャプチャ

CSS3 Checkbox Styles

チェックボックスを使ったツリー型のメニュー

チェックボックスをフックにし、オン・オフでツリーの開閉を判定するツリー型のメニューです。

サイトのキャプチャ

Pure CSS collapsible tree menu

CSS

li input:checked + ol{
	background: url(toggle-small.png) 40px 5px no-repeat;
	margin: -1.25em 0 0 -44px; /* 20px */
	padding: 1.563em 0 0 80px;
	height: auto;
}
li input:checked + ol > li{
	display: block; margin: 0 0 0.125em;
}
li input:checked + ol > li:last-child{
	margin: 0 0 0.063em;
}

チェックボックスを使った画像の拡大表示

チェックボックスを使って、画像を拡大表示するLightbox風エフェクトを実装します。

サイトのキャプチャ

Futurebox, lightbox without the javascript and target pseudo-class

CSS

ul li input{
	display: none;
}
ul li input:checked + .overlay{
	display: table;
}

チェックボックスを使ったレスポンシブ対応のスライダー

チェックボックスをフックにして、レスポンシブ対応のスライダーです。

サイトのキャプチャ

Responsive CSS3 Slider Without Javascript

CSS

#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }

スライダーは以前、当サイトでも取り上げました。

top of page

©2017 coliss