Autor: Kevin Lieser

HTML5 Tags – Die Website inhaltlich auszeichnen

HTML5 kennt neue Tags wie header, section, article oder nav. Mit diesen ist es möglich, Website-Abschnitte für Crawler von Suchmaschinen wie Google und Co erkennbar auszuzeichnen. Bisher konnten wir diese Bereiche lediglich optisch für den User kenntlich machen. Jetzt definieren wir mit den HTML5 Tags, welcher Bereich unserer Website die entsprechende Aufgabe hat. Und so verstehen ebenfalls die Suchmaschinen diese Segmente und deren Aufgaben. Außerdem sind die HTML5 Tags ein deutlicher Fortschritt in der Barrierefreiheit. Blinde erkennen nun, wo sich eine Navigation und der eigentliche Inhalt befinden – auch ohne die Website komplett zu verstehen. Wir nutzen dazu die folgenden Tags:

<header>

Das <header>-Tag dient dazu, den Kopf sowie die Überschrift einer Seite zu definieren. Es fungiert praktisch als erster Einblick in das Thema. Das <header>-Tag umschließt den gesamten Kopfbereich (Logo, Titel, Überschrift, Navigation) einer Webseite.

<article>

In das <article>-Tag von HTML5 kommt der eigentliche, themenrelevante Inhalt einer Seite. Die Suchmaschine erkennt somit, dass hier der „wichtige“ Bereich dargestellt wird, um den sich die Webseite dreht. Blinden ermöglicht die HTML-Auszeichnung den direkten Sprung mit dem Ausgabegerät in diesen Bereich. Sie lesen so den entsprechenden Artikel – ohne den Anfang zu suchen.

<section>

Mit <section>-Tags teilen wir unseren Inhalt (article) in unterschiedliche Sektionen auf. Jede <section> erhält eine passende Überschrift zu ihrem eigenen Teilthema. Somit können Blinde sofort in den nächsten Abschnitt eines Artikels springen und erhalten direkt die gewünschten Informationen und Inhalte.

Weiterlesen

CSS Silbentrennung (hyphens / hyphenation)

Der neue CSS3 Befehl „hyphens“ aktiviert die in modernen Browser integrierte Silbentrennung, die auch nach der englischen Beschreibung als CSS hyphenation bezeichnet wird.

Im Web funktionierte die Silbentrennung bisher – wenn überhaupt – nur auf Basis sehr rechenintensiver JavaScript-Lösungen. Mit CSS3 ist das vorbei: Dem HTML-Element muss nur die neue CSS Anweisung „hyphens: auto;“ zugewiesen werden. Kombinationen mit CSS Befehlen für Schriften sind natürlich möglich.

Beispiel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

CSS3 Multi-Column / Textspalten

Mittels CSS3 lassen sich mittlerweile auch in modernen Browsern mehrspaltige Text-Layouts erzeugen. Der Vorteil: In nur einem Objekt liegt der entsprechende Content. Ein Content-Bereich für jede Spalte wird nun nicht mehr benötigt. Die Darstellung basiert nun vollständig auf CSS3. Der Nachteil: Der CSS Befehl wird noch nicht von allen Browser unterstützt.

BefehlBedeutungMögliche Werte

column-count

Anzahl der Spalten

Integer / Zahl

column-width

Breite einer Spalte

Integer Wert in Pixel (px), mm, cm

column-span

Objekte, die über mehrere Spalten laufen

Anzahl der Spalten, oder alle (all)

column-rule

Trennlinie zwischen Spalten

Wie border.column-rule: width style color;

column-gap

Abstand zwischen Spalten

Integer Wert in Pixel (px), mm, cm

columns

Kombination / vereinfachte Schreibweise

z.B. „columns: 3 200px;“ erzeugt 3 Spalten á 200 Pixel Breite

CSS3 Gradients: Verläufe ohne Grafiken

Auch einfache und sogar aufwändigere Verläufe (Gradients) sind für CSS3 kein Problem mehr. Der neue Standard kennt Verläufe linear, radial, diagonal, zweifarbig, mehrfarbig und mit Transparenz. Hier kommt lediglich der Browser zum Tragen: Manche sehr alte Browser unterstützen noch keine Verläufe. Andere bieten hingegen Support für zweifarbige, lineare Verläufe und wieder andere beherrschen die gesamte Palette (zum Beispiel moderne Versionen von Safari, Firefox, Chrome). Da die CSS Befehle für Verläufe „per Hand“ sehr aufwändig zu definieren sind, gibt es hier ein tolles Tool, um CSS3 Verläufe zu erstellen. Der Vorteil des Tools: Es werden  – soweit möglich – auch Fallbacks für ältere Browser mitgegeben.

Beispiele

