Was ich aus dem CSS des neuen Facebook-Designs gelernt habe

 (ishadeed.com)
4 Punkte von xguru 2020-04-03 | 4 Kommentare | Auf WhatsApp teilen

  • Verwendung von SVG für Avatare, um innere Schatten darzustellen

  • Spacer-divs statt margin

  • CSS-Filter auf Bildern

  • Schattenbild (2x14 px) statt box-shadow

  • Umfangreiche Nutzung von CSS-Variablen

  • Einsatz von Line Clamp, um die Anzahl mehrzeiliger Zeilen zu begrenzen

  • Verwendung von .hover-div statt :hover

  • Dynamische Verlaufs-Hintergründe auf Basis der Hauptfarbe

  • Mehrere Box-Shadows

Verwandte Beiträge

4 Kommentare

 
sduck4 2020-04-03

Anscheinend beschäftigen Sie sich in letzter Zeit auch intensiv mit Design. Das Design von GeekNews wird nach und nach immer besser.

Heute scheint sich auch die Schriftart geändert zu haben.
 
xguru 2020-04-03

Noch nicht gerade bis zum Lernen, aber.. haha

Ich wollte möglichst keine Webfonts verwenden, habe mich wegen der wirklich unschönen koreanischen Schriftarten unter Windows am Ende aber doch geschlagen gegeben und bin auf Noto Sans umgestiegen.
 
xguru 2020-04-03

Man fragt sich zwar bei manchen Dingen, warum sie so gemacht wurden, aber als Referenz für dies und das ist es ganz nützlich.

Line Clamp sollte ich wohl mal ausprobieren.
 
xguru 2020-04-03

Für die Bildverarbeitung brauchte ich etwas, bei dem nur eine bestimmte Anzahl von Zeilen angezeigt wird, und dafür ist line-clamp genau richtig. Gefällt mir.

Es funktioniert nicht einfach so, sondern muss zusammen mit overflow: hidden verwendet werden.

display: -webkit-box;

-webkit-line-clamp: 3;

overflow: hidden;