CSS-Tricks: Nützliche Snippets für Ihr Web­pro­jekt

CSS (Cascading Style Sheets) hat das World Wide Web grund­le­gend verändert. Mussten die Dar­stel­lungs­an­wei­sun­gen für Layout, Ty­po­gra­fie und Co. zuvor noch mühsam im HTML-Dokument der je­wei­li­gen Webseiten pro­gram­miert werden, hat die Style­sheet-Sprache innerhalb kürzester Zeit dafür gesorgt, dass diese un­fle­xi­ble Ge­stal­tungs­me­tho­de der Ver­gan­gen­heit angehörte. Dar­stel­lungs­ori­en­tier­te HTML-Elemente gelten spä­tes­tens seit HTML5 als veraltet – Gegenwart und Zukunft gehören der ge­trenn­ten Be­hand­lung von Inhalt und Ge­stal­tung.

CSS wird als Living Standard (dt. „le­ben­di­ger Standard“) stetig wei­ter­ent­wi­ckelt, was immer viel­sei­ti­ge­re und kom­ple­xe­re Ge­stal­tungs­mög­lich­kei­ten eröffnet, im Gegenzug aber zunehmend den Überblick erschwert. Hier finden Sie die in­ter­es­san­tes­ten und nütz­lichs­ten Tricks inklusive der da­zu­ge­hö­ri­gen CSS-Snippets.

Über­schrif­ten num­me­rie­ren

Wenn Sie in Ihrem HTML-Dokument ver­schie­de­ne Über­schrif­ten und Zwi­schen­über­schrif­ten führen, die num­me­riert werden sollen, machen Sie dies wahr­schein­lich manuell oder per Script. Statt­des­sen können Sie aber auch einfach CSS zur Hilfe nehmen und die Style­sheet-Sprache für Sie zählen lassen. Diesen alten CSS-Trick, der von allen gängigen Browsern un­ter­stützt wird, nutzen Sie mit folgendem CSS-Snippet:

#Überschriften {
counter-reset: heading;
}
h1:before {
  content: counter(heading)") ";
  counter-increment: heading;
}
h1 {
  counter-reset: subheading;
}
h2:before {
  content: counter(heading)"." counter(subheading)") ";
  counter-increment: subheading;
}
body{
  font-family: courier new;
}

Das Ergebnis sieht fol­gen­der­ma­ßen aus:

Close

Elemente SEO-freund­lich ver­ste­cken

Inhalte des HTML-Dokuments in der Website-Anzeige mithilfe von Befehlen wie display: none; oder vi­si­bi­li­ty: hidden; zu ver­ste­cken, kommt bei den Such­ma­schi­nen nicht gut an. Auch wenn die über­mä­ßi­ge Ver­wen­dung nicht zu empfehlen ist, bietet der folgende Code eine ex­zel­len­te Mög­lich­keit, diese beiden Elemente gekonnt zu umgehen:

.hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Text­schat­ten erzeugen

Natürlich können Schat­tie­run­gen in Texten auch aufwendig mithilfe von Gra­fik­pro­gram­men pro­du­ziert werden, aber das erfordert ei­ner­seits das not­wen­di­ge Know-how und macht an­de­rer­seits den Inhalt für Such­ma­schi­nen nicht mehr lesbar. Spä­tes­tens seit Version 3 der Style­sheet-Sprache gibt es ver­schie­de­ne CSS-Effekte, die mit­ein­an­der kom­bi­niert ebenso hübsche Er­geb­nis­se liefern und das zu­grun­de­lie­gen­de Text­ele­ment nicht verändern. Der folgende CSS-Tipp zeigt bei­spiel­haft die Schat­tie­rungs­op­tio­nen der Style­sheet-Sprache:

p {
font-size: 50pt;
font-family: sans-serif;
text-shadow: 10px 11px 18px rgba(300, 180, 100, 1),
-10px -11px 18px red;
}

Mithilfe dieses Codes werden also <p>-Elemente da­hin­ge­hend definiert, dass sie zwei Schatten (text-shadow) besitzen. Diese Anzahl lässt sich beliebig erweitern – achten Sie dabei immer auf die Ab­tren­nung durch ein Komma. Die beiden ersten Angaben bestimmen die Po­si­tio­nie­rung des Schattens – zunächst die X-Ko­or­di­na­te, an zweiter Stelle die Y-Ko­or­di­na­te. Die dritte Angabe definiert die Größe. An letzter Stelle geben Sie die Farbe des Schattens an, entweder per RGBA-Angabe (300, 180, 100, 1) wie in der ersten Zeile oder absolut wie in der zweiten (red). An­ge­wen­det lässt das Beispiel-Snippet den Text fol­gen­der­ma­ßen aussehen:

Close

Website-Elemente mit CSS-Filtern verändern

CSS ist nicht nur in Sachen Schat­tie­run­gen eine gute Al­ter­na­ti­ve zu Photoshop: Die Style­sheet-Sprache bringt auch nützliche Fil­ter­ef­fek­te mit sich, ähnlich wie die des Bild­be­ar­bei­tungs­pro­gramms. So lassen sich z. B. Grafiken, Hin­ter­grün­de, Texte oder Videos ge­stal­te­risch anpassen, indem man die Hel­lig­keit erhöht, der Kontrast verändert oder Grau­stu­fen verwendet. Die Fil­ter­me­tho­den stehen in nahezu allen modernen Browsern (außer dem Internet-Explorer) zur Verfügung. Die Syntax dieser CSS-Effekte sehen Sie hier am Beispiel des Grau­stu­fen-Filters:

