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 ?

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

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;