Delapan Tips CSS untuk Tata Letak dan Efek Tingkat Lanjut

Ranah pengembangan front-end web telah membuat kemajuan besar selama beberapa tahun terakhir. Namun, front-end web, seperti yang dilihat pengguna, masih sama: markup HTML yang ditata dengan CSS.

Banyak masalah tata letak yang tampak sederhana pada awalnya tetapi sering kali terbukti rumit. Tanpa pengetahuan yang luas tentang cara kerja fitur CSS tertentu, tata letak lanjutan ini tampaknya tidak mungkin dicapai dengan CSS saja.

Dalam artikel ini, Anda akan menemukan delapan kiat dan trik ahli CSS yang memanfaatkan fitur CSS yang kurang dikenal untuk menerapkan beberapa tata letak dan efek lanjutan ini.

1. Memaksimalkan Selektor Saudara CSS

Masalahnya: Anda kehilangan peluang pengoptimalan dengan tidak menggunakan pemilih saudara.

Solusinya: Gunakan penyeleksi saudara kapan pun itu masuk akal. Setiap kali Anda bekerja dengan daftar item, dan Anda perlu memperlakukan item pertama atau terakhir secara berbeda, insting pertama Anda mungkin menggunakan penyeleksi CSS semu :first-child dan :last-child .

Misalnya, saat membuat ikon menu hamburger khusus CSS:

Lihat Pen Maximizing CSS Sibling Selectors 1 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Ini masuk akal: Setiap bilah memiliki margin-bottom, kecuali yang terakhir.

Namun efek yang sama juga dimungkinkan melalui pemilih saudara yang berdekatan (+):

Lihat Pen Maximizing CSS Sibling Selectors 2 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Ini juga masuk akal: Segala sesuatu setelah bilah pertama memiliki margin-top. Trik CSS ini tidak hanya menghemat beberapa byte tambahan (yang dapat dengan mudah ditambahkan untuk proyek berukuran sedang), tetapi juga membuka banyak kemungkinan.

Pertimbangkan daftar kartu ini:

Lihat Pen Maximizing CSS Sibling Selectors 3 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Masing-masing memiliki judul dan teks, yang terakhir disembunyikan secara default. Jika Anda hanya ingin membuat teks kartu aktif (dengan kelas .active ) dan yang mengikutinya terlihat, Anda dapat melakukannya dengan cepat hanya menggunakan CSS:

Lihat Pen Maximizing CSS Sibling Selectors 4 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Dengan sedikit JavaScript, ini bisa menjadi interaktif juga.

Mengandalkan JavaScript saja untuk semua itu, bagaimanapun, akan menghasilkan skrip seperti ini:

Lihat Pen Maximizing CSS Sibling Selectors 5 oleh Rico Mossesgeld (@ricotheque) di CodePen.

di mana menyertakan jQuery sebagai dependensi memungkinkan Anda memiliki kode yang agak pendek.

2. Ukuran Elemen HTML yang Konsisten

Masalahnya: Elemen HTML memiliki ukuran yang tidak konsisten di berbagai browser.

Solusinya: Atur box-sizing untuk semua elemen menjadi border-box . Sebuah kutukan lama bagi pengembang web, Internet Explorer melakukan satu hal dengan benar: Ini berukuran kotak dengan benar.

Peramban lain hanya melihat konten saat menghitung lebar elemen HTML, dengan yang lainnya diperlakukan sebagai surplus. width: 200px piksel div, dengan 20px 20 2px dan batas 2 piksel, dirender sebagai lebar 242 piksel.

Internet Explorer menganggap padding dan border sebagai bagian dari lebar. Di sini, div dari atas akan memiliki lebar 200 piksel.

Lihat Demo Model Kotak Pena CSS 1 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Setelah Anda menguasainya, Anda akan menemukan pendekatan yang terakhir lebih logis, bahkan jika itu tidak mengikuti standar.

Jika saya mengatakan lebarnya 200px, astaga, itu akan menjadi kotak dengan lebar 200px bahkan jika saya memiliki padding 20px.

Bagaimanapun, CSS berikut menjaga ukuran elemen (dan karena itu tata letak) konsisten di semua browser:

Lihat Demo Model Kotak Pena CSS 2 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Set kedua pemilih CSS melindungi elemen HTML yang ditata tanpa mempertimbangkan kotak batas dari gangguan tata letak.

box-sizing: border-box sangat berguna sehingga menjadi bagian dari kerangka kerja CSS yang relatif populer yang disebut sanitize.css.

3. Elemen Tinggi Dinamis

Masalahnya: Menjaga tinggi elemen HTML proporsional dengan lebarnya.

Solusinya: Gunakan padding vertikal sebagai pengganti ketinggian.

Katakanlah Anda ingin tinggi elemen HTML selalu cocok dengan lebar CSS-nya. height: 100% tidak mengubah perilaku default elemen yang cocok dengan tinggi kontennya.