.element {
    background: rgb(246,248,249);
    background: -moz-linear-gradient(45deg,  rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
    background: -webkit-linear-gradient(45deg,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
    background: -o-linear-gradient(45deg,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
    background: -ms-linear-gradient(45deg,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
    background: linear-gradient(45deg,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=1 );
}
.element {
    background: rgb(230,240,163);
    background: -moz-linear-gradient(top,  rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,240,163,1)), color-stop(50%,rgba(210,230,56,1)), color-stop(51%,rgba(195,216,37,1)), color-stop(100%,rgba(219,240,67,1)));
    background: -webkit-linear-gradient(top,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%);
    background: -o-linear-gradient(top,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%);
    background: -ms-linear-gradient(top,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%);
    background: linear-gradient(to bottom,  rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 );
}

CSS3 Transform: HTML Elemente einfach transformieren

Mittels „Transform“ drehen, skalieren (vergrößern/verkleinern), verschieben oder verzerren wir HTML Elemente per CSS3. Am besten einmal den CSS3 Generator ansehen und mit „Transform“ experimentieren. Fügen wir CSS Transitions (siehe CSS3 Generator) hinzu können wir Transforms sowie sämtlich weitere CSS Befehle animiert wiedergeben bzw. wechseln bei z.B. Hover.

.element {
    background:#f73791;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height:400px;
    color:#ffc6e1;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
  
.element.sec {
    background:#ff5400;
    color:rgb(255,255,255);
    height:200px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    padding-top:50px;
    padding-bottom:50px;
}

.element.trd {
    background:#baff00;
    color:rgb(45,45,45);
    height:300px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    padding-top:40px;
    padding-bottom:90px;
}

CSS RGBA: Transparenz und Farbe gleichzeitig definieren

Das neue Feature RGBA erlaubt es uns, in den CSS Dateien und Tags eine Farbe mittels RGB Werten anzugeben und zusätzlich eine Transparenz zu schaffen. Möchten wir einen roten Hintergrund mit 50% Transparenz, definieren wir background-color:rgba(255,0,0,0.5);. Der letzte Parameter des rgba-Befehls gibt die Transparenz an. Alternativ kann auch mit opacity das Innere der Box per CSS transparent dargestellt werden.

Beispiele

Ohne RGBA
.element {
    background:rgb(0,0,0);
}
Mit RGBA – 20%
.element {
    background:rgba(0,0,0,0.2);
}
Mit Opacity (Inhalt und Rahmen wird ebenfalls transparent)
.element {
    background:rgb(0,0,0);
    opacity:0.2;
}

CSS Border Radius: abgerundete Ecken mit Style Sheets

Mit der Anweisung „border-radius“ geben wir Objekten abgerundete Ecken mit. Hintergrundfarben, Box-Schatten oder Rahmen werden in die Rundung einbezogen. Diese erscheinen ebenfalls in der entsprechend gewählten Rundung. Um den Code für einen entsprechenden Border-Radius zu erhalten können wir einfach erneut den CSS3 Generator bemühen. Dieser generiert uns sauber und inkl. der aktuellen Experimental-Prefixes unseren CSS3 Code.

Beispiele

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    -webkit-border-radius: 10px 20px 30px 40px;
    -moz-border-radius: 10px 20px 30px 40px;
    border-radius: 10px 20px 30px 40px;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    -webkit-border-radius: 15px / 30px;
    -moz-border-radius: 15px / 30px;
    border-radius: 15px / 30px;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    -webkit-border-radius: 10px 80%;
    -moz-border-radius: 10px 80%;
    border-radius: 10px 80%;
    overflow:hidden;
}

CSS: Box Shadow / Boxschatten und Text Shadow / Textschatten

Wie der Name schon sagt, erzeugen wir mit dem Box-Shadow (box-shadow) bzw. Text-Shadow (text-shadow) per CSS3 – ganz ohne Grafiken oder Hintergrundbilder – einen Schatten in einem Element oder auf einem Text. Wir können die Schatten-Verschiebung, die Weichzeichnung nach außen sowie den Überfluss einstellen. Der Überfluss regelt dabei, ab wann der Schatten weichgezeichnet wird. Ebenso können wir eine Schattenfarbe zuweisen. Komma-separiert ist es möglich, mit diesen CSS Befehlen auf Elementen mehrere Schatten zu definieren.

Weitere Anpassungen der Schriftdarstellung bieten CSS Befehle für Schriften. Für Rahmen und Innenabstände sowie Außenabstände gibt es ebenfalls CSS Anweisungen.

Beispiele

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    -webkit-box-shadow:  3px 3px 3px 1px rgba(230, 200, 40, 0.5);
    -moz-box-shadow:  3px 3px 3px 1px rgba(230, 200, 40, 0.5);
    box-shadow:  3px 3px 3px 1px rgba(230, 200, 40, 0.5);
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    -webkit-box-shadow:  1px 1px 1px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:  1px 1px 1px 0px rgba(0, 0, 0, 0.6);
    box-shadow:  1px 1px 1px 0px rgba(0, 0, 0, 0.6);
  
    text-shadow: 2px 2px 1px #000000;
    filter: dropshadow(color=#000000, offx=2, offy=2);
}