CSS - Tricks

Dreiecke per CSS ?

1.12.2011 von Dr. Florence Maurice

ca. 2:25 Min
Ratgeber
VG Wort Pixel
  1. 3D-Effekte mit CSS
  2. Dreiecke per CSS ?
  3. Schatten und Farbverläufe

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.
Ein Rahmen mit unterschiedlich eingefärbten Segmenten (oben) bildet die Grundlage für die Gestaltung verschiedener Formen.
© Internet Magazin

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.
Ein rein über CSS erzeugtes 3D-Ribbon.
© Internet Magazin

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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.