Hal-hal yang diketahui dari CSS pada desain baru Facebook

 (ishadeed.com)
4 poin oleh xguru 2020-04-03 | 4 komentar | Bagikan ke WhatsApp

  • Menggunakan SVG pada Avatar untuk menangani bayangan dalam

  • Menggunakan div spacer alih-alih margin

  • Filter CSS pada gambar

  • Menggunakan gambar bayangan (2x14 px) alih-alih box-shadow

  • Menggunakan banyak variabel CSS

  • Menggunakan Line Clamp untuk membatasi jumlah baris multiline

  • Menggunakan .hover-div alih-alih :hover

  • Membuat latar belakang gradasi dinamis dari warna utama

  • Bayangan kotak majemuk

Bacaan terkait

4 komentar

 
sduck4 2020-04-03

Sepertinya belakangan Anda juga banyak belajar soal desain. Desain GeekNews makin lama makin membaik.

Hari ini sepertinya font-nya berubah.
 
xguru 2020-04-03

Belum sampai tahap belajar sih.. hehe

Saya sebisa mungkin menghindari penggunaan web font, tapi karena font Korea di lingkungan Windows terlalu tidak enak dilihat, akhirnya saya menyerah dan beralih ke Noto Sans.
 
xguru 2020-04-03

Ada juga hal-hal yang bikin penasaran kenapa dibuat seperti itu, tapi lumayan bagus untuk jadi referensi ini-itu.

Sepertinya line-clamp wajib dicoba.
 
xguru 2020-04-03

Untuk pemrosesan gambar, ada bagian yang perlu hanya menampilkan sejumlah baris tertentu, dan line clamp memang pas. Saya suka.

Tidak akan bekerja begitu saja, harus dipasangkan dengan overflow: hidden.

display: -webkit-box;

-webkit-line-clamp: 3;

overflow: hidden;