楽しい時間のスタイリングチェックボックスの状態-CSSチュートリアル-php.cn

楽しい時間のスタイリングチェックボックスの状態

Webデザインでは、テキストの入力ボックス、リンク、さらにはボタンのスタイルを無視する場合がありますが、チェックボックスは異なります。したがって、チェックボックスのスタイルデザインは常に新鮮さをもたらします。

チェックボックスの設計は複雑ではありませんが、単純な背景色の変更や、状態の変更を示すために境界を追加/削除することに限定する必要はありません。優れた結果は、優れたデザインスキルなしで簡単に達成できます。この記事では、いくつかの方法を示します。

基本的な知識

次の例では、チェックボックスでは基本的に3層レイアウトが採用されます。下部はチェックボックスで、上部は2つの重された要素または擬似要素です。どの要素が表示されているかに応じて、チェックボックスの選択されたステータスまたは未確認のステータスを示します。

コードでは、すべてのレイアウト（チェックボックスを含む）がグリッドを使用します。実際の状況に応じて、他の適切なレイアウトを選択できます。コードとデザインのその他の指示は、コードコメントにあります。

さらに、チェックボックスの上部に重ねられた要素にはpointer-events: none 。

それでは、最初のアプローチを見てみましょう。

方法1：背景をステータスインジケーターとして混ぜます

CSSのハイブリッドモードは、多目的な技術です。 2つ以上の要素または背景に比べて色を操作することは、予期しないシナリオで非常に役立ちます。

チェックボックスは例です。

<label for="un">国連</label>

ログイン後にコピー

入力[type =チェックボックス] ::前、
input [type = checkbox] ::後{
  ミックスブレンドモード：ハードライト;
  ポインターイベント：なし;
  /*その他のスタイル*/
}
input [type = checkbox] :: before {
  背景：緑;
  コンテンツ：「✓」;
  色：白;
  /*その他のスタイル*/
}
input [type = checkbox] ::後{
  背景：青;
  コンテンツ： '⨯';
  /*その他のスタイル*/
}
input [type = checkbox]：checked :: afted {
  ミックスブレンドモード：控えめ。
  色：透明;
}

ログイン後にコピー

この例では、チェックボックスの擬似要素をそれぞれ緑と青に設定し、それらをそれぞれ重ね合わせて、各要素のmix-blend-mode値を設定します。これは、各要素の背景がその背景色と混合されることを意味します。

hard-light値を使用しました。これは、上色が暗いか明のかどうかに基づいて、乗算またはフィルタリング効果をシミュレートします。 MDNのさまざまなハイブリッドモードを深く掘り下げることができます。

チェックボックスが選択されると、 ::afterのmix-blend-mode値が設定されてから設定unset 、異なる視覚効果が生じます。

方法2：3Dアニメーションを作成します

カラーブロックをアニメーション化するのは楽しいです。 3Dに見える方が良いでしょう。 CSSは、3D空間レンダリング要素をシミュレートできます。そのため、3Dボックスを作成して回転させて、チェックボックス状態の変更を示すことができます。


  
<i></i><i></i><i></i><i></i>


<label for="un">国連</label>

ログイン後にコピー

.c-checkbox> div {
  遷移：Transform .6S Cubic-Bezier（.8、.5、.2、1.4）;
  変換スタイル：preserve-3d;
  ポインターイベント：なし;
  /*その他のスタイル*/
}
/*フロント*/
.c-checkbox> div> i：first-child {
  背景：#ddd;
  変換：translatez（-10px）;
}
/*戻る*/
.c-checkbox> div> i：last-child {
  背景：青;
  変換：Translatez（10px）;
}
/*側*/
.c-checkbox> div> i：nth-type（2）、
.c-checkbox> div> i：nth-of-type（3）{
  変換：rotatex（90deg）rotatey（90deg）;
  位置：相対;
  高さ：20px;
  トップ：10px;
}
.c-checkbox> div> i：nth-of-type（2）{
  背景：海軍;
  右：20px;
}
.c-checkbox> div> i：nth-of-type（3）{
  背景：darkslategray;
  左：20px;
}

ログイン後にコピー

チェックボックスの後<div>要素は3Dスペースコンテナになります。どのように<code>transform-style: preserve-3d;はX、Y、Z軸に沿って配置transformます。<i></i>要素（灰色と青）には、それらの間に一定の距離があります。それらの間に挟まれた他の2つの要素が左側と右側を覆っています。上部と下部を除いて、上部と下部で覆われた段ボール箱のようなものです。