Lihat Pena Dynamic Height Elements 1 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Jawabannya adalah untuk mengatur ketinggian ke 0 dan menggunakan padding-top atau padding-bottom untuk mengatur tinggi sebenarnya .container sebagai gantinya. Properti mana pun dapat berupa persentase dari lebar elemen:

Lihat Pena Dynamic Height Elements 2 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Sekarang .container akan tetap berbentuk persegi tidak peduli seberapa lebarnya. overflow: hidden membuat konten panjang tidak melanggar rasio ini.

Teknik ini, dengan beberapa modifikasi, sangat bagus untuk membuat sematan video yang mempertahankan rasio aspeknya pada ukuran berapa pun. Sejajarkan sematan dengan .container 's top dan left through position: absolute , setel kedua dimensi embed ke 100% sehingga "mengisi" .container , dan ubah padding-bottom .container agar sesuai dengan aspek video perbandingan.

Lihat Pena Dynamic Height Elements 3 oleh Rico Mossesgeld (@ricotheque) di CodePen.

position: relative for .container memastikan bahwa pemosisian absolut iframe berfungsi dengan baik. padding-bottom baru hanyalah tinggi rasio aspek dibagi dengan lebarnya, dikalikan 100. Misalnya, jika rasio aspek video sematan adalah 16:9, persentase padding-bottom harus 9 dibagi 16 (0,5625) dan dikalikan 100 (56,25).

4. Elemen Lebar Dinamis

Masalahnya: Menjaga lebar elemen HTML proporsional dengan tingginya.

Solusinya: Gunakan ukuran font sebagai dasar untuk dimensi elemen.

Sekarang, bagaimana dengan kebalikannya, atau wadah yang lebarnya berubah seiring tingginya? Kali ini, font-size untuk menyelamatkan. Ingat bahwa lebar dan tinggi bisa dalam em s, artinya mereka bisa menjadi rasio font-size elemen.

Elemen dengan ukuran font-size 40px, lebar 2em , dan tinggi 1em akan memiliki lebar 80 piksel (40 x 2) dan tinggi 40 piksel (40 x 1).

Lihat Elemen Lebar Dinamis Pena oleh Rico Mossesgeld (@ricotheque) di CodePen.

Ingin mengubah ketinggian .container ? Ubah ukuran font.

Satu-satunya peringatan adalah tidak mungkin membuat ukuran font elemen sesuai dengan tinggi induknya secara otomatis hanya melalui CSS. Namun teknik ini memungkinkan skrip pengubahan ukuran Javascript dipotong dari:

 var container = document.querySelector( '.container' ); container.style.height = yourDesiredHeight + 'px'; container.style.width = yourDesiredHeight * yourDesiredRatio + 'px';

ke:

 document.querySelector( '.container' ).style.fontSize = yourDesiredHeight + 'px';

5. Pemusatan Vertikal dari Konten Dinamis

Masalahnya: Menjaga elemen HTML (dengan ketinggian tidak diketahui) di tengah secara vertikal di dalam elemen lain.

Solusinya: Setel elemen luar ke display: table , lalu ubah elemen dalam menjadi table-cell CSS. Atau cukup gunakan CSS Flexbox.

Dimungkinkan untuk memusatkan satu baris teks secara vertikal dengan line-height :

Lihat Pena Vertical Centering of Dynamic Content 1 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Untuk beberapa baris teks atau konten non-teks, tabel CSS adalah jawabannya. Atur .container ke table , lalu gunakan display: table-cell dan vertical-align: middle untuk .text :

Lihat Pena Vertical Centering of Dynamic Content 2 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Pikirkan trik CSS ini sebagai padanan vertikal dari margin: 0 auto . Flexbox CSS3 adalah alternatif yang bagus untuk teknik ini jika dukungan buggy Internet Explorer dapat diterima:

Lihat Pena Vertical Centering of Dynamic Content 3 oleh Rico Mossesgeld (@ricotheque) di CodePen.

6. Kolom Tinggi Sama

Masalahnya: Menjaga tinggi kolom tetap sama.

Solusinya: Untuk setiap kolom, gunakan nilai margin-bottom negatif yang besar, dan batalkan itu dengan padding-bottom yang sama besarnya. Tabel CSS dan Flexbox juga berfungsi.

Menggunakan float atau display: inline-block , dimungkinkan untuk membuat kolom berdampingan melalui CSS.

Lihat Pena dengan Tinggi yang Sama Kolom 1 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Perhatikan penggunaan box-sizing: border-box untuk mengukur .cols dengan benar. Lihat Ukuran Elemen HTML yang Konsisten di atas.

Batas kolom pertama dan terakhir tidak turun sepenuhnya; mereka tidak cocok dengan tinggi kolom kedua yang lebih tinggi. Untuk memperbaikinya, cukup tambahkan overflow: hidden ke .row . Kemudian atur margin-bottom masing-masing .col ke 99999px dan padding-bottom bottomnya ke 100009px (99999px + padding 10px yang diterapkan ke sisi lain .col ).

