16 Geheimnisse zu CSS mit denen man Web-Designs verbessern kann

Von Ivaylo Ivanov 12-11-2020 Selbst gemacht, Programmierung, UI / UX-Design 11 Minuten

Benutzt du schon lange CSS, um schöne Webdesigns und Layouts zu erstellen? Weißt du vielleicht schon ganz gut, wie CSS dir dabei helfen kann, eine fade Webseite etwas aufzufrischen, um der Seite einen wirklich ansprechenden Anstrich zu verleihen? Dabei kann CSS noch viel mehr als deine Seite bloß mit hübschen Fonts und attraktiven Hintergründen etwas aufzuhübschen. Unabhängig davon, wie lange du CSS schon verwendest, bietet CSS noch viele eher unbekannte Features und CSS-Eigenschaften, die du nutzen kannst, um deine Designs auf ein ganz neues Level zu heben. Diese wenig bekannten CSS-Geheimnisse erlauben es dir, das inhaltliche Verhalten auf den Webseiten zu beeinflussen und größere Freiheit bei der Anwendung kreativer Techniken auf verschiedene Elemente wie Fotografie zu nutzen.

Schauen wir uns also mal an, wie wir einige dieser weniger bekannten CSS-Eigenschaften nutzen können, um futuristische Web Designs zu entwerfen.

Was du dafür alles brauchst:

Ein gängiger Webbrowser und deine bevorzugten Entwicklertools; es wird empfohlen, Google Chrome oder Firefox zu verwenden, da sie die meisten CSS-Features unterstützen.
Ein zuverlässiger Code-Editor
Einige nützliche Assets wie Fonts und Bilder

Sobald du diese hast, können wir damit beginnen, einige der weniger bekannten typographischen CSS-Eigenschaften zu erkunden.

Typographische Eigenschaften

Viele CSS-Eigenschaften verbessern die Art und Weise, wie Text auf einer Webseite angezeigt wird. Einige weniger bekannte Optionen sind die folgenden:

1. Text-Stroke

Wenn du bereits Text Strokes aus Adobe Illustrator und einigen Vektor-Zeichenprogrammen kennst, wird es dich sicher freuen, dass du sie auch in CSS verwenden kannst. Die Text Stroke-Eigenschaft kann in CSS verwendet werden, um den gleichen Effekt zu erzielen. Die Text Strokes können auch mit CSS animiert werden, da man den Effekt auf die Farbe der Strokes anwenden kann. Leider kann die Stroke Width nicht animiert werden.

footer h3 {
/*more styles in style.css*/
/*...*/
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #000;
}

2. Farbverlauf für Text

Es ist nicht mehr länger so kompliziert, einen Farbverlauf auf Text anzuwenden. Hier ist eine kurze Demonstration, wie dieser attraktive Effekt mit WebKit auf deiner Webseite umgesetzt werden kann, während der Text weiterhin auswählbar und editierbar bleibt.

