Cara mudah membuat search box icon
Animasi cara mudah membuat search box icon.

Cara mudah membuat search box icon

Apalah arti laman web tampa search box seperti blog Insertapps. Google terkenal karena mesin pencarian, walau bentuk search box iconnya static dan tidak pernah berubah. Pertanyaannya, bagaimana cara membuat search box icon dengan html dan css tampa image, icon PNG atau SVG❓ Terus, ukuran desainnya harus fleksibel serta ada animasinya❓

Saya telah mencoba berbagai bentuk search box icon, mulai dari yang paling kere macam insert icon format .png, hingga yang paling keren, memanggil icon search format .svg.

Desain web zaman dulu icon-icon masih memakai image bitmap format gif, jpg dan PNG.

Sekarang, icon-icon pendukung web desain sudah mengimplementasikan icon .svg berformat vector. SVG singkatan dari Scalable Vector Graphics adalah format gambar vektor berbasis teks XML.

Hasil render icon format SVG sangat dinamis, bersih, tentunya bisa di zoom sampai 1000 persen tidak bakalan burik.

Kekurangan memakai icon SVG, source codenya jadi tambah panjang sekali. Dan agak rumit bila di make over dengan tambahan gerakan animasi.

Solusi paling cerdas, merekonstruksi langsung element HTML menjadi search box icon dengan cara bermain-main dengan selector CSS pseudo element.

Steps 1 - Siapkan lembaran baru dokumen HTML

Dalam area body dokumen HTML, insert dua potong code berikut:

<div class="container">

    <div class="box"></div>

</div>

Lalu save.

Steps 2 - Kode stylesheet CSS

Style css ini bersifat opsional, hanya untuk memposisikan desain search icon tepat berada di tengah-tengah layar baik mobile maupun desktop, sehingga lebih fokus.