Lihat Pena Sama-Tinggi Kolom 2 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Alternatif yang lebih mudah adalah Flexbox. Sekali lagi, hanya gunakan ini jika dukungan Internet Explorer tidak diperlukan.

Lihat Pena dengan Tinggi yang Sama Kolom 3 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Satu lagi alternatif dengan dukungan browser yang lebih baik: tabel CSS (tanpa vertical-align: middle ).

Lihat Pena dengan Tinggi yang Sama Kolom 4 oleh Rico Mossesgeld (@ricotheque) di CodePen.

7. Melampaui Kotak

Masalahnya: Kotak dan garis lurus sangat klise.

Solusinya: Gunakan transform: rotate(x) , atau border-radius .

Ambil serangkaian panel khas dari situs web pemasaran atau brosur: tumpukan slide vertikal dengan satu titik. Markup dan CSS-nya bisa terlihat seperti ini:

Lihat Pena Melampaui Kotak 1 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Dengan biaya membuat markup jauh lebih rumit, panel kotak ini dapat diubah menjadi setumpuk jajaran genjang.

Lihat Pena Melampaui Kotak 2 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Ada banyak hal yang terjadi di sini:

Ketinggian setiap panel dikontrol oleh .pane-container. Margin-bawah negatif memastikan panel menumpuk dengan pas.

• .pane-background , anaknya .mask-box , dan cucunya .image semuanya diatur ke position: absolute . Setiap elemen memiliki nilai top , left , bottom , dan right yang berbeda. Ini menghilangkan jarak yang dibuat oleh rotasi yang dirinci di bawah ini.
• .mask-box diputar 2 derajat (berlawanan arah jarum jam).
• .image diputar -2 derajat untuk melawan .mask-box .
• .mask-box disembunyikan sehingga sisi atas dan bawahnya yang diputar memotong elemen .image .

Pada catatan terkait, mengubah gambar menjadi lingkaran atau oval sangat sederhana. Cukup terapkan border-radius: 100% ke elemen img .

Lihat Pena Melampaui Kotak 3 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Modifikasi CSS real-time seperti ini mengurangi kebutuhan untuk menyiapkan konten sebelum dipublikasikan di situs web. Alih-alih menerapkan topeng lingkaran ke foto di Photoshop, pengembang web bisa menerapkan efek yang sama melalui CSS tanpa mengubah foto aslinya.

Keuntungan tambahannya adalah dengan membiarkan konten tidak tersentuh dan tidak bergantung pada desain situs web saat ini, desain ulang atau perombakan di masa mendatang akan difasilitasi.

8. Mode Malam

Masalahnya: Menerapkan mode malam tanpa membuat lembar gaya baru.

Solusinya: Gunakan filter CSS.

Beberapa aplikasi menampilkan mode malam, di mana antarmuka menjadi gelap untuk keterbacaan yang lebih baik di bawah cahaya redup. Pada browser yang lebih baru, filter CSS dapat menciptakan efek yang sama, dengan menerapkan efek seperti Photoshop.

Filter CSS yang berguna adalah invert , yang (tidak mengherankan) membalikkan warna semua yang ada di dalam elemen. Hal ini membuat pembuatan dan penerapan serangkaian gaya baru tidak diperlukan.

Lihat Pen Night Mode 1 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Menggunakan filter ini pada teks hitam dan latar belakang putih mensimulasikan mode malam. !important memastikan bahwa warna baru ini menggantikan gaya yang ada.

Lihat Pen Night Mode 2 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Sayangnya, gambarnya terlihat aneh, karena warnanya terbalik dengan yang lainnya. Kabar baiknya adalah beberapa filter dapat diterapkan secara bersamaan. Menambahkan filter hue-rotate akan mengembalikan gambar dan konten visual lainnya ke normal:

Lihat Pen Night Mode 3 oleh Rico Mossesgeld (@ricotheque) di CodePen.

Mengapa ini berhasil? hue-rotate(180deg) hanya menciptakan efek yang sama seperti yang dilakukan oleh invert(1) . Berikut adalah demo tentang cara kerja CSS mode malam saat beralih melalui tombol yang didukung JavaScript.

Maksimalkan CSS

Kecuali jika browser atau bagaimana situs web dibangun berubah secara dramatis di masa depan, pengetahuan yang baik tentang CSS akan tetap menjadi keterampilan mendasar dalam ruang pengembangan web.

Semua tip CSS ini memiliki kesamaan: Mereka memaksimalkan penggunaan CSS sebagai bahasa gaya, membiarkan browser itu sendiri melakukan pekerjaan berat. Dan, jika dilakukan dengan benar, ini akan selalu memberikan hasil yang lebih baik, kinerja yang lebih baik, dan pengalaman pengguna yang lebih baik.

Beri tahu kami jika Anda memiliki trik CSS yang menurut Anda menarik dan berguna di bagian komentar di bawah.