h2.contact-heading { 
  -webkit-text-fill-color: transparent; 
  -webkit-background-clip: text; 
  background: radial-gradient(#ffbc00, #ff65aa);
}

3. ::first-letter

Das ist ein Pseudo-Element, mit dem man den ersten Buchstaben in einem Block-Level-Element stilisieren kann. So kann man ähnliche Effekte wie in Papier- und Printmagazinen erzielen.

p.intro:first-letter { 
  font-size: 100px; 
  display: block; 
  float: left; 
  line-height: .5; 
  margin: 15px 15px 10px 0; 
}

Inhalte bearbeiten

Lass uns jetzt zu den CSS-Eigenschaften übergehen, mit denen du eine größere Kontrolle über das Verhalten von Bildern und Text je nach Größe oder Verhältnis ihrer Container hast.

4. Line-Clamp

Diese Eigenschaft ist nützlich, um Text nach einer bestimmten Anzahl von Zeilen abzuschneiden. Damit das Ganze funktioniert, benötigt man normalerweise drei Eigenschaften.
Zuerst musst du die Eigenschaft display auf -webkit-box setzen. Als nächstes solltest du -webkit-box-orient oder -webkit-inline-box auf vertical setzen. Dann solltest du auch noch den Overflow-Wert verbergen. Wenn einer dieser Werte fehlt, kannst du den Inhalt nicht abschneiden.

p.shortened { 
  display: -webkit-box; 
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical; 
  overflow: hidden; 
}

5. Character-Unit

Die Texthöhe oder -breite kann durch die CSS-Character-Unit-Eigenschaft eingeschränkt werden. Die ch unit bedeutet, dass die Zeichenbreite die gleiche ist wie die '0' (das Null-Zeichen), wenn sie in der gleichen Schriftart geschrieben wird, und hat eine besondere Verwendung, wenn sie mit den Monospace-Schriften kombiniert wird. Wenn eine andere Font-Familie verwendet wird, ändert sie sich ebenfalls. Du kannst sie in etwa wie die x-Höhe behandeln. Allerdings ist das ch hier die Breite des Zeichens '0' und nicht die von x.

h2.contact-heading {
  /*more properties in the CSS file*/
  max-width: 8ch;
}

6. Column-Count

Mit der column-count Eigenschaft in CSS weist du den Browser an, den Inhalt gleichmäßig in der angegebenen Anzahl von Spalten zu verteilen.

.outro {  
  column-count: 2;
}

7. Shape-Outside

Du kannst die shape-outside CSS-Eigenschaft verwenden, um einen gebogenen Texteffekt um ein schwebendes Bild herum zu erzeugen. Grundsätzlich erlaubt die shape-outside-Eigenschaft das Setzen von geometrischen Formen, so dass der Text um einen vordefinierten Bereich herum fließen kann.

.shape { 
  width: 300px; 
  float: left; 
  shape-outside: circle(50%); 
}

8. Wortumbruchs-Tag <wbr>

Obwohl es sich um ein CSS-Tutorial handelt, ist der <wbr> HTML-Tag hier trotzdem erwähnenswert. Das Word Break Tag ist ein HTML-Element, das eine Wortumbruchsmöglichkeit definiert. Es bezieht sich auf eine Stelle innerhalb des Textes einer Webseite, an der der Webbrowser die Zeile umbrechen kann. Es gibt Situationen, in denen es recht nützlich sein kann, wenn ein Wort länger als gewöhnlich ist und du befürchtest, dass der Webbrowser das Wort auf eine Art und Weise umbricht, die es dann unlesbar oder verstehbar machen würde. Zum Beispiel könnte eine Telefonnummer zu lang sein, und der Browser könnte sie an falschen Stellen abschneiden. Dann kann man einfach das <wbr>-Tag verwendet werden, um es zu vermeiden.

<wbr>+0043<wbr>234-343<wbr>234-234<wbr>

9. Object-Fit

Oft ist es am besten, wenn du das Verhalten der Bilder auf deiner Webseite abhängig von ihrer Containergröße einstellst. Wenn du nach einer CSS-Eigenschaft suchst, um diesen Effekt zu erzielen, ist object-fit zweifellos empfehlenswert. Die Eigenschaft legt fest, wie der Inhalt innerhalb eines <video> oder <img>-Tags skaliert werden soll, damit er perfekt in den Container passt.
Es gibt vier Optionen, um den Inhalt des Containers anzupassen: Füllen (fill), Abdecken (cover), Einhalten (contain) und Verkleinern (scale-down). Wenn du zum Beispiel cover als Wert dieser Eigenschaft benutzt, kannst du den Inhalt des Containers so skalieren, dass sein Seitenverhältnis erhalten bleibt, während du die gesamte Inhaltsbox des Elements füllst.

.object-fit { 
  object-fit: cover; 
  height: 400px; 
  width: 100%; 
}

10. Display: Flex

Das vertikale Zentrieren eines Elements oder eines Textes kann manchmal ziemlich problematisch sein. Jedoch gibt es einen einfachen Weg, dies in CSS mit Flexbox zu tun. Die Eigenschaft display: flex wurde im CSS3 eingeführt und erlaubt es, nahezu jedes Element vertikal auszurichten. So macht man das:

.align-vertically { 
  background: #13b5ea; 
  color: #fff; 
  display: flex; 
  align-items: center; 
  height: 200px; 
}

Ein Flexbox-Layout wird für ein Element über die Eigenschaft display: flex festgelegt, während die vertikale Zentrierung über align-items: center vorgenommen wird.

Dekorative & Kreative Elemente

Auch wenn es umfassende Diagrammfunktionen über die Datenvisualisierungsbibliotheken wie d3.js gibt, frage ich dich, warum du nicht einfach mal CSS für simple Tortendiagramme ausprobierst? Außerdem kannst du so einige oft ignorierte dekorative Elemente verwenden, um deiner Website mehr Farbe zu zu verleihen. Schauen wir mal, was man hier alles machen kann.

11. Gewinkelte Verläufe

Wenn dich das Erstellen von Tortendiagrammen schon immer genervt hat und du nach einem Weg gesucht hast, dies nur mit CSS zu tun, dann hast du hier deine Lösung. Mit der Funktion für gewinkelte Verläufe kannst du die Ergebnisse erzielen, die du dir wünschst. Die Funktion ist großartig, um ein Bild mit einem Farbverlauf zu erstellen, das voreingestellte Farbübergänge hat, die alle um den zentralen Punkt gedreht sind (anstelle von Strahlung von einem zentralen Punkt, was normalerweise beim Radial-Gradienten der Fall ist).

.piechart { 
  background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d  56% 100%); 
  border-radius: 50%; 
  width: 300px; 
  height: 300px; 
}

12. Übergänge

Transition ist eine sehr nützliche CSS-Eigenschaft für einen sanften Farbwechsel beim Hovern auf einem Element. Sie hilft dabei, Hover-Effekte nicht nur auf Links, sondern auch auf andere Elemente zu erzeugen. Diese Effekte sind optisch ansprechend und ermöglichen einen sanften Farbwechsel. Hier ist eine grundlegende Implementierung eines CSS-Übergangs auf Links.

