5 Hidden Trik Penulisan CSS agar Coding Lebih Efisien
Pernah nggak sih ngerasa overwhelmed pas lagi styling website? 🤯🫨
Kayak susah banget buat ngatur penempatan konten atau element, layout yang udah dibuat malah berantakan, atau susah banget buat ngehitung ukuran element biar fleksibel di semua device. Belum lagi permasalahan nambahin banyak kode HTML biar tampilan website kece.🤩
Masalah-masalah kayak gini seringkali bikin frustasi, apalagi kalau kamu lagi berusaha bikin tampilan website yang rapi dan responsif.
Nah, CSS itu kan dikenal fondasi penting biar tampilan web makin kece, tapi tetap fungsional. Sayangnya, sebagian orang cuman paham dasar-dasarnya aja, tanpa tahu hidden trik yang bisa banget bantu ngurangin rasa bingung dan bikin ngoding kamu jadilebih efisien, terutama buat ngatasin permasalahan di atas.
Buat ngatasin masalah ini, coba deh pakai 5 Hidden Trik CSS yang bisa kamu coba, antara lain:
1. Hindarin Ukuran Element yang Bikin Bingung, Pakai box-sizing: border-box
Pernah ngak sih bikin layout, terus tiba-tiba berantakan karena ukuran elemen nggak sesuai ekspektasi? Biasanya ini tuh gara-gara padding atau border yang nambahin ukuran total elemen. Masalah ini sering banget dialamin sama pemula.
Nah, trik simpel buat ngatasin ini cukup pake box-sizing: border-box. Jadi, dengan kode ini, browser bakal ngerti kalau padding dan border udah include ke dalam total ukuran elemen.
Contoh Penggunaan:
* {
box-sizing: border-box;
}Nah, dengan cara ini, layout bakal jadi lebih rapi dan konsisten, apalagi kalo kamu nerapin ke desain web responsif.😎
2. Pake calc() Buat Hitung Ukuran Lebih Dinamis
Pernah ngerasa ribet buat ngitung ukuran biar fleksibel dan dinamis, tapi tetap berada di tempatnya?
Nah, kamu bisa coba pake calc() buat ngatur ukuran lebar atau tinggi elemen dengan gabungin nilai tetap (misalnya px) dan persentase (%).
Misalnya, kamu pengen ukuran lebar element 100% dari container-nya, tapi tetap ada ruang tambahan sebesar 50px. Nah, kamu pakai aja calc() kayak contoh di bawah ini:
.container {
width: calc(100% - 50px);
}Coba deh aplikasikan di proyek kamu, nantinya elemen .container bakal punya ukuran lebar 100% dari elemen induknya dikurangin 50px. Ini super berguna buat desain responsif, atau kalo kamu perlu nilai yang tergantung sama elemen lain.
3. Manfaatkan clamp() Biar Responsivitas Website Jadi Lebih Halus
Kamu pernah ngerasa ribet pas buat website responsif tapi harus nulis media query yang banyak banget?🔥🔥
Nah, kalau kamu pakai clamp() kamu bisa skip langkah itu. Dengan pakai clamp(), kamu bisa dengan mudah setting nilai dengan fleksibel buat properti, contohnya font-size bisa otomatis berubah sesuai ukuran viewport.
Contoh Penggunaan:
h1 {
font-size: clamp(25px, 5vw, 40px);
}Oke, jadi nilai 25px adalah nilai minimum, 5vw itu nilai responsif yang bakal menyesuaikan lebar viewport dan 40px adalah nilai maksimum. Hasilnya font-size bakal berubah menyesuaikan lebar layar device user, tapi terjaga di antara 20px hingga 40px. Pakai clamp() bisa bantu tampilan web kamu tetap enak dilihat.✨
4. Pakai :not() buat Ningkatin Selektor CSS
Pernah nggak kamu bingung caranya biar element tertentu nggak ikut kena styling seperti element lainnya?
Contohnya kamu pengen ubah background di semua elemen <div>, tapi class tertentu nggak mau kena ubah juga.🙅🏼♀️
Daripada ribet atur dan tambahkan class lagi, kamu bisa atasin masalah ini pakai selector :not(). Pakai selector :not() ini bisa mudahin kamu milih elemen mana yang nggak akan ikut berubah.
Contoh Penggunaan:
div:not(.exclude) {
background-color: #f0f0f0;
}Cara di atas bisa bikin kerja kamu lebih efisien tanpa harus nambahin kelas atau id baru buat element yang dikecualikan.
5. Pakai filter biar Efek Visual Website Lebih Kece
Biasanya buat nambahin efek kayak blur buat di element atau gambar, kita mesti pakai JavaScript, kan?
Nah, sekarang ada cara yang lebih simpel, yakni pakai properti filter di CSS. Properti filter ini bisa langsung nerapin efek visual kayak blur, brightness, contrast, dan grayscale ke elemen tanpa ribet, seperti contoh berikut:
img {
filter: grayscale(100%) blur(5px);
}
img:hover {
filter: grayscale(0%) blur(0);
}Coba deh praktekkin. Gambar kamu bakal ada efek grayscale dan blur di awal, tapi pas dihover, efek itu bakal hilang. Trik ini super helpful buat nambahin efek kece tanpa perlu nulis kode lain di JavaScript yang bisa ganggu performa website.
Dengan memahami dan mempraktikkan 5 hidden trik di atas, fitur dan website kamu bakal jauh lebih canggih dan interaktif.
Jadi, ayo terus bereksperimen dengan CSS biar bisa ciptain pengalaman pengguna makin asyik! 👩🏼💻
Kalau kamu tertarik buat lebih paham terkait trik-trik kece lainnya dan ningkatin skill web developmentmu, bisa banget eksplore trik CSS sekarang dengan ikut kursus online di Sekolah Koding. 🤩👍
Dengan belajar programming di Sekolah Koding, kamu bisa belajar dengan mudah, tanpa terikat waktu dan materinya lengkap berupa teks serta video. Ada kursus gratis dan berbayar yang bisa kamu ikuti untuk menggali lebih dalam ilmu web development.
Jadi, tunggu apalagi? Yuk, mulai belajar sekarang dan tingkatin skill coding kamu di Sekolah Koding!
