Facebook के नए डिज़ाइन के CSS से पता चली बातें

• अंदरूनी shadow को संभालने के लिए Avatar में SVG का उपयोग

• Margin की जगह spacer div

• इमेज पर CSS filter

• box-shadow की जगह shadow image (2x14 px)

• बहुत सारे CSS variables का उपयोग

• multiline लाइन-गिनती सीमा के लिए Line Clamp का उपयोग

• :hover की जगह .hover-div का उपयोग

• मुख्य रंग के आधार पर dynamic gradient background बनाना

• multiple box shadows

[sduck4]

लगता है आजकल आप लोग design की तरफ भी काफी पढ़ाई कर रहे हैं। GeekNews का design धीरे-धीरे बेहतर होता जा रहा है.

आज तो लगता है font भी बदल गया है।

[xguru]

पढ़ाई तक तो नहीं, लेकिन.. haha

मैं जहाँ तक हो सके web font इस्तेमाल नहीं करना चाहता था, लेकिन Windows environment में Korean font बहुत खराब दिखते थे, इसलिए आखिरकार हार मानकर Noto Sans पर स्विच कर लिया।

[xguru]

कुछ चीज़ें देखकर लगता है कि ऐसा क्यों किया गया होगा, लेकिन अलग-अलग बातों के लिए इससे अच्छी तरह रेफ़रेंस लिया जा सकता है.

लगता है Line Clamp भी एक बार लागू करके देखना चाहिए.

[xguru]

इमेज प्रोसेसिंग के लिए मुझे कुछ ऐसी जगह चाहिए थी जहाँ सिर्फ़ तय संख्या की lines ही दिखें, और इसके लिए Line Clamp बिल्कुल सही लगा। मुझे पसंद आया.

यह अकेले काम नहीं करता, इसे overflow: hidden के साथ लगाना पड़ता है.

display: -webkit-box;

-webkit-line-clamp: 3;

overflow: hidden;