a { 
 color: #1b80b7; 
 transition: all .2s linear; 
}
a:hover { color: #52bff2; }

Du kannst diese Technik sogar dazu benutzen, weitaus fortgeschrittenere und kreativere Hover-Effekte zu erzeugen. Der Übergang erlaubt es dir, verschiedene Eigenschaften eines Elements wie Höhe, Breite, Hintergrund usw. zu animieren.

13. Zähler bzw. Counter

Mit CSS-Zählern kannst du deine nummerierten Listen gestalten. Mit Hilfe von Zählern könntest du das Aussehen deines Inhalts anpassen, je nachdem, wo er sich auf einer Webseite befindet. Es könnte ein recht nützlicher Hack sein, wenn es um das Gestalten deiner nummerierten Listen geht.
Mit der Implementierung eines CSS-Zählers kannst du folgendes:

Den Zähler-Wert mit counter-increment erhöhen/verringern
Benutze die counter() oder counterters() Funktion, um den Zählerwert innerhalb der Content-Eigenschaft anzuzeigen.

ol.numbered-list > li:before { 
  content: counter(li); 
  position: absolute; 
  box-sizing: border-box; 
  width: 45px; 
  height: 45px; 
  background: #f3b70f; 
  border-radius: 50%; 
} 

ol.numbered-list li { 
  position: relative; 
  left: 0px; 
  list-style: none; 
  counter-increment: li; 
}

14. ::selection

Mit dem "::selection" Pseudo-Element kannst du die Farbe der Textauswahl ändern, indem du auf Browserebene die Farbe der Textauswahl durch deine definierte Farboption ersetzt. Deine gewählte Farbe würde erscheinen, wenn der Inhalt mit dem Cursor ausgewählt wird.

:selection { 
  background-color: #f3b70f; 
}

15. Beschädigte Bilder "aufhübschen"

Schlechte Webdesigns haben oft keine Möglichkeit, mit kaputten Bildern umzugehen. Wenn dann ein Bild fehlt, sieht die Webseite nicht gut aus. Wenn man bedenkt, dass das Problem hin und wieder auftreten kann, könnte man fortgeschrittenes CSS verwenden, um unterbrochene oder beschädigte Bilder anzupassen und deine benutzerdefinierten Fehlermeldungen für die Besucher präsentabel aussehen zu lassen. Hier siehst du, wie du das machen kannst:

img { 
  font-family: 'Helvetica'; 
  font-weight: 300; 
  line-height: 2;   
  text-align: center; 
  width: 100%; 
  height: auto; 
  display: block; 
  position: relative; 
} 

img:before {  
  content: "We're sorry, the image below is broken :("; 
  display: block; 
  margin-bottom: 10px; 
} 

img:after {  
  content: "(url: " attr(src) ")"; 
  display: block; 
  font-size: 12px; 
}

Hier verwenden wir :before und :after Pseudo-Klassen, um im Falle eines fehlenden/unterbrochenen Bildes Fehlermeldungen anzuzeigen. Der Wert der src-Eigenschaft wird mit der attr()-Funktion in CSS zurückgegeben und zeigt die fehlerhaften URLs an.

16. @support

Wenn du eine CSS-Eigenschaft verwendest, die von den meisten Webbrowsern nicht unterstützt wird, raten wir dir, eine Feature-Abfrage zu verwenden, die als @Support-Regel bekannt ist. Sie hilft dir herauszufinden, ob der Browser die CSS-Eigenschaft unterstützt: Wertepaare oder nicht. Jeder Code, den du in den @support-Block eingefügt hast, wird nur dann gerendert, wenn die Bedingung wahr ist. Und wenn der Browser @support nicht versteht, wird er den angegebenen Code nicht generieren.

@supports (text-stroke: 4px navy;) { 
  .example {
    text-stroke: 4px navy;
  } 
}

Auch wenn du bei der Verwendung einiger Eigenschaften noch Probleme mit der Browserkompatibilität haben könntest, empfehlen wir dir, sie zu verwenden und sie trotzdem in den @Support-Block einzufügen. Browser haben jetzt vielleicht eingeschränkten Support, aber es ist wahrscheinlich, dass sie in Zukunft gängige Praxis werden. Wenn du sichergehen willst, dass der Browser diese bestimmten Stileffekte unterstützt, dann packe deine Stile in die @support-Regel ein.
Wie gefallen dir also diese CSS-Eigenschaften und -Regeln. Front-End-Webentwickler kennen hiervon tatsächlich häufig nur die wenigsten. Natürlich gibt es noch viel mehr über CSS zu erfahren, aber hier haben wir dir sicherlich einen guten Start in das Thema verschafft. Versuche diese CSS-Geheimnisse noch heute zu implementieren und mache deine zukünftigen Webdesigns besser.

16 Geheimnisse zu CSS mit denen man Web-Designs verbessern kann