Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Form Design
Webdesign

Eksperimen CSS dengan Input Form Pencarian dan Tombol

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Arif Hidayanto (you can also view the original English article)

Dalam tutorial ini, saya ingin mengeksplorasi bagaimana Anda bisa memperindah form pencarian sederhana. Kita tidak akan melakukan sesuatu yang gila, sebaliknya yaitu mengeksplorasi empat perlakuan berbeda bagaimana Anda dapat merapikan input pencarian dengan bantuan CSS transisi.

Anda Sudah Memiliki Dasar tentang Kotak Pencarian

Di dalam file HTML, Anda perlu membuat input pencarian untuk memulai. Jika Anda lihat kode di bawah ini Anda akan melihat empat hal yang berbeda: div .box , div .container-1 , .icon, dan input pencarian itu sendiri.

Semua empat contoh akan memiliki kotak pencarian - alami – serta class ikon pencarian. Masing-masing dari empat contoh akan ditempatkan dalam container sehingga kita dapat memanipulasi input pencarian secara mandiri. Terakhir, kotak div bertanggung jawab untuk menjaga container terpusat.

Menambahkan Font Awesome

Font Awesome adalah sebuah library ikon. Anda dapat mempelajari lebih lanjut tentang proyek pada website milik Font Awesome.

Snippet kode di atas adalah salah satu contoh bagaimana Anda dapat menyertakan ikon ke dalam markup Anda. Namun, agar ikon muncul Anda juga perlu menyertakan link library Font Awesome, di demonstrasikan dalam snippet di bawah ini. Masukkan link ini ke dalam kepala dokumen Anda.

Styling Dasar

Kita sekarang akan menambahkan beberapa style ke dalam stylesheet terpisah (yang juga perlu Anda link kan ke dalam kepala dokumen).

Di atas snippet CSS kita menambahkan beberapa styling dasar pada halaman. Style box pencarian akan berwarna navy sehingga latar belakang tubuh tidak harus putih polos. Class box juga sedang terpusat ke halaman pada tutorial.

Menghiasi Kotak Pencarian

Tutorial ini adalah belajar tentang cara memperindah kotak pencarian. Dalam contoh pertama ini saya akan menjelaskan apa yang terjadi secara lebih rinci; Saya ingin memastikan Anda tahu persis apa yang sedang terjadi. Dalam tiga contoh yang tersisa, saya hanya akan menunjukkan cara untuk meraih berbagai transisi.

#1. Latar Belakang Memudar

Contoh pertama yang akan kita tangani adalah mengubah latar belakang input pencarian pada hover. Kita juga akan menambahkan transisi sehingga perubahan tidak tiba-tiba.

HTML

Anda sudah melihat markup dasar HTML. Snippet ini akan mirip untuk semua contoh.

CSS

Untuk memulai styling kita perlu mendefinisikan style CSS kotak pencarian itu sendiri. Mari kita tambahkan berbagai aturan CSS yang diperlukan satu per satu sehingga Anda tahu persis apa yang terjadi.

Pertama, kita akan memberi style pada class container. Properti yang paling penting bisa dibilang adalah position: relative. Ini ditetapkan secara khusus agar ikon dapat ditempatkan di atas input seperti yang akan Anda lihat sebentar lagi.

Input

Selanjutnya, kita akan memberi style ke input aktual. Semuanya di atas adalah murni estetika sebagai border radius atau warna latar belakang dan tidak mempengaruhi fungsi input. Buatlah catatan dari properti padding kiri. Ini ada untuk membuat ruang untuk ikon sehingga hal ini tidak benar-benar di atas teks dalam input.

Di bawah ini kita memiliki empat aturan yang berbeda untuk warna teks placeholder, dalam contoh kita adalah Search. Aturan sayangnya harus terpisah untuk masing-masing vendor prefix dan tidak dapat digabungkan ke dalam aturan penulisan shorthand. Ini sedikit mengganggu dan Anda akan melihat ini diulang dalam setiap contoh!

Ikon

Terakhir, kita akan memberi style ikon. Yang paling penting kita mengatur posisi untuk ditempatkan di atas input dengan menetapkan itu position: absolute. Margin membantu posisi ikon dalam tambahan pengaturan posisi atasnya hingga 50%.

Menambahkan Efek Hover

Bebrapa aturan berikutnya yang harus kita buat adalah apa yang terjadi pada hover kotak pencarian. Dalam contoh ini kita hanya ingin mengubah warna latar belakang. Untuk menghinari warna kuning atau biru di sekitar input (browser kadang menambahkannya) tetapkan outline: none.

