Facebook’un Yeni Tasarımının CSS’inden Öğrendiklerimiz

 (ishadeed.com)
4 puan yazan xguru 2020-04-03 | 4 yorum | WhatsApp'ta paylaş

  • İç gölge uygulamak için Avatar’da SVG kullanımı

  • margin yerine spacer div

  • Görsellerde CSS filtreleri

  • box-shadow yerine gölge görseli (2x14 px)

  • Çok sayıda CSS değişkeni kullanımı

  • Çok satırlı satır sayısı sınırlandırması için line-clamp kullanımı

  • :hover yerine .hover-div kullanımı

  • Ana renkten dinamik degrade arka plan oluşturma

  • Çoklu box shadow

İlgili okumalar

4 yorum

 
sduck4 2020-04-03

Sanırım bu aralar tasarım tarafını da epey çalışıyorsunuz. GeekNews tasarımı giderek daha da iyileşiyor.

Bugün de font değişmiş gibi görünüyor.
 
xguru 2020-04-03

Ders çalışacak kadar değil ama... hehe

Mümkün olduğunca web font kullanmamaya çalışıyordum, ama Windows ortamında Korece fontlar çok çirkin olduğu için sonunda pes edip Noto Sans'a geçtim.
 
xguru 2020-04-03

Neden böyle yapmışlar diye düşündüren şeyler de var ama, çeşitli açılardan örnek almak için güzel görünüyor.

Line Clampi bir denemek lazım gibi.
 
xguru 2020-04-03

Görsel işleme için yalnızca belirli sayıda satırın görünmesi gereken bir durum vardı; Line Clamp tam aradığım şeymiş. Hoşuma gitti.

Tek başına çalışmıyor, overflow: hidden ile birlikte kullanılmalı.

display: -webkit-box;

-webkit-line-clamp: 3;

overflow: hidden;