CSS Dreiecke

.

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

Toller Text!
mit nützlichen Infos

HTML

<div>
 Toller Text!<br>
 mit n&uuml;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;
}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

WhatsApp chat

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen