Kotak Kotak Kotak Penggayaan Masa yang menyeronokkan

Dalam reka bentuk web, kami mungkin mengabaikan gaya kotak input teks, pautan, dan juga butang, tetapi kotak semak berbeza. Oleh itu, reka bentuk gaya kotak semak sentiasa membawa kesegaran.

Walaupun reka bentuk kotak semak tidak rumit, kita tidak perlu terhad kepada perubahan warna latar belakang mudah atau menambah/mengeluarkan sempadan untuk menunjukkan perubahan keadaan. Hasil yang sangat baik dapat dicapai dengan mudah tanpa kemahiran reka bentuk yang luar biasa. Artikel ini akan menunjukkan beberapa kaedah untuk anda.

Pengetahuan asas

Dalam contoh berikut, kotak semak pada dasarnya mengamalkan susun atur tiga lapisan: Bawah adalah kotak semak dan bahagian atas adalah dua elemen superimposed atau elemen pseudo. Bergantung pada elemen mana yang dapat dilihat, ia menunjukkan status yang dipilih atau tidak terkawal kotak semak.

Dalam kod, semua susun atur (termasuk kotak semak) Gunakan grid. Anda boleh memilih susun atur yang sesuai mengikut keadaan sebenar. Lebih banyak arahan untuk kod dan reka bentuk adalah dalam komen kod.

Di samping itu, mana-mana elemen yang ditapis di bahagian atas kotak semak mempunyai pointer-events: none yang ditetapkan untuk mengelakkan menyekat pengguna daripada mengklik atau mengklik kotak semak.

Sekarang, mari kita lihat pendekatan pertama.

Kaedah 1: Campurkan latar belakang sebagai penunjuk status

Mod hibrid dalam CSS adalah teknologi serba boleh. Memanipulasi warna berbanding dua atau lebih unsur atau latar belakang sangat berguna dalam beberapa senario yang tidak dijangka.

Kotak semak adalah contoh.

 <label for="un">PBB</label>

 input [type = ceckbox] :: Sebelum,
input [type = checkbox] :: selepas {
  Mix-Blend-Mode: Hard-light;
  Pointer-events: Tiada;
  /*Lebih banyak gaya*/
}
input [type = checkbox] :: Sebelum {
  Latar Belakang: Hijau;
  Kandungan: '✓';
  Warna: Putih;
  /*Lebih banyak gaya*/
}
input [type = checkbox] :: selepas {
  Latar Belakang: Biru;
  Kandungan: '⨯';
  /*Lebih banyak gaya*/
}
input [jenis = kotak semak]: diperiksa :: selepas {
  Mix-Blend-Mode: Unset;
  warna: telus;
}

Dalam contoh ini, saya menetapkan unsur-unsur pseudo kotak semak ke hijau dan biru, masing-masing, menanamnya bersama-sama, dan menetapkan nilai mix-blend-mode untuk setiap elemen. Ini bermakna latar belakang setiap elemen dicampur dengan warna latar belakangnya.

Saya menggunakan nilai hard-light , yang meniru kesan pendaraban atau penapisan berdasarkan sama ada warna atas gelap atau ringan. Anda boleh menggali jauh ke dalam mod hibrid yang berbeza pada MDN.

Apabila kotak semak dipilih, nilai mix-blend-mode ::after pseudo-elemen ditetapkan untuk unset , menghasilkan kesan visual yang berbeza.

Kaedah 2: Buat Animasi 3D

Blok warna animasi adalah menyeronokkan. Lebih baik jika ia dibuat 3D. CSS boleh mensimulasikan elemen rendering spatial 3D. Jadi kita boleh membuat kotak 3D dan memutarnya untuk menunjukkan perubahan dalam keadaan kotak semak.

<div>
  <div>
<i></i><i></i><i></i><i></i>
</div>
</div>
<label for="un">PBB</label>

 .c-checkbox> div {
  Peralihan: Transform .6S Cubic-bezier (.8, .5, .2, 1.4);
  gaya transform: Preserve-3D;
  Pointer-events: Tiada;
  /*Lebih banyak gaya*/
}
/*depan*/
.c-checkbox> div> i: anak pertama {
  Latar Belakang: #ddd;
  Transform: TranslateZ (-10px);
}
/*kembali*/
.c-checkbox> div> i: anak terakhir {
  Latar Belakang: Biru;
  Transform: TranslateZ (10px);
}
/*sisi*/
.c-checkbox> div> i: nth-of-type (2),
.c-checkbox> div> i: nth-of-type (3) {
  Transform: Rotatex (90Deg) Rotatey (90Deg);
  Kedudukan: Relatif;
  Ketinggian: 20px;
  Atas: 10px;
}
.c-checkbox> div> i: nth-of-type (2) {
  Latar Belakang: Tentera Laut;
  Kanan: 20px;
}
.c-checkbox> div> i: nth-of-type (3) {
  Latar Belakang: DarkslateGray;
  Kiri: 20px;
}

Selepas kotak semak<div> Unsur menjadi bekas ruang 3D-selepas gaya transformasi <code>transform transform-style: preserve-3d;<i></i> Unsur -unsur (kelabu dan biru), terdapat jarak tertentu di antara mereka. Dua elemen lain diapit di antara mereka, meliputi sisi kiri dan kanan mereka. Ia seperti kotak kadbod yang ditutup dengan bahagian atas dan bawah kecuali bahagian atas dan bawah.

