Quelle: https://www.drweb.de/css3-fuer-designprofis-vier-eigenschaften-die-du-kennen-und-nutzen-solltest/
Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010…
Mit der Einführung von CSS3 haben sich die Gestaltungsmöglichkeiten für Websites sehr verändert. Vor allem Animationen und Transparenzen werden seitdem häufig eingesetzt. Doch es gibt auch eine Reihe von Eigenschaften, die nur selten Verwendung finden. Dabei ist mangelnde Browserunterstützung meist kein Grund mehr, auf diese Möglichkeiten zu verzichten. Vier solcher zu Unrecht vernachlässigter CSS3-Eigenschaften solltet ihr bei eurem nächsten Projekt daher unbedingt mal ausprobieren.
CSS3-Tipp 1: Individuelle Rahmen mit „border-image“
Die individuelle Gestaltung von Rahmen war in den Zeiten vor CSS3 faktisch gar nicht möglich. Zwar gab es eine Auswahl vordefinierter Rahmen – zum Beispiel einfache, doppelte und gepunktete –, aber sehr viel mehr war nicht machbar.
Rahmengrafik
Mit der CSS3-Eigenschaft „border-image“ hingegen lassen sich Rahmen ganz individuell über eine Grafik gestalten. Dazu wird die Grafik in neun Bereiche eingeteilt. Die acht äußeren Bereiche stellen dabei den Rahmen beziehungsweise die Rahmenecken dar.
p {
border: 30px solid transparent;
border-image: url("rahmen.png") 30 round;
}
Das Beispiel zeigt, wie ein Rahmen definiert wird. Zunächst wird per “url()” die Webadresse der Grafik angegeben. Der zweite Wert definiert, wie die Grafik in ihre neun Bestandteile zerlegt werden soll. Im Normalfall sind alle neun Flächen gleich groß (also eine Drittelteilung). Du kannst aber auch andere absolute Werte in Pixel (ohne Angabe einer Einheit) oder prozentuale Werte (dann mit Prozentzeichen) angeben.
Der letzte Wert gibt an, ob die Linien einfach nur wiederholt (repeat“), wiederholt und dabei gerundet („round“), oder ob sie nicht wiederholt und dafür einfach auf die gesamte Breite beziehungsweise Höhe gezogen werden sollen („stretch“).
Rahmen gerundet, einfach wiederholt und langgezogen
Die Breite des Rahmens wird nach wie vor per „border“ beziehungsweise „border-width“ definiert. Um den Standardrahmen zu verbergen, solltest du die Rahmenfarbe wie im Beispiel auf „transparent“ setzen.
„border-image“ wird von allen gängigen Browsern wie dem Internet Explorer, Chrome, Firefox und Safari unterstützt.
CSS3-Tipp 2: Nummerierung mit „counter-reset“ und „counter-increment“
Nummerierte Listen mit dem „<ol>“-Element sind seit jeher kein Problem. Schwieriger wird es jedoch, wenn man jenseits dieses Elementes zum Beispiel Überschriften innerhalb eines Dokumentes automatisch nummerieren möchte. Hier kommen die verschiedenen „counter“-Eigenschaften zum Einsatz.
Nummerierte Überschrift
Zunächst definierst du einen Counter für dein Dokument, indem du der Eigenschaft „counter-reset“ einen beliebigen Namen vergibst. Diese Eigenschaft setzt den definierten Counter also wieder auf Anfang. Du kannst beliebig viele unabhängige Counter definieren.
body {
counter-reset: kapitel;
}
Anschließend wählst du ein Element, auf welches du den Counter anwenden möchtest und weist ihm die Eigenschaft „counter-increment“ mit dem Counternamen zu. Über die Funktion „counter()“ kannst du anschließend per „::before“ oder „::after“ die Nummerierung ausgeben lassen.
h2::before {
counter-increment: kapitel;
content: "Kapitel " counter(kapitel) ": ";
}
„counter-reset“ und „counter-increment“ werden von allen gängigen Browsern unterstützt.
CSS3-Tipp 3: Bilder einpassen mit „object-fit“
Statische Webdesigns findet man immer seltener. Zunehmend sind Layouts responsiv oder fluid, sodass sich Elemente immer dem zur Verfügung stehenden Platz anpassen.
Bei Bildern ist dies immer ein wenig problematisch. Häufig werden sie bei unzureichendem Platz einfach herunterskaliert. Mit der Eigenschaft „object-fit“ gibt es jedoch verschiedene Möglichkeiten, wie du sie anpasst. Dazu definierst du zunächst eine Breite und Höhe für das Bild. Wenn diese ein abweichendes Seitenverhältnis besitzen, kommt „object-fit“ zum Einsatz.
Bild ohne „object-fit“ (oben) und mit: „cover“ und „contain“
Mit dem Wert „cover“ sorgt die Eigenschaft dafür, dass das Bild immer sein Seitenverhältnis beibehält und die gesamte Fläche der „“-Elementes ausfüllt. Dabei werden allerdings rechts und links beziehungsweise oben und unten Bereiche abgeschnitten, damit das Bild die gesamte Fläche ausfüllen kann.
Alternativ besteht mit dem Wert „contain“ die Möglichkeit, das Bild so zu skalieren, dass bei Beibehaltung des Seitenverhältnisses immer das gesamte Bild sichtbar ist. Im Gegensatz zu „cover“ entstehen Ränder am linken und rechten beziehungsweise oberen und unteren Rand.
Bis auf den Internet Explorer unterstützen alle gängigen Browser diese Eigenschaft.
CSS3-Tipp 4: Texte beschneiden mit „text-overflow“
Nicht nur Bilder müssen bei besonders kleinen Auflösungen beschnitten werden. Manchmal sind auch Texte zu lang. Bei Fließtext ist dies in der Regel kein Problem. Dieser wird einfach umbrochen. Aber gerade bei Überschriften mit langen Wörtern oder Texten, die ausschließlich einzeilig dargestellt werden, kann es problematisch werden.
Text ohne und mit „text-overflow“
Die CSS3-Eigenschaft „text-overflow“ verhindert, dass Texte einfach über den zur Verfügung stehenden Platz hinausragen, indem sie abgeschnitten und mit Auslassungspunkten versehen werden.
Die Eigenschaft funktioniert aber nicht alleine, sondern in Kombination mit der Eigenschaft „overflow“ und dem Wert „hidden“.
h2 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Im Beispiel wird der Text eines „<h2>“-Elementes per „text-overflow“ beschnitten. Der Wert „ellipsis“ sorgt dafür, dass der beschnittene Text mit Auslassungspunkten versehen wird. Per „white-space“ wird zudem verhindert, dass der Text mehrzeilig wird.
Wird statt „ellipsis“ der Wert „clip“ verwendet, erfolgt die Beschneidung ohne Auslassungspunkte.
Alle gängigen Browser unterstützen diese Eigenschaft.