Cara Membuat Animated Checkboxes dengan CSS3

Bentuk HTML memiliki banyak elemen yang berfungsi secara berbeda. Beberapa dari mereka memberikan pilihan sementara yang lain perlu masukan dari pengguna. checkbox HTML adalah contoh yang baik dari hal ini. Checkboxes memberikan pengguna pilihan untuk memilih satu atau lebih item dari satu set alternatif hanya dengan mencentang atau menandai kotak dengan cek. Biasanya, sebuah textbox normal hanya memiliki satu desain tradisional dan membosankan.

Situs web modern merancang checkbox mereka agar terlihat lebih menarik dan menambahkan lebih banyak animasi. Berkat CSS3 hal itu mungkin untuk dilakukan. Dengan properti animasi @keyframe, Anda dapat menghidupkan desain checkbox untuk membuat mereka terlihat lebih mempesona.

Dalam tutorial hari ini, saya berbagi bagaimana Anda dapat membuat desain checkbox menakjubkan. Anda akan belajar bagaimana cara mengganti checkbox tradisional dan menambahkan beberapa CSS3 animasi. Mari kita mulai.

Demo 1: Simple Animated Checkbox

Kita akan membuat animasi checkbox sederhana menggunakan Font Awesome, bersama dengan unsur-unsur Pseudo, CSS3 transisi dan opacity.

Menyiapkan HTML

Untuk markup kita, kita akan memiliki daftar unordered standar namun kami akan mengubah informasi dan pilihan untuk setiap demo. Untuk setiap daftar, kita akan menempatkan tag checkbox bersama dengan tag label.

<ul>
<li>
        <input type="checkbox" name="manager" id="manager" />
        <label for="manager">Project Manager</label>
</li>
<li>
        <input type="checkbox" name="webdesigner" id="webdesigner" />
        <label for="webdesigner">Web Designer</label>
</li>
<li>
        <input type="checkbox" name="webdev" id="webdev" />
        <label for="webdev">Web Developer</label>
</li>
<li>
        <input type="checkbox" name="seo" id="seo" />
        <label for="seo">SEO</label>
</li>
<li>
        <input type="checkbox" name="itstaff" id="itstaff" />
        <label for="itstaff">IT Staff</label>
</li>
<li>
        <input type="checkbox" name="csr" id="csr" />
        <label for="csr">Customer Service Representative</label>
</li>
</ul>

Ini semua yang kita butuhkan untuk markup kita. Hal berikutnya yang perlu kita lakukan adalah untuk bekerja pada CSS.

Bekerja Dengan CSS

Untuk memulai, sembunyikan Checkboxes asli.

/* Hide the Ordinary Checkbox */
input[type="checkbox"] {
    display: none;
}

Selanjutnya, kita perlu mengatur beberapa gaya pada daftar dan tag label kita dengan posisi relatif dan padding. Kemudian, kita perlu menyiapkan gaya menggunakan pseudo code kita sebelum dan sesudah label kita. Untuk bagian hal ini, kita akan mengatur font checkbox Font Awesome seperti kita akan menggunakan icon.

/* Checkbox Icons */
label {
    position: relative;
    padding-left: 30px;
    font-size: 30px;
    cursor: pointer;
    color: #fff;
    padding: 16px 28px 0 0;
}
 
label:before, label:after {
    font-family: FontAwesome;
    font-size: 50px;
    /*absolutely positioned*/
    position: absolute; top: 0; left: -49px; right: 10px;
}

Sekarang kita perlu menyiapkan Ikon langkah sebelum dan setelah checkbox diklik. Daripada menggunakan tag icon melalui Font Awesome, kita akan menggunakan versi unicode dengan transisi dan opacity untuk menampilkan dan menyembunyikan ikon.

label:before {
    content: '\f096'; /*checkbox unchecked */
}
label:after {
    content: '\f00c'; /*checkbox checked*/
    max-width: 0;
    overflow: hidden;
    opacity: 0.5;
    font-size: 27px;
   top: 16px;
   left: -42px;
   color: #f2ca27;
 
-webkit-transition: all 0.50s;
    -moz-transition: all 0.50s;
    -o-transition: all 0.50s;
     transition: all 0.50s;
}

Langkah terakhir adalah untuk menetapkan target ke kotak teks dan setelah Pseudo kode checkbox dan memberikan max-lebar 25px dan opacity dari 1 untuk mengungkapkan ikon centang setelah kotak diklik.

/* Animating the Checkbox Icon */
input[type="checkbox"]:checked + label:after {
    max-width: 25px;
    opacity: 1;
    margin-right: 90px;
}

Demo 2: Lingkaran Checkbox dengan Bouncing Animasi

Dalam demo kedua ini, kita akan membuat checkbox lingkaran yang terlihat seperti tombol radio dengan animasi memantul menggunakan CSS3 bersama dengan beberapa elemen Pseudo, CSS3 transisi dan @keyframe animasi.

The Markup

markup kita adalah seperti markup dari demo pertama, tetapi kami akan mengubah beberapa teks dan label. Periksa markup bawah.

