CSS - Tricks

Dreiecke per CSS ?

Der richtige Wert für left ergibt sich aus der Breite des Mittelteils, muss dann aber sauber an das kleine Dreieck anschließen. Apropos Dreiecke ...

Dreiecke per CSS ?

Ein Rahmen mit unterschiedlich eingefärbten Segmenten (oben) bildet die Grundlage für die Gestaltung verschiedener Formen.

© Internet Magazin

Ein Rahmen mit unterschiedlich eingefärbten Segmenten (oben) bildet die Grundlage für die Gestaltung verschiedener Formen.

Wenn Sie einem Element einen breiten Rahmen geben und die Rahmenbereiche unterschiedlich einfärben, sehen Sie, dass die Rahmenteile diagonale Schnittstellen an den Ecken haben. Gibt man dem Element selbst eine Breite und Höhe von 0 Pixel, bleiben die vier kleinen Dreiecke der Rahmen übrig. Daraus lassen sich einzelne Dreiecke gewinnen, indem man Teile der Rahmen transparent einfärbt; weitere Variationen ergeben sich dadurch, dass für ausgewählte Rahmenteile 0 Pixel Breite definiert werden.So werden kleine Dreiecke erzeugt. Allgemeine Angaben für beide Dreiecke:

.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
position: absolute;
z-index: 1;
border-style: solid;
height: 0px;
width: 0px;
top: 100px;
}

Nun die Sonderangaben für das Dreieck links (Nummer 4) ...

.ribbon-edge-bottomleft {
left: -10px;
border-color: transparent
#ad151d transparent transparent;
border-width: 0 10px 10px 0;
}

... und für das rechte (Nummer 5):

.ribbon-edge-bottomright {
left: 903px;
border-color: transparent
transparent transparent #ad151d;
border-width: 0 0 10px 10px;
}

Ein rein über CSS erzeugtes 3D-Ribbon.

© Internet Magazin

Ein rein über CSS erzeugtes 3D-Ribbon.

Und fertig ist das 3D-Ribbon. Nach diesem Prinzip lassen sich die vielfältigsten Figuren zeichnen. Etwa 3D-Würfel, deren Seitenteile man einfärbt und gegebenenfalls nach hinten verjüngt, um Perspektive zu simulieren. Eine andere Möglichkeit, solche Formen zu erstellen, bieten CSS3 Transforms, allerdings mit schlechterer Browserunterstützung.

Texte hervorheben oder eingravierenUm Texte mit Licht und Schatten zu versehen, gibt es text-shadow. Hinter text-shadow werden drei Zahlenwerte und eine Farbangabe erwartet - ganz ohne herstellerspezifisches Präfix. Das Beispiel definiert einen diskreten, leichten Schatten, wodurch der Text etwas erhaben wirkt.

text-shadow: 0px 1px 1px #444;

Die Farbe des Schattens - im Beispiel grau - kann am Anfang oder Ende stehen. Bei den drei Längenangaben ist die Reihenfolge hingegen relevant:

  • Der erste Wert (0px) bestimmt die Position des Schattens von rechts aus.
  • Der zweite Wert legt die Position des Schattens von oben fest (1px).
  • Der dritte Wert definiert den Grad der Unschärfe (1px). Je höher der Wert, desto verschwommener ist der Schatten.
Beim ersten und zweiten Wert können Sie auch negative Werte angeben. Dann wird der Schatten in die entgegengesetzte Richtung verschoben. Durch die folgende Definition lassen Sie Text wie eingraviert wirken. Eingesetzt werden zwei Schatten gleichzeitig. Da es in der Realität meistens auch mehrere Lichtquellen und damit mehrere unterschiedlich starke Schatten gibt, sind mehrfache Schatten ein spannendes Feature.
background-color: #333;
color: #555;
text-shadow: -1px -1px 1px #fff,
1px 1px 1px #000;
opacity: 0.5;

Textsäulen

Beliebt sind mit text-shadow realisierte Textsäulen. Dafür benötigt man mehrere Textschatten, die jeweils um ein Pixel verschoben und gleichzeitig immer dunkler werden:

text-shadow:
0px 1px 0px #999, 0px 2px 0px #888,
0px 3px 0px #777, 0px 4px 0px #666,
0px 5px 0px #555, 0px 6px 0px #444,
0px 7px 0px #333, 0px 8px 0px #222;

text-shadow im IE

Alle modernen Browser unterstützen die Textschatten - mit Ausnahme des Internet Explorer. Erstaunlich ist insbesondere, dass der IE 9 nicht nachzieht und selbst im IE 10 nichts in dieser Art angekündigt ist. Einfache Schatten können Sie über verschiedene Filter nachbilden, beispielsweise über den DropShadow-Filter. Bei diesem können Sie die Farbe und die Verschiebung angeben; mehrere Filterangaben lassen sich auch kombinieren.

text-shadow: -1px -1px 0px #010101,
1px 1px 0px #666;
filter:progid:DXImageTransform.
Microsoft.DropShadow(color:#010101, offx=-1, offy=-1) progid:DXImageTransform.Microsoft.DropShadow(color:#666666, offx=1, offy=1);
zoom: 1;

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".