Apabila kotak semak dipilih, kotak kelabu dan biru ini berputar ke sisi lain. Sejak saya sudah<div> Menambah peralihan supaya putarannya animasi.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> Input: diperiksa div { Transform: Rotatey (180deg); }</pre><div class="contentsignin">Salin selepas log masuk</div></div> <h3> Kaedah 3: Gunakan sudut bulat</h3> <p> Tukar sudut bulat kotak semak? Tidak ada yang menarik. Tukar sudut bulat kotak semak lain yang berdekatan? Ini agak menarik.</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"> &lt;label for=&quot;un&quot;&gt;PBB&lt;/label&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> input { Latar Belakang: #ddd; Radius sempadan: 20px; /*Lebih banyak gaya*/ } input: tidak (: jenis pertama) :: sebelum { Kandungan: ''; Transform: Translate (-60px); Pointer-events: Tiada; } input: diperiksa * input :: sebelum ini, Input: Last-of-Type: diperiksa { Radius sempadan: 20px; Latar Belakang: Biru; } input: diperiksa * input: diperiksa * input :: sebelum { Sempadan-Top-Left-Radius: Unset! Penting; Border-top-kanan-Radius: Unset! Penting; } input: diperiksa :: sebelum { Sempadan-Bottom-Left-Radius: Unset! Penting; Sempadan-Bottom-Right-Radius: Unset! Penting; } /* Antara kotak pilihan kedua dan terakhir*/ Input: nth-of-type (4): diperiksa * input: diperiksa { sempadan-atas-kiri-radius: unset; Border-top-kanan-Radius: Unset; }</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Jika anda telah berinteraksi dengan demo sebelum ini, anda akan melihat bahawa apabila anda mengklik atau mengklik kotak semak, ia bukan sahaja boleh mengubah sempadannya sendiri, tetapi juga sempadan kotak semakan depan dan belakangnya.</p> <p> Sekarang, kami tidak mempunyai pemilih untuk memilih elemen sebelumnya, hanya elemen berikut. Oleh itu, cara kami mengawal penampilan kotak semak sebelumnya adalah dengan menggunakan pseudo-elemen kotak semak untuk gaya kotak semak sebelumnya. Kotak semak yang lain kecuali kotak semak pertama akan mendapat elemen pseudo yang dipindahkan ke bahagian atas kotak semak di hadapannya.</p> <p> Katakan kotak semak A, B, dan C disusun satu demi satu. Jika saya mengklik pada B, saya boleh menukar penampilan A dengan menetapkan pseudo-elemen B, menukar penampilan B dengan menetapkan elemen pseudo C, dan mengubah penampilan C dengan menetapkan pseudo-elemen D.</p> <p> Bermula dari B, unsur-unsur pseudo B, C, dan D boleh diakses-selagi pemilih elemen seterusnya boleh menggunakan di antara mereka dalam susun atur.</p> <p> Empat sudut setiap kotak semak pada mulanya dibulatkan apabila dipilih dan tidak terkawal. Walau bagaimanapun, jika kotak semak dipilih, sudut atas kotak semak seterusnya dan sudut bawah kotak semak depan akan menjadi lurus (dengan menimpa dan memadamkan sudut bulat mereka).</p> <h3> Kaedah 4: Gunakan topeng CSS</h3> <p> Togol butang ... Setakat kod berkenaan, mereka juga kotak semak. Oleh itu, kita boleh merancang kotak semak ini sebagai butang togol, yang boleh dilakukan menggunakan topeng CSS. Singkatnya, ini adalah teknik untuk menggunakan imej untuk menapis bahagian latar belakang mereka.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.one.skin { Latar Belakang: Pusat No-Repeat -40px URL ('Photo-1584107662774-8D575E8F3550? W = 350 &amp; q = 100'); } .two.skin { Latar Belakang: Pusat No-Repeat -110px URL ('Photo-1531430550463-9658D67C492D? W = 350 &amp; q = 100'); --Mask: Radial-Gradient (bulatan pada 45px 45px, RGBA (0,0,0,0) 40px, RGBA (0,0,0,1) 40px); Mask-imej: var (-topeng); }</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Dua kulit (menunjukkan foto landskap) terletak di bahagian atas kotak semak. Yang paling atas mendapat <code>mask-image yang berbentuk seperti butang togol biasa-di sebelah kiri adalah bulatan telus dan selebihnya adalah warna yang benar-benar legap. Melalui bulatan telus, kita dapat melihat gambar di bawah, manakala seluruh mask-image memaparkan foto di bahagian atas.

Apabila kotak semak diklik, bulatan telus bergerak ke kanan, jadi kita dapat melihat imej di bahagian atas melalui bulatan, sementara selebihnya menunjukkan foto di bahagian bawah.

 Input: diperiksa ~ .two.skin {
  --Mask: Radial-Gradient (bulatan pada 305px 45px, RGBA (0,0,0,1) 40px, RGBA (0,0,0,0) 40px);
  Mask-imej: var (-topeng);
}

Kaedah 5: Gunakan bayangan kotak

Akhirnya, mari kita lihat yang paling mudah - tetapi saya fikir ia juga pendekatan yang paling berkesan - bayang -bayang di dalam animasi.

 <label for="un">PBB</label>

 input {
  Peralihan: Box-shadow .3s;
  Latar Belakang: Lightgrey;
  /*Lebih banyak gaya*/
}
input: diperiksa { 
  box-shadow: inset 0 0 0 20px biru;
}

Sesetengah sifat CSS boleh animasi secara lalai, salah satunya ialah box-shadow . Animasi halus ini sesuai untuk tema minimalis.

Itu sahaja! Saya harap ini memberi inspirasi kepada anda pada masa depan anda bekerja di kotak pilihan. CSS memberikan kita banyak kemungkinan untuk menunjukkan perubahan di negeri -negeri, jadi bersenang -senang dan kongsi jika anda mempunyai idea yang menarik.