チェックボックスが選択されると、この灰色と青のボックスは反対側まで横に回転します。私はすでに<div>遷移を追加して、回転がアニメーション化されるように。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">入力：チェック済みdiv { 変換：rotatey（180deg）; }</pre><div class="contentsignin">ログイン後にコピー</div></div> <h3>方法3：丸い角を使用します</h3> <p>チェックボックスの丸い角を変更しますか？面白いことは何もありません。近くの他のチェックボックスの丸い角を変更しますか？これは少し面白いです。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><label for="un">国連</label></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">入力{ 背景：#ddd; ボーダーラジウス：20px; /*その他のスタイル*/ } 入力：not（：first-of-type）:: before { コンテンツ： ''; 変換：翻訳（-60px）; ポインターイベント：なし; } 入力：チェック済み *入力::前、入力：last-of-type：checked { ボーダーラジウス：20px; 背景：青; } 入力：checked * input：checked * input :: before { Border-Top-Left-radius：unset！falight; Border-Top-Right-Radius：Unset！重要。 } 入力：チェック::前に{ Border-Bottom-Left-radius：unset！falight; Border-Bottom-Right-Radius：Unset！重要。 } /* 2番目と最後のチェックボックスの間*/ 入力：nth-of-type（4）：checked *入力：checked { Border-Top-Left-Radius：Unset; Border-Top-Right-Radius：Unset; }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>以前にデモと対話したことがある場合、チェックボックスをクリックまたはクリックすると、独自の境界だけでなく、フロントとバックのチェックボックスの境界も変更できることに気付くでしょう。</p> <p>これで、以前の要素を選択するセレクターがなく、次の要素のみがあります。したがって、前のチェックボックスの外観を制御する方法は、チェックボックスの擬似要素を使用して、以前のチェックボックスをスタイルすることです。最初のチェックボックスを除く互いのチェックボックスは、その前のチェックボックスの上部に移動する擬似要素を取得します。</p> <p>チェックボックスA、B、およびCが1つずつ配置されているとします。 Bをクリックすると、Bの擬似要素を設定することでAの外観を変更し、Cの擬似要素を設定することでBの外観を変更し、Dの擬似エレメントを設定することでCの外観を変更できます。</p> <p> Bから始めて、次の要素セレクターがレイアウトでそれらの間で使用できる限り、B、C、およびDの擬似要素にアクセスできます。</p> <p>各チェックボックスの四隅は、選択されてチェックされていないときに最初に丸くなります。ただし、チェックボックスが選択されている場合、次のチェックボックスの上部コーナーとフロントチェックボックスの下角がまっすぐになります（丸い角を上書きして削除することにより）。</p> <h3>方法4：CSSマスクを使用します</h3> <p>トグルボタン…コードに関する限り、チェックボックスでもあります。そのため、これらのチェックボックスをトグルボタンとして設計できます。これは、CSSマスクを使用して実行できます。要するに、これは画像を使用して背景部分をフィルタリングする手法です。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div></div> <div></div></pre><div class="contentsignin">ログイン後にコピー</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.one.skin { 背景：繰り返しセンター-40px URL（ 'Photo-1584107662774-8D575E8F3550？W = 350＆Q = 100'）; } .two.skin { 背景：繰り返しセンター-110px URL（ 'Photo-1531430550463-9658d67c492d？w = 350＆q = 100'）; - マスク：ラジアルグレジエント（45px 45pxの円、RGBA（0,0,0,0）40px、RGBA（0,0,0,1）40px）; マスクイメージ：var（ - mask）; }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p> 2つのスキン（風景写真を表示）は、チェックボックスの上部にあります。上部のものは、典型的なトグルボタンのような形の<code>mask-imageを取得します。左側の透明な円で、残りは完全に色が不透明です。透明な円を通して、下の写真を見ることができ、残りのmask-imageには上部の写真が表示されます。

チェックボックスがクリックされると、透明な円が右に移動するため、円の上部に画像が表示され、残りは下部の写真を表示します。

入力：checked〜.two.skin {
   - マスク：ラジアルグレジエント（305px 45pxの円、RGBA（0,0,0,1）40px、RGBA（0,0,0,0）40px）;
  マスクイメージ：var（ -  mask）;
}

ログイン後にコピー

方法5：ボックスシャドウを使用します

最後に、最も簡単な - それが最も効果的なアプローチでもあると思います。アニメーション内の影です。

<label for="un">国連</label>

ログイン後にコピー

入力{
  遷移：Box-Shadow .3s;
  背景：Lightgrey;
  /*その他のスタイル*/
}
入力：checked { 
  Box-Shadow：挿入図0 0 0 20px青。
}

ログイン後にコピー

一部のCSSプロパティはデフォルトでアニメーション化できますが、そのうちの1つはbox-shadowです。この微妙なアニメーションは、ミニマリストのテーマに最適です。

それでおしまい！次回チェックボックスで作業するときにこれがインスピレーションを与えることを願っています。 CSSは、州の変化を示す多くの可能性を提供してくれますので、興味深いアイデアがあれば楽しんで共有してください。