15 Trik CSS Berguna yang Mungkin Anda Lupakan

Jika Anda telah menjadi pengembang web frontend untuk sementara waktu, ada kemungkinan besar bahwa Anda memiliki momen ketika Anda mencoba mencari tahu cara kode sesuatu dan menyadari setelah sedikit googling, bahwa “ada CSS untuk itu”. Jika Anda tidak melakukannya, Anda akan melakukannya.

Posting ini adalah kumpulan kode CSS seperti itu, yang dapat memberi Anda fitur seperti mengubah elemen lengket, memberi Anda garis putus-putus menggarisbawahi kemampuan, mengalir teks halaman Anda dalam bentuk khusus, atau mencapai efek paralaks. Beberapa dari mereka didukung secara luas sementara yang lain sedang dalam perjalanan untuk dukungan penuh oleh semua browser.

1. Pos dan pos penomoran

   Katakanlah Anda memiliki satu set judul dan subjudul dalam dokumen Anda dan Anda menomori secara manual atau melalui skrip. Sebagai gantinya, Anda dapat menggunakan penghitung CSS untuk melakukan ini. Sudah ada posting mendalam di sini. Dan karena itu dari spec CSS2, Anda dapat bertaruh bahwa itu didukung oleh semua browser, kecuali mungkin IE 6.

2. Semarakkan Underline Biasa

   Kadang-kadang kita ingin menggarisbawahi dengan garis putus-putus atau putus-putus bukannya garis yang kokoh. Karena tidak ada pilihan untuk itu, kami setuju perbatasan-bawah. Tapi perbatasan-bawah bukan solusi yang baik jika teks yang Anda garis bawahi membungkus.

   CSS3 menentukan bukan hanya satu tetapi tiga properti baru untuk dekorasi teks teks-dekorasi-warna, text-decoration-line, dan teks-dekorasi-gaya yang bisa disingkat menjadi tua yang baik dekorasi teks.

   Anda dapat menggunakannya untuk gaya menggarisbawahi, overline, bahkan membuat teks berkedip, dan banyak lagi. Pada April 2015 hanya Firefox yang mendukung properti ini, tetapi Anda dapat mengaktifkannya “fitur platform web eksperimental” untuk menggunakannya di Chrome.

3. Mengutip Kutipan

   Pertama-tama, tidak perlu repot mengetikkan kutipan keriting yang benar untuk kutipan pendek karena ada HTML untuk itu: tag yang menunjukkan kutipan inline.

   Itu Tag juga menangani mengutip kutipan batin dengan tanda kutip tunggal. Jadi dimana “ada 'CSS' untuk itu” saat ini?

   Katakanlah Anda tidak ingin tanda kutip ganda default atau Anda memiliki lebih dari satu tingkat kutipan bersarang, Anda dapat menentukan preferensi penawaran Anda untuk elemen kutipan dengan CSS dengan menggunakan CSS2 tanda kutip milik.

4. Mengelola Tabel yang Tidak Dapat Diatur

   Anda mungkin menemukan tabel besar dengan berbagai ukuran konten per sel yang menolak untuk tetap dalam lebar yang Anda tentukan, apa pun yang Anda coba. Jinakkan meja itu dengan tata letak meja properti (untuk tinggi kolom yang sama, ikuti tautan ini).

   Untuk lebih spesifik, perbaikannya ada di tata letak meja: diperbaiki; nilai. Saat Anda menetapkan tata letak tetap untuk tabel, tabel dan lebar sel ditentukan oleh lebar tabel atau baris sel pertama (yang dapat ditentukan oleh pengguna) dan bukan oleh konten. Ini didukung oleh semua browser.

5. Buat Lengket

   Elemen lengket adalah elemen pada halaman yang tidak akan digulir keluar dari tampilan. Dengan kata lain itu menempel pada area yang terlihat (viewport atau kotak gulir). Anda dapat membuat ini dengan menggunakan CSS posisi: lengket;.

   Mereka bertindak seperti elemen yang relatif diposisikan sebelum pengguliran dan kemudian seperti elemen tetap setelah ambang pengguliran tercapai. Untuk sekarang, hanya Firefox mendukungnya.