Seperti yang Anda lihat dalam snippet di atas, kita telah menambahkan dua bagian tambahan – focus dan active. Dengan cara ini efek tidak akan hilang ketika Anda berhenti mengarahkan kursor pada input. Lebih penting lagi, efeknya juga menonjol ketika input digunakan.

Membuat Transisi

Untuk membuat transisi terjadi kita perlu menambahkan beberapa baris kode. Kembali semua ke aturan dimana kita mendefinisikan style dari input - .container-1 input#search. Sebelum kurung penutup tambahkan snippet berikut:

Kita mendefinisikan properti transisi dalam shorthand, tapi kita juga bisa mendefinisikan tiga parameter tersebut secara individual. Pertama, kita mengatakan bahwa transisi seharusnya hanya mempengaruhi properti background. Selanjutnya, kita mengatakan transisi harus dibuat sedikit lebih dari setengah detik. Terakhir, kita mendefinisikan efek transisi yang akan menurun. ease bukan satu-satunya efek yang akan bekerja di sini, kita juga bisa menggunakan linear atau ease-in, misalnya. Itu hanya akan tampak sedikit berbeda. Lebih baik cobalah sendiri untuk melihat apakah Anda menyukai mereka.

Style input saat ini harusnya terlihat seperti kode di bawah ini.

Bagaimana Transisi CSS Bekerja?

Jika Anda tidak tahu apapun tentang transisi CSS, izinkan saya memberi Anda gambaran singkat. Pertama, agar transisi bekerja, properti perlu didefinisikan pada keadaan default dan bukan pada hover, atau pada active atau focus.

Transisi CSS memungkinkan perubahan secara bertahap dan Anda dapat menentukan parameter spesifik untuk mengontrol, seperti properti mana yang akan terpengaruh, durasi transisi dan jenis transisi. Anda dapat mengatur beberapa transisi untuk satu elemen. Tapi, yang terpenting, Anda harus selalu menyertakan vendor prefix untuk mengakomodasi berbagai browser, karena dukungan untuk properti ini belum universal.

Untuk informasi lebih lanjut silakan lihat di: Transisi CSS3 Dan Mentransformasi Dari Awal

#2. Memperluas Input pada Hover

Dalam contoh ini, pencarian akan dimulai hanya terlihat seperti ikon kaca. Ketika Anda mengarahkan kursor ke atas ikon, pencarian akan meluas di titik mana Anda lalu dapat mengetikkan permintaan Anda. Mayoritas dari kode dalam contoh ini akan sangat mirip dengan contoh sebelumnya.

HTML

CSS

Input styling untuk transisi ini berbeda. Input secara signifikan lebih kecil sehingga ikon bisa tampak berada di belakang kotak. Semua properti yang tersisa, seperti background atau font color, sama seperti kita tidak ingin mengubah styling pencarian secara penuh.

Seperti yang bisa Anda lihat saya telah didefinisikan ulang properti transisi hanya untuk mempengaruhi lebarnya. Saya telah menghemat waktu yang sama, karena itu cukup cepat untuk tidak mengganggu pengguna, namun cukup lama untuk membuat efek yang bagus.

Berikut ini adalah kode untuk mewarnai ulang teks placeholder.

Dan sekali lagi kita memiliki style ikon CSS. Ini harus sama seperti pada contoh sebelumnya.

Menambahkan Efek Hover

Hal terakhir yang perlu kita lakukan adalah menentukan bagaimana pencarian akan terlihat ketika kursor sedang melayang di atasnya. Dalam snippet di bawah ini aturan pertama adalah memastikan form tidak memiliki cahaya yang disebabkan browser dan saat Anda menggunakan input - saat mengetik di dalamnya - kotak perncarian tetap meluas. Aturan tengah hanya memperluas input ke lebar penuh pada hover.

Hal terakhir yang terjadi pada kode di atas adalah bahwa pada hover ikonnya berubah warna. Ini hanya detail kecil untuk segera menunjukkan kepada pengguna bahwa kotak pencarian aktif dan berfungsi, bukan input yang tidak berfungsi. Perubahan tersebut tidak dilakukan oleh transisi.

#3. Memperbesar Ukuran Ikon pada Hover

Dari keempat contoh tersebut, satu ini yang paling halus, baik dari sisi kode maupun efek visualnya. Dalam hal ini ikon kaca yang tampak akan muncul sedikit dan bertambah besar.