.container {
  /* css center think */
  height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Sebelumnya, sudah ada penjelasan terkait CSS centering pada posting Super simpel CSS center container.

Sekarang code yang paling utama atau code inti dari cara membuat search box icon.

.box {
  width: 2rem;
  height: 2rem;
  display: block;
  position: relative;
  border: 1px solid salmon; /* gridline / garis bantu */
}

Tampilan sementara di browser seperti gambar berikut:

Hasil render menampilkan satu buah objek kotak. Preview di browser sudah di zoom hingga 300 persen.
Hasil render menampilkan satu buah objek kotak. Preview di browser sudah di zoom hingga 300 persen.

Steps 3 - Manipulasi bentuk icon dengan pseudo elements

Biasanya, kalau sudah sampai di bagian ini, kepala mulai mengernyit dahi. Emangnya pseudo elements itu apa sih?

Kata ‘pseudo’ berarti semu, ‘pseudo elements’ artinya elemen yang semu.

Tak ada, tapi memiliki rupa, seperti fatamorgana air ditengah teriknya matahari.

CSS pseudo ditandai dengan :: bergunakan untuk mengelola elemen HTML yang tak terlihat dari element itu sendiri.

Masih belum memahaminya juga? Lihat penjelasan vidoe berikut:

Tidak mengerti bahasa Inggris, satu lagi video penjelasan pseudo elements dari Pak Dika. Semoga paham ya.

Sebelum melanjutkan coding, point penting ‘steps 3’ harus paham dulu pseudo element. Kalau tidak, sulit bagi abang-abang untuk merekonstruksi ulang sebuah ikon search hasil manipulasi CSS itu sendiri.

Next…

Sekarang saat nya menimpa class name .box { } yang sudah ada sebelumnya dengan selector pseudo elements ::before - ::after atau element semu.

.box::before,
.box::after {
	content: '';
	position: absolute;
}

.box::before {
	/* do something */
}

.box::after {
	/* do something */
}

Element semu tersebut ditampung dalam CSS property content: ''; dengan nilai kutip ' ‘.

Kemudian, masing-masing class pseudo .box::before dan .box::after tinggal isi dengan berbagai bentuk element HTML yang diinginkan.

Untuk box before, kita akan membuat sebuah kotak sama sisi, bakal menjadi icon bulat kaca pembesar. Insert kode berikut:

.box::before {
	width: 14px;
	height: 14px;
	border: 4px solid gray;
	top: 0;
	left: 0
}

Untuk box after, sebuah kotak persegi panjang yang bakal menjadi gagang icon kaca pembesar. Insert kode berikut:

.box::after {
	width: 5px;
	height: 16px;
	background: red;
	right: 0;
	bottom: 0
}

Hasil akhir render browser dari kode tersebut seperti gambar berikut:

Hasil render menampilkan  dua buah objek masing-masing rata kiri dan kanan.
Hasil render menampilkan dua buah objek masing-masing rata kiri dan kanan.

Next…

Add properti css border-radius: 100% untuk box semu before supaya menjadi full bulat. Sedangkan untuk box semu after, border-radius: 3px saja untuk membentuk sudut tumpul. Jangan lupa juga untuk memiringkan gagang sebanyak -45 derajat.

Code lengkap kedua object tersebut seperti berikut:

.box::before {
	width: 14px;
	height: 14px;
	border: 4px solid gray;
	top: 0;
	left: 0;
	border-radius: 100%
}

.box::after {
	width: 6px;
	height: 16px;
	background: red;
	right: 0;
	bottom: 0;
	border-radius: 3px;
	transform: rotate(-45deg)
}

Hasil akhir sementara masih sama, cuma berubah menjadi bulat saja dan gagang sudut tumpul dengan miring ke kiri sebanyak -45 derajat;

Hasil render menghasilkan icon search setengah jadi.
Hasil render menghasilkan icon search setengah jadi.

Steps 4 - Mengkreasikan search icon secara live tweaking di browser

Hasil akhir, posisi gagang kaca pembesar belum simetris berada pada koordinat sumbu x - y garis bantu.

Untuk mendapatkan posisi gagang icon search yang perfect sekali, cukup dengan melakukan tweaking langsung di layar browser.

Pertama, rasil render terakhir di zoom dulu hingga mentok–maksimal zoom Firefox mentok 300%, Google Chrome bisa mencapai 500%.

Setelah itu, klik kanan pilih inspect element. Setelah itu, pada bagian element box :: after, tinggal atur nilai property CSS right: 0; dan bottom: 0;. Petunjuk detailnya, lihat animate screencast berikut;

Live tweaking sintag CSS.
Live tweaking sintag CSS.

Untuk menaikan turunkan nilai properti css di dalam inspect element, cukup tekan tombol panah atas dan bawah keyboard.

Bagaimana, sangat mudah dan menyenangkan sekali bukan? Perbandingan lain, bisa mecontoh seperti tutorial membuat icon close.

Setelah mencapai posisi yang diinginkan, tinggal click kanan => copy rule. Lalu replace code tweaking tadi ke dalam file CSS project kalian.

.box::after {
    width: 6px;
    height: 16px;
    background: red;
    right: 3px;
    bottom: -2px;
    border-radius: 3px;
    transform: rotate(-45deg)
}

Recaps CSS code terakhir menjadi seperti ini:

/* Css center think */
.container {
	height:100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.box {
	width: 2rem;
	height: 2rem;
	display: block;
	position: relative;
	border: 1px solid salmon /* <= gridline / garis bantu */
}

/* Pseudo steps */

.box::before,
.box::after {
	content: '';
	position: absolute
}

.box::before {
	width: 14px;
	height: 14px;
	border: 4px solid gray;
	top: 0;
	left: 0;
	border-radius: 100%
}

.box::after {
	width: 6px;
	height: 16px;
	background: red;
	right: 3px;
	bottom: -2px;
	border-radius: 3px;
	transform: rotate(-45deg)
}

Steps 5 - Menambah fungsi click gerak animasi

Tiba saatnya bagian yang paling menantang, menambah gerakan animasi menjadi icon close saat terjadi click mouse.

Membuat gerakan animasi, tidak mengerikan kok, sintak CSS sudah kami sederhana seminim dan sesimple mungkin.

Cukup tambah satu class CSS lagi.

.box.active::before {
	/* do something */
}

.box.active::after {
	/* do something */
}

Kemudian panggil class active ke dalam elemen HTML<div> class box. Add class active ini bersifat sementara, hanya untuk memudahkan coding.

<div class="container">

    <div class="box active"></div>

</div>

Next…

Dalam blok code class .active, cukup duplicate code box before sebelumnya, dengan merubah dan menambah beberapa value saja.

.box.active::before {
	width: 2px; /* <= Change this value */
	height: 18px; /* <= Change this value */
	border: 1px solid gray; /* <= Change this value */
	top: 0;
	left: 0;
	border-radius: 3px; /* <= Change this value */
	transform: rotate(45deg) /* <= Insert new property */
}

.box.active::after {
	width: 4px;
	height: 20px;
	background: red;
	right: 3px;
	bottom: -2px;
	border-radius: 3px;
	transform: rotate(-45deg)
}

Maka hasil render browser menjadi bentuk seperti ini:

Hasil render garis silang masih acak.
Hasil render garis silang masih acak.

Untuk mengatur posisi garis silang yang masih acak, caranya sama, kembali melakukan trick tweaking CSS melalui klik kanan inspect element.

Setelah itu, tinggal geser posisi garis pseudo box.active::before menjadi simetris ke tengan tengah kotak dengan merubah nilai top: 4, left: 13;.

Kemudian untuk posisi garis pseudo box.active::after juga dilakukan perubahan right: 13px; dan bottom: 6px; sehingga pas berada di posisi center box.

Intinya, angka yang didapat berdasarkan ukuran search box icon berdasarkan file latihan kalian.

Hasil akhir code CSS menjadi seperti berikut ini:

/* Css center think */
.container {
	height:100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.box {
	width: 2rem;
	height: 2rem;
	display: block;
	position: relative;
	border: 1px solid salmon /* <= gridline / garis bantu */
}

/* Pseudo steps */

.box::before,
.box::after {
	content: '';
	position: absolute
}

.box::before {
	width: 14px;
	height: 14px;
	border: 4px solid gray;
	top: 0;
	left: 0;
	border-radius: 100%
}

.box::after {
	width: 6px;
	height: 16px;
	background: red;
	right: 3px;
	bottom: -2px;
	border-radius: 3px;
	transform: rotate(-45deg)
}

.box.active::before {
	width: 2px;
	height: 20px;
	border: 1px solid gray;
	top: 3px;
	left: 12px;
	border-radius: 3px;
	background: gray;
	transform: rotate(45deg)
}

.box.active::after {
	width: 4px;
	height: 20px;
	background: red;
	right: 13px;
	bottom: 6px;
	border-radius: 3px;
	transform: rotate(-45deg)
}

Steps 6 - Terakhir tambah fungsi click javascript

Insert code JavaScript berikut untuk memberi efek animasi click mouse.

var box = document.querySelector('.box');
box.addEventListener('click', function() {
	box.classList.toggle('active');
});

Untuk hasil terbaik, hapus class active dalam block element <div class="box"></div>.

Conclusion

Ternyata sangat mudah membuat box icon search hanya dengan satu elemen <div> HTML dan sedikit code CSS.

Untuk mendapatkan hasil yang presisi dan posisi sempurna, selalu gunakan ukuran tombol penampung icon search yang pas. Misal, box berbentuk kubus dengan ukuran 1.25rem (20px x 20px).

Maka ukuran box elemen bulat, jadi 1rem (16px x 16px). Sedangkan balok icon cukup deklarasi width 10px saja, ukuran height di abaikan, ganti dengan border 2px.

Maka saat mengatur posisi rata kiri-kanan, atas-bawah akan mendapatkan angka yang genap. Sehingga menghasilkan rasio yang sempurna.

Lihat DEMO. Live demo Codepen

Code challenge

Setelah mengikuti tutorial cara membuat search box icon, hasil desain icon search memang agak besar dan memiliki border.

Jadi, tugas kalian untuk merubah ukuran icon sesuai dengan projek kalian.

  • Pastinya saat menghapus border, ukuran dan posisi icon jadi berubah dan sedikit berantakan. Silahkan untuk merapikan kembali.
  • Kreasikan juga dengan menambah efek transisi yang lebih smooth.

Kalau masih ada yang kurang jelas, silahkan bertanya via kolom komentar, atau DM via grup diskusi Telegram Insertapps.

Comment

comments powered by Disqus