6. Dapatkan Teks Anda Dalam Bentuk

   Apakah Anda ingin teks pada halaman Anda melengkung dengan baik ke beberapa gambar yang ditampilkan di sampingnya? Anda dapat mencoba Bentuk CSS. Untuk mengimplementasikan bentuk CSS, kita dapat menggunakan tiga properti bentuk-luar, bentuk-margin dan bentuk-gambar-ambang batas. Pada April, 2015 Bentuk CSS didukung oleh browser webkit.

7. Bidang wajib

   Jika Anda mendapatkan formulir, ada kemungkinan besar beberapa bidang di dalamnya diperlukan sementara yang lain tidak. Anda harus memberi tahu pengguna mana yang mana. CSS untuk ini adalah :wajib :pilihan kelas semu. Semua browser modern mendukungnya.

8. Pilih-pilih dengan Warna

   Jika Anda tidak menyukai warna tertentu, seperti biru, kami dapat mewarnai area yang dipilih dengan warna lain dan ::pilihan elemen pseudo adalah CSS untuk itu. Ini didukung oleh semua browser modern.

9. Apakah saya memeriksanya?

   Dalam situasi di mana kotak centang telah diperiksa, alangkah baiknya jika ada indikasi lain selain dari tanda centang kecil di dalam kotak centang default untuk menunjukkan bahwa item tersebut telah diperiksa..

   Ada CSS untuk yang mengeksploitasi ikatan antara saudara kandung langsung, dua elemen berdampingan. CSS memiliki pemilih saudara yang berdekatan yang ditandai dengan tanda tambah + tanda tangan, dan kita dapat menggunakannya untuk menargetkan label di sebelah kotak centang. Tetapi bagaimana dengan menargetkan kotak centang yang dicentang terlebih dahulu? Ada : dicentang kelas semu untuk itu.

10. Like A Storybook

    Lalu, bukankah lebih baik jika yang pertama “HAI” dalam “Pada suatu ketika” terlihat cantik? Kita bisa membuatnya terlihat cantik, lagipula ada CSS untuk itu. Di sinilah tempatnya ::surat pertama elemen pseudo datang untuk menyelamatkan. Ini menargetkan huruf pertama dari baris pertama elemen yang ditargetkan. Baca lebih lanjut di sini.

11. Apakah Anda Ingin Tahu Lebih Banyak?

    Suatu elemen mungkin memiliki kelas X atau data Y atau beberapa nilai lainnya untuk atribut. Jika kita perlu menampilkan nilai atribut elemen di dekatnya, kita dapat menggunakan konten: attr (X). Ia mengambil nilai atribut X dari elemen, lalu kita bisa memperlihatkannya di sebelah elemen.

12. Sedikit Lebih ke Kiri

    Elemen pemusatan untuk pemula CSS cukup membanggakan. Elemen yang berbeda membutuhkan set properti CSS yang berbeda untuk memusatkannya. Kami akan melihat satu contoh dari banyak contoh yang tersedia di world wide web, sehingga Anda dapat mengingat kembali bahwa ada CSS untuk memusatkan hal-hal.

13. Mengungkapkan Format File Link

    Pernah melihat gambar kecil di dekat tautan yang menunjukkan apakah tautan itu? PDF? atau DOC? Ya, ada CSS untuk mencapainya. Itu konten: url () adalah apa yang akan kita gunakan untuk menampilkan gambar di balik tautan.

14. Efek Pemicu Paralaks

    Efek paralaks adalah efek yang digunakan untuk menggambarkan pergerakan latar yang tampaknya lambat relatif terhadap latar depan. Efek ini populer di situs web yang menerapkan pengguliran paralaks. Ada berbagai cara untuk mengimplementasikannya, contoh di bawah ini berfungsi di Firefox background-attachment: diperbaiki;.

15. Kekuatan Animasi CSS

    Mungkin tidak besar “ada CSS untuk itu” saat ini, karena Anda semua mungkin paling menyadari animasi CSS sekarang. Tapi sedikit pengingat tidak ada salahnya. Ada banyak kegunaan untuk animasi CSS tetapi di sini ada satu untuk latihan mewarnai yang sederhana.

Sekarang Baca: 50 Cuplikan CSS Berguna yang Harus Dimiliki Setiap Desainer