Tips CSS

 (markodenic.com)
21 poin oleh xguru 2021-04-28 | 2 komentar | Bagikan ke WhatsApp

Kumpulan tips yang jarang terlihat di tutorial lain

  • Efek mengetik (kursor berkedip)

  • Filter Drop-Shadow();

  • scroll-behavior: smooth; scrolling halus

  • Membuat rata tengah

  • Kursor gambar/emoji

  • Memotong teks

  • -webkit-line-clamp : memotong teks pada jumlah baris tertentu

  • ::selection

  • resize:both; membuat semuanya bisa diubah ukurannya

  • Membuat modal dengan :target

  • calc()

  • Selektor :empty

  • Scrollbar kustom

  • position: sticky;

  • CSS scroll snap

  • Tooltip dinamis menggunakan attr()

  • Mengubah warna kursor dengan caret-color

  • ::in-range, ::out-of-range

  • Membuat teks headline dengan latar belakang keren menggunakan background-clip

Bacaan terkait

2 komentar

 
alstjr7375 2021-04-30

Saya belum tahu soal efek mengetik itu, tapi ternyata berguna juga.
 
xguru 2021-04-28

Akhir-akhir ini, untuk centering biasanya dijelaskan dalam 3 baris di artikel.. ternyata bisa juga dibuat 2 baris seperti ini.

.center {

display: grid;

place-items: center;

}