.grayscale {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

Der Fil­ter­an­ga­be, in diesem Fall grayscale, folgt in Klammern der spe­zi­fi­sche Wert, der die Stärke des Filters bestimmt – hier ent­spricht der Wert (1) 100 Prozent.

Close

Close

Weitere nützliche Filter:

Bild­un­ter­schrif­ten optimal aus­rich­ten

Für be­schrei­ben­de Text­aus­zü­ge unter Bildern lässt sich keine ein­heit­li­che Richt­li­nie festlegen. Eine Zen­trie­rung der Bild­un­ter­schrift sieht zwar gut aus, wenn diese nicht länger als eine Zeile ist; an­dern­falls ist diese Aus­rich­tungs­art eher unpassend. An­de­rer­seits ist eine links­bün­di­ge Aus­rich­tung bei kurzen Bild­un­ter­schrif­ten oftmals die un­schö­ne­re Variante. Die Lösung besteht darin, separate Angaben im Container-Element <figure> sowie im ent­hal­te­nen Element <figcaption> vor­zu­neh­men, die beide stan­dard­mä­ßig bei Bild­un­ter­schrif­ten zum Einsatz kommen. Das ent­spre­chen­de CSS-Snippet:

figure {
  text-align: center; 
}

figcaption {
  display: inline-block; 
  text-align: left;
}

Dieser CSS-Trick bewirkt, dass die Bild­un­ter­schrift per De­fi­ni­ti­on zwar links­bün­dig ist, aufgrund der inline-block-Angabe al­ler­dings zentriert angezeigt wird, wenn der Text­aus­zug nicht über die volle Breite des Bildes geht.

Den ersten Buch­sta­ben in Text­aus­zü­gen her­vor­he­ben

Mithilfe so­ge­nann­ter Pseu­do­klas­sen ist es möglich, einzelne spe­zi­fi­sche HTML-Elemente wie z. B. den ersten Buch­sta­ben eines Absatzes her­vor­zu­he­ben. Mit ::first-letter lässt sich auf einfache Weise das typische Layout von Er­zäh­lun­gen, ins­be­son­de­re Märchen, umsetzen:

p{
  font-family: "bookman old style";
}
p:first-child::first-letter{
  font-family: "papyrus";
  font-size: 25px;
  font-weight: bold;
}

In diesem spe­zi­el­len Snippet sind bei­spiel­haft die typischen Font-Familien Papyrus für den ersten Buch­sta­ben und Bookman Old Style für den rest­li­chen Text verwendet worden. Das Resultat:

Close

Den Parallax-Effekt nutzen

Viele moderne Websites bauen auf den Parallax-Effekt, den Besucher beim Scrollen auslösen. In der Regel wird dieser Effekt, der die Bewegung des Hin­ter­grunds langsamer als die der Elemente im Vor­der­grund er­schei­nen lässt, in Kom­bi­na­ti­on mit Ja­va­Script oder mithilfe von jQuery rea­li­siert. Der folgende CSS3-Trick zeigt hingegen bei­spiel­haft, wie Sie das Parallax-Scrolling allein mit der Style­sheet-Sprache in Ihre Website einbauen können:

p {
  width: 100%;
  margin: auto;
  font-size: 50px;
  transform: scale(.5);
  font-family: courier new;
  font-weight: bold;
}

div {
  background-image: url("URL DES HINTERGRUNDBILDES");
  background-attachment: fixed;
  transform: scale(1.25);}

body {
  height: 100%;
  overflow: scroll;
}

Beim Parameter back­ground-image: url geben Sie die URL des Hin­ter­grund­bilds an. Die hier ein­ge­setz­ten Werte hin­sicht­lich Ty­po­gra­phie und Größe der Elemente können Sie in­di­vi­du­ell anpassen.

Zwingend er­for­der­li­che For­mu­lar­fel­der her­vor­he­ben

Mithilfe von :required und :optional op­ti­mie­ren Sie die in Ihre Website ein­ge­bun­de­nen Formulare. Die beiden Pseu­do­klas­sen er­mög­li­chen es, farblich zu kenn­zeich­nen, welche For­mu­lar­fel­der unbedingt aus­ge­füllt werden müssen und welche optional sind. Das passende CSS-Snippet sieht in etwa fol­gen­der­ma­ßen aus:

:required {
  border: 1px solid red;
}

:optional {
border: 1px solid black;
}

In diesem Fall erhalten die er­for­der­li­chen Felder eine rote Umrandung, während optionale Felder mit einem schlich­ten schwarzen Rahmen angezeigt werden:

Close

Listen mit drei­ecki­gen Auf­zäh­lungs­zei­chen

Wenn Sie un­ge­ord­ne­te Auf­zäh­lun­gen in Ihrem HTML-Dokument haben, müssen diese nicht immer mit den stan­dard­mä­ßi­gen runden Bul­let­points versehen werden. Mit dem folgenden CSS-Trick erstellen Sie ganz einfach drei­ecki­ge Auf­zäh­lungs­zei­chen:

ul {
  margin: 0.75em 0;
  padding: 0 1em;
  list-style: none;
}

li:before {
  content: "";
  border-color: transparent #111;
  border-style: solid;
  border-width: 0.35em 0 0.35em 0.45em;
  display: block;
  height: 0;
  width: 0;
  left: -1em;
  top: 0.9em;
  position: relative;
}

Das Ergebnis sieht wie folgt aus:

Close