Denis Potschien 20. November 2017

CSS3 für 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.

CSS3 für Designprofis: Vier Eigenschaften, die du kennen und nutzen solltest

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“).

CSS3 für Designprofis: Vier Eigenschaften, die du kennen und nutzen solltest

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.

CSS3 für Designprofis: Vier Eigenschaften, die du kennen und nutzen solltest

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.

CSS3 für Designprofis: Vier Eigenschaften, die du kennen und nutzen solltest

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.

CSS3 für Designprofis: Vier Eigenschaften, die du kennen und nutzen solltest

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.

(do)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

4 Kommentare

  1. Ist Dir da ein Fehler passiert?
    4 Absatz zu object-fit: „Im Gegensatz zu „contain“ entstehen Ränder am linken und rechten beziehungsweise oberen und unteren Rand.“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.