HTML

Sekali lagi markup HTML dari ikon dan kotak pencarian sama seperti pada dua contoh sebelumnya. Kecuali, tentu saja, adalah .container-3.

CSS

CSS untuk contoh ini tidak ada yang istimewa. Untuk sebagian besar itu mulai sangat mirip dengan contoh pertama dimana keadaan default ini tidak berbeda sama sekali. Berikut adalah kode untuk container dan input. Perhatikan bahwa tidak ada transisi pada input kali ini.

Sekali lagi kita memiliki aturan placeholder.

Sekarang, dengan tampilan seprti itu, ikon untuk contoh ini sama juga. Ini adalah warna yang sama, posisi yang sama dan seterusnya. Namun, saya telah menambahkan transisi untuk itu. Transisi ini menargetkan semua properti, yang merupakan pendekatan yang lebih pendek daripada mengeja mereka secara individual.

Menambahkan Efek Hover

Ada beberapa hal yang terjadi dalam kode di atas. Pertama, kita mengubah warna ikon pada hover dan memindahkannya sedikit lebih tinggi sehingga itu terpusatkan secara vertikal ketika itu lebih besar. Kedua, kita menambahkan sebuah transformasi ke elemen ikon pada hover sehingga akan menjadi 1,5 kali dari ukuran aslinya. Karena transisi yang telah ditetapkan sebelumnya ditetapkan untuk mempengaruhi semua properti, tampak seolah-olah ukuran ikon itu tumbuh ke dalam pada hover.

Sekali lagi, lihatlah Transisi CSS3 Dan Mentransformasi Dari Awal untuk mempelajari lebih lanjut tentang properti transformasi.

#4. Hover Pada Tombol

Tidak seperti tiga contoh terakhir, yang satu ini akan lebih kompleks. Pada hover,tombol akan meluncur di atas input untuk membiarkan Anda melanjutkan - seperti Send atau Go. Tombol akan memiliki ikon kaca yang tampak di dalamnya.

HTML

Disini HTML sedikit berbeda. INput masih ada, tentu saja, tapi ikonnya sekarang berada di dalam elemen tombol yang muncul setelah input. Penting bahwa tombolnya setelah input karena terkait dengan efek hover yang akan dibuat di CSS.

CSS

CSS dalam contoh ini berbeda jadi harap perhatikan! Di bawah ini adalah snippet untuk styling container. Pertama, position: relative hilang; Itu tidak lagi penting karena ikon tidak bergantung padanya untuk bisa meletakannya di atas input. Namun, kita memiliki overflow:hidden. Ini membuat tombol tidak muncul saat tidak berada pada hover. Secara teknis tombol yang muncul hadir di sebelah kanan input, namun berkat overflow:hidden, itu tidak terlihat saat berada di luar lebar conteiner dan input sama lebar.

Di bawah ini input yang tidak memilki transisi karena ini bukan elemen yang terpengaruh kali ini.

Snippet untuk mengganti warna placeholder selanjutnya.

Berikut ini adalah kode untuk style tombol yang muncul pada hover. Trik untuk membuatnya meluncurdari samping adalah dengan menempatkannya tepat di belakang input, dan membuatnya tak terlihat kecuali pada hover. Tombolnya adalah elemen yang berubah - bergerak - oleh karena itu adalah satu dimana transisi didefinisikan. Untuk mempermudah, saya telah mengidentifikasi transisi untuk memengaruhi semua properti.

Menambah Efek Hover

Agar tombol memudar, itu perlu digerakkan di atas input. Itu dilakukan melalui margin negatif. Sebelumnya kita atur opacity tombol ke 0 jadi kita harus megatur ulang ke 1 agar tombolnya bisa terlihat juga.

Aturan terakhir hanya mengubah latar belakang tombol jika Anda mengarahkan kursor ke atas tombol. Itu baik untuk memberitahu pengguna bahwa tombol aktif dan Anda dapat mengekliknya untuk mengirimkan pencarian; Tidak ada gunanya memiliki tombol jika terlihat tidak aktif.

Kesimpulan

Yah, itu membawa kita ke ujung eksperimen CSS kita! Kita mengambil input form pencarian dasar dan menggunakan sedikit pilihan efek untuk mengubah perilakunya. Bagaimana lagi yang Anda sarankan untuk mengubah input pencarian seperti ini? Aspek lain apa selain itu yang akan Anda terapkan, transisi CSS atau transform? Beritahu kami di komentar!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.