Kategorie: CSS Befehle

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);
}

CSS Pseudo-Klassen

Mit CSS Pseudo-Klassen lassen sich Elemente in Ihren Positionen oder Eigenschaften ohne zusätzliche CSS Klassen ansprechen. Wir nutzen also die Möglichkeiten des Browsers oder Positionen des Elements im HTML Markup. So lassen sich – zumindest in modernen Browsern – ganz einfach entsprechende Elemente selektieren und Style-Angabe definieren.

Eigenschaften Pseudo-Klassen

:hover

Durch die :hover Pseudo-Klasse lässt sich ein Mouse-Over Effekt nutzen. Mit diesem CSS Befehl werden oft Links beim Überfahren mit der Maus optisch anders dargestellt. Modifizieren lassen sich unter anderem Farbe und Unterstreichen. In modernen Browsern wird diese Pseudo-Klasse auch auf normalen, nicht Link-Elementen berücksichtigt. Somit können wir via CSS3 eine ganze aufklappbare Navigation erstellen (:hover & display).

:visited

Mit der CSS Pseudo-Klasse :visited lässt sich bereits besuchter Link grafisch anders darstellen und signalisiert so dem Besucher, dass er diese Seite bereits besucht hat.

:active

Die Pseudo-Klasse :active ermöglicht es, Links auf der aktuell geöffneten Seite anders darzustellen.

Positions Pseudo-Klassen

:first-child

Mit :first-child werden Elemente selektiert und angesprochen die nach dem entsprechenden Muster das erste „Kind-Element“ darstellen.

:last-child

Last-Child funktioniert genau wie First Child, jedoch wird hierbei das letzte Kind-Element der entsprechenden Selektion angesprochen.

:first-line

Fügt Style-Definitionen auf die erste Textzeile des selektierten Elements hinzu.

:first-letter

Mit First-Letter kann man das Aussehen des ersten Zeichens eines Elements anpassen.

:nth-child( <odd/even/Zahl> )

Mit der Pseudo-Klasse :nth-child lassen sich alle gerade bzw. ungeraden Elemente ansprechen. Ein einfaches Anwedungsbeispiel wären Tabellenzeilen oder Listen. So könnte man jede zweite Zeile mit einer leicht anderen Farbe hinterlegen. Auch ist es möglich dort z.B. jedes dritte Element (3n) anzusprechen. Zusätzlich ist es möglich jedes dritte Element – jedoch erst ab dem zweiten Element – anzusprechen (3n+2).

Wert Pseudo-Klassen

[attr=value]

Ebenfalls können wir Elemente direkt nach Attributen und entsprechenden Werten selektieren. Ein einfaches Beispiel: Wir selektieren alle Input-Felder vom Typ „Submit“: input[type=submit]