Trik-trik CSS Yang Belum Kalian Tahu

Jika kamu menjadi seorang Web Designer, ada kalanya kamu coba untuk mencari tahu bagaimana menggunakan properti-properti CSS untuk mendesain Interface yang tidak biasa dan setelah Googling, kamu baru menyadari bahwa “Ada properti CSS untuk itu”.

Dalam artikel ini saya akan memberikan kode-kode CSS yang sebenarnya sudah lama ada, namun mungkin kamu baru menyadarinya.

1. Penomoran judul dan subjudul

Digunakan untuk memberikan nomor pada judul dan subjudul dalam dokumen secara otomatis. Kamu dapat menggunakan properti CSS counter untuk melakukan hal ini. Karena berasal dari CSS2, properti ini bisa didukung oleh semua browser, kecuali mungkin IE 6.

See the Pen GJRLWj by Preethi (@rpsthecoder) on CodePen.

2. Garis bawah pada teks

Kadang-kadang kita ingin menggaris bawahi suatu teks dengan garis putus-putus yang menarik dan unik. Ada beberapa properti lain dari keluarga text-decoration yang mungkin belum pernah kalian gunakan.

See the Pen YXzMQw by Preethi (@rpsthecoder) on CodePen.

3. Penyisipan tanda kutip

Properti membantu kita menyisipkan tanda kutip atau simbol entitas apaun ke dalam suatu kalimat.

See the Pen VLwNzv by Preethi (@rpsthecoder) on CodePen.

4. Checkbox efek

Efek ini seperti menggunakan jQuery, tapi jangan salah kita sama sekali tidak menggunakan library Javascript sama sekali untuk membuat ini, hanya menambahkan + label pada selektor.

See the Pen BNaEOm by Preethi (@rpsthecoder) on CodePen.

5. Membesarkan huruf pertama pada paragraf

Seperti paragraf pada sebuah buku cerita atau komik.

See the Pen bdGPWd by Preethi (@rpsthecoder) on CodePen.