<ul>
<li>
        <input type="checkbox" name="php" id="php" />
        <label for="php">PHP</label>
</li>
<li>
        <input type="checkbox" name="js" id="js" />
        <label for="js">JavaScript</label>
</li>
<li>
        <input type="checkbox" name="ajax" id="ajax" />
        <label for="ajax">AJAX</label>
</li>
<li>
        <input type="checkbox" name="ruby" id="ruby" />
        <label for="ruby">Ruby</label>
</li>
<li>
        <input type="checkbox" name="python" id="python" />
        <label for="python">Python</label>
</li>
</ul>

Bekerja Dengan CSS

Sebelum berpindah pada CSS tentang label kita, sembunyikan checkbox asli.

/* Hide the Ordinary Checkbox */
input[type="checkbox"] {
    display:none
}

Tambahkan beberapa gaya sederhana untuk daftar unordered kita, seperti font-family, dan kemudian mengatur gaya pada elemen label dan mengatur posisi secara keseluruhan.

ul li {
    list-style:none;
    margin:10px auto;
    font-family:'Lato'
}
 
/* Checkbox Icons */
label {
    position:relative;
    padding-left:30px;
    font-size:30px;
    cursor:pointer;
    color:#fff;
    padding:17px 28px 0 0
}

Beranjak, pada gaya label sebelum dan sesudah pseudo code. Kami akan kembali menggunakan Font ikon awesome sebagai selektor check utama kami. Mengatur label sebelum pseudo code ke unicode untuk lingkaran polos tanpa lubang tersebut sambil mengatur ikon lingkaran solid untuk kita dipilih / ikon diperiksa.

Untuk animasi CSS3 kita, kami akan menentukan nama animasi @keyframe kita untuk memantul keluar dengan durasi 0,4 detik, iterasi hitungan 1 dan modus dari depan diisi memindahkan lingkaran dari ukuran besar untuk ukuran kecil sampai memudar dengan memantul efek melalui animasi @keyframe.

label:before {
    content:'\f1db'
}
label:after {
    content:'\f111';
    width:25px;
    overflow:hidden;
    font-size:27px;
    top:18px;
    left:-39px;
    color:#6CFF4C;
    -webkit-animation:bounceout .4s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-fill-mode:forwards;
 
    -moz-animation:bounceout .4s;
    -moz-animation-iteration-count:1;
    -moz-animation-fill-mode:forwards;
 
    animation:bounceout .4s;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
 
}

Sejak browser Mozilla render secara berbeda dalam hal posisi dan animasi mari kita tambahkan CSS khusus Mozilla untuk mengontrol tata letak kita pada browser Mozilla Firefox.

@-moz-document url-prefix() {
   label:after {
    content:'\f111';
    width:25px;
    overflow:hidden;
    font-size:27px;
    top:17px !important;
    left:-39px;
    color:#6CFF4C;
    -webkit-animation:bounceout .4s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-fill-mode:forwards;
 
    -moz-animation:bounceout .4s;
    -moz-animation-iteration-count:1;
    -moz-animation-fill-mode:forwards;
 
    animation:bounceout .4s;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
}
}

Sekarang mari kita bekerja dengan bounce. Di dalam input [type = “checkbox”]: check label +: setelah kami akan menargetkan hal di mana checkbox dipilih, tapi bukannya cek polos kami akan mengatur animasi bounce, yang akan bounce-in animasi kita.

/* Animating the Checkbox Icon */
input[type="checkbox"]:checked + label:after {
    -webkit-animation:bounce .4s;
    -webkit-animation-iteration-count:1
 
    -moz-animation:bounce .4s;
    -moz-animation-iteration-count:1;
 
    animation:bounce .4s;
    animation-iteration-count:1
}

Akhirnya, kita akan bekerja pada animasi @keyframe. Menggunakan transformasi properti, kita akan mengubah skala lingkaran dari berbagai ukuran dan langkah-langkah dan membuatnya terlihat seperti memantulfiturnya. Lihat kode di bawah ini. Jika Anda ingin tahu lebih banyak tentang animasi @keyframe, silakan kunjungi halaman ini untuk mempelajari lebih lanjut.

/* @Keyframes for Chrome and Safari */
@-webkit-keyframes bounce {
    0%  { -webkit-transform:scale(.8); opacity:.8}
    25% { -webkit-transform:scale(.25); opacity:.25}
    50% { -webkit-transform:scale(1.4); opacity:1.4}
    75% { -webkit-transform:scale(.8); opacity:.8}
    100%{ -webkit-transform:scale(1); opacity:1}
}
@keyframes bounce {
    0%  { transform:scale(.8); opacity:.8}
    25% { transform:scale(.25); opacity:.25}
    50% { transform:scale(1.4); opacity:1.4}
    75% { transform:scale(.8); opacity:.8}
    100%{ transform:scale(1); opacity:1}
}
@-webkit-keyframes bounceout {
    0%  { -webkit-transform:scale(0)}
    25% { -webkit-transform:scale(.8)}
    50% { -webkit-transform:scale(1.4)}
    75% { -webkit-transform:scale(.25)}
    100%{ -webkit-transform:scale(0)}
}
@keyframes bounceout {
    0%  { transform:scale(0)}
    25% { transform:scale(.8)}
    50% { transform:scale(1.4)}
    75% { transform:scale(.25)}
    100%{ transform:scale(0)}
}

