Ein Kriterium für die Qualität einer Webseite ist die Ladegeschwindigkeit. Diese ist u.a. von der zu übertragenden Datenmenge abhängig. Um diese möglichst gering zu halten gibt es die Möglichkeit Dreiecke mit reinem CSS darstellen zu können. Dadurch können oft Teile des Templates durch reines CSS ersetzt werden, wodurch man weniger der speicherintenisven Bilder braucht. Weil es nur sehr begrenze Dokumentation dazu im Netz gibt, möchte ich euch die Grundlagen vorstellen. Eine Demonstration ist neben diesem Abschnitt zu sehen.
.css-dreieck {
border-color: red green blue orange;
border-style:solid;
border-width:25px;
width:0;
height:0;
}
Durch das Anpassen der border-width kann man die Dreiecke in beliebige Form bringen. Dadurch ist der Kreativität keine Grenze mehr gesetzt. Es können auch mehrere Dreiecke zu komplexen Formen zusammengesetzt werden. Wenn man nur einzelne Dreiecke haben möchte so kann man die
übrigen Dreiecke ausblenden, indem man Ihnen die Farbe “transparent” zuweist (Hinweis IE6).
.css-dreieck {
border-color: red green blue orange;
border-style:solid;
border-width:30px 10px 20px 30px;
width:0;
height:0;
}
Durch Anpassen des border-style können schöne, auf den ersten Blick unerwartete Formen erzeugt werden:
border-style:dotted;
border-style:dashed;
border-style:outset;
border-style:inset;
border-style:ridge;
border-style:groove;
border-style:double;
IE6
Im IE6 funktioniert diese Technik nicht, weil er die Farbe „Transparent“ nicht kennt. Es gibt aber eine ebenso einfache wie geniale Lösung. Man weist den auszublendenden Dreiecken eine Farbe zu, die sonst nirgends verwendet wird und blendet diese anschließend über die CSS-Eigenschaft Chroma komplett aus.
.css_dreieck{
_border-left-color: pink;
_border-bottom-color: pink;
_border-right-color: pink;
_filter: chroma(color=pink);
}
Praktisches Beispiel mit CSS Dreiecken
Um den Nutzen zu demonstrieren folgt eine Sprechblase, die normalerweise mit hilfe von 3 Bildern erstellt wird: jeweils ein Bild für den oberen und unteren Bereich der Sprechblase, sowie ein Bild für den mittleren Teil, der je nach Textmenge mehrfach nach unten wiederholt werden würde. In diesem Beispiel, dass in allen Browsern funktioniert, wird ausschließlich CSS eingesetzt. Das hat neben der geringen Datenmenge auch andere Vorteile:
- Farben können durch eine einzige Zeile im CSS angepasst werden
- Die Breite der Box kann schnell beliebig angepasst werden
.sprechblase {
background-color:#EDEDED;
border:2px solid #666666;
font-size:35px;
line-height:1.3em;
margin:10px auto;
padding:10px;
position:relative;
text-align:center;
width:300px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
}
.sprechblase_dunkles_freieck {
border-color: #666666 transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-22px;
_bottom:-66px;
left:30px;
}
.sprechblase_helles_freieck {
border-color: #EDEDED transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
_bottom:-63px;
left:30px;
}
mit nützlichen Infos
HTML
<div> Toller Text!<br> mit nützlichen Infos <div></div> <div></div> </div>
CSS
.sprechblase {
background-color:#EDEDED;
border:2px solid #666666;
font-size:35px;
line-height:1.3em;
margin:10px auto;
padding:10px;
position:relative;
text-align:center;
width:300px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
}
.sprechblase_dunkles_freieck {
border-color: #666666 transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-22px;
_bottom:-66px;
left:30px;
}
.sprechblase_helles_freieck {
border-color: #EDEDED transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
_bottom:-63px;
left:30px;
}
Kommentare