jQuery 簡単！チェックボックスやラジオボタンを装飾する方法（プラグイン不要） | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【簡単！チェックボックスやラジオボタンを装飾する方法】です。プラグインを使用しても良いのですが、ここでは設定の手間や容量が気になるので使用しません。実装方法はとても簡単ですのでぜひお試しください。 発展編 20. チェックボックスのデザイン 画像の準備 まずはチェックボックスに使用する画像を準備します。チェック時を上、非チェック時を下と垂直に並べます。基本は画像ボタンの作り方と同様です。 基本設定 – 背景画像へ設置 画像を準備したらチェックボックスを囲っているラベルに背景画像として設置します。その際基点を左上に設定し、リピートを無しにします。 HTML <label class="cbxbd"><input type="checkbox"/>Check 1</label> CSS .cbxbd{ background:url(im
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