Demo 3: cross Checkbox Animasi

Dalam thielast bagian dari tutorial, kita akan membuat cross checkbox animasi menggunakan CSS3 dengan beberapa elemen Pseudo dan CSS3 transisi.

The Markup

markup adalah seperti demo pertama; kita hanya mengubah pertanyaan dan pilihan data. Periksa markup dibawah.

<ul>
<li>
        <input type="checkbox" name="notepad" id="notepad" />
        <label for="notepad">Notepad</label>
</li>
<li>
        <input type="checkbox" name="sb" id="sb" />
        <label for="sb">Sublime Text</label>
</li>
<li>
        <input type="checkbox" name="notepad+" id="notepad+" />
        <label for="notepad+">Notepad++</label>
</li>
<li>
        <input type="checkbox" name="txtmate" id="txtmate" />
        <label for="txtmate">TextMate</label>
</li>
<li>
        <input type="checkbox" name="scite" id="scite" />
        <label for="scite">SciTE</label>
</li>
<li>
        <input type="checkbox" name="ke" id="ke" />
        <label for="ke">Komodo Edit</label>
</li>
</ul>

Bekerja Dengan CSS

Pertama, sembunyikan checkbox asli dan kemudian meletakkannya beberapa gaya dalam daftar item checkbox. Tidak ada yang istimewa di sini, namun kami juga akan menambahkan posisi absolut setelah setiap item menggunakan: setelah pseudo code.

input[type="checkbox"] {
    display:none
}
ul li {
    list-style:none;
    margin:10px auto;
    font-family:'Lato';
    position:relative
}
 
ul li:after {
    content:'';
    position:absolute;
    width:35px;
    height:35px;
    border:4px solid #fff;
    border-radius:6px;
    left:-12px;
    z-index:-1
}

Mari kita beralih ke label yang sebenarnya. Kami akan menetapkan label kita ke pointer kursor dan kemudian menambahkan properti CSS3 transisi pada durasi 2 detik dan nilai linear untuk fungsi waktu.

label {
    cursor:pointer;
    color:#c0392b;
    margin:5px 0;
    padding-left:40px;
    position:relative;
    font-size:30px;
    -webkit-transition:.2s linear;
    -moz-transition:.2s linear;
    -o-transition:.2s linear;
    transition:.2s linear
}

Untuk label sebelum dan sesudah pseudo code, kami akan menetapkan garis yang memiliki lebar 3px tebal untuk posisi absolut.

label:before,label:after {
    content:'';
    left:11px;
    width:3px;
    bottom:0;
    background:#fcff00;
    position:absolute;
    top:0
}

Untuk sebelum selektor kita akan memutar garis-garis ini  45 derajat dan mengubah posisi aslinya dengan 14 piksel ke kiri dan kanan. Perhatikan bahwa saya mengatur juga fungsi waktu linear pada durasi 2 detik. Untuk setelah pseudo code, kita akan set ke -45 derajat untuk membuat setiap baris saling silang.

label:before {
    transform:rotate(45deg);
    transform-origin:0 14px;
    height:0;
    -webkit-transition:.2s linear;
    -moz-transition:.2s linear;
    -o-transition:.2s linear;
    transition:.2s linear
}
 
label:after {
    transform:rotate(-45deg);
    transform-origin:0 20px;
    height:0;
    -webkit-transition:.2s linear .2s;
    -moz-transition:.2s linear .2s;
    -o-transition:.2s linear .2s;
    transition:.2s linear .2s
}

Pada langkah akhir, kita akan menargetkan checkbox bersama dengan label: setelah dan label: sebelum pseudo code dan mengatur ketinggian sampai 100 persen. Ini akan menampilkan garis cross yang telah kita buat di atas melalui bantuan properti transisi. Kami juga akan menargetkan teks label checkbox sendiri dan memberikan warna putih sementara animasi cross terjadi.

input[type="checkbox"]:checked + label:after,input[type="checkbox"]:checked + label:before {
    height:100%
}
 
input[type="checkbox"]:checked + label {
    color:#fff
}

Kesimpulan

CSS3 benar-benar kuat. Menggunakan elemen Pseudo, transisi dan animasi yang telah kita buat tiga checkbox indah yang interaktif tanpa menggunakan JavaScript. Harap perhatikan bahwa beberapa browser, terutama versi IE, belum mendukung animasi. Silakan lihat halaman ini untuk informasi lebih lanjut.

Mungkin ada lebih banyak hal yang dapat dilakukan pada CSS3 di masa depan, sehingga mengikuti tren teknologi dan terus memberikan pengalaman pengguna yang luar biasa dan desain untuk pengunjung situs Anda.

Comments

comments