Pfeil mit CSS erstellen

Mit dem border-Befehl lassen sich in CSS relativ einfach Pfeile erstellen. Dazu braucht man nichts weiter als drei HTML-Elemente und ein paar Zeilen CSS-Code.

Los geht’s mit dem HTML:

View Code HTML5
<div id="pfeil">
<div class="shape1"></div>
<div class="shape2"></div>
</div>

Dann das CSS:

View Code CSS
#pfeil {
    width: 50px;
    height: 50px;
    position: relative;
    margin-left: 10px;
}
#pfeil .shape1, #pfeil .shape2 {
    border-width: 40px;
    border-style: solid;
    height: 0;
    width: 0;
    border-color: #000 transparent transparent transparent;
    top: 10px;
    position: absolute;
}
 
#pfeil .shape2 {
    top: 0px;
    border-color: #fff transparent transparent transparent;
}

Das Ergebnis:
CSS Pfeil Demo

Die Erklärung will euch natürlich nicht vorenthalten.
Im Grunde werden hier nur zwei Dreiecke erstellt – eins in schwarz und eins in weiß – und dann übereinander gelegt. Dadurch entsteht ein nach unten zeigender Pfeil, der ähnlich aussieht wie in einer Selectbox.
Die Dreiecke entstehen jeweils aus einem viereckigen Element ohne Höhe und Breite und mit einem 40 Pixel dicken Rahmen. Aber nur der obere Rahmen bekommt eine Farbe, alle anderen Seiten bleiben transparent. Dadurch entsteht die dreieckige Form.

Und die Demo dazu gibt es hier:
http://jsfiddle.net/pGanL/1/

HTML/CSS > Unisichtbarer Text

Manchmal braucht man einen unsichtbaren Text, der nur von Suchmaschinen (aus SEO-Gründen) oder Screenreadern gelesen werden kann, normale Besucher der Webseite sollen stattdessen ein Bild sehen können. Um das zu bewerkstelligen verwenden viele die CSS-Eigenschaft display: none;. Die wenigsten wissen allerdings, dass Google den Inhalt anschließend nicht mehr interessiert und auch die meisten Screenreader ignorieren den Text einfach.
Also muss eine andere Lösung her: Opacity. Mit dieser CSS-Eigenschaft lässt sich der Text durchsichtig darstellen und wird somit von Google als normaler Text behandelt.

Beispiel: Eine Überschrift soll den Namen der Webseite enthalten, der normale Seitenbesucher soll aber stattdessen das Logo der Webseite sehen können. Unser HTML-Code dafür sieht so aus:

View Code HTML5
<h1 id="logo"><span>Unsichtaber Name der Webseite</span></h1>

Über CSS wird der Text durchsichtig gemacht und das h1-Element bekommt als Hintergrundbild das gewünschte Logo:

View Code CSS
#logo {
	background: url(alternativ-bild.png);
	width: 200px;
	height: 203px;
}
#logo span {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	-moz-opacity: 0;
	zoom: 1;
	display: block;
	overflow: hidden;
}

Der Trick funktioniert in allen bekannten Browsern – selbst im Internet Explorer 6.

Eine Demo dazu gibt es natürlich auch:
Demo: HTML/CSS > Unsichtbarer Text

display: inline-block; Internet Explorer

Die CSS-Eigenschaft display: inline-block; wird im Internet Explorer 6 und im Internet Explorer 7 eigentlich nicht unterstützt, aber mit einem kleinen Trick lässt sich diese Eigenschaft trotzdem darstellen.

View Code HTML5
<div class="inline_block">Diese beiden Blöcke sind nebeneinander angeordnet...</div>
<div class="inline_block">...und haben trotzdem eine feste Breite.</div>
View Code CSS
/* Neue Browser */
div.inline_block { display: inline-block; width: 200px; border: 1px solid #000; padding: 3px; }
 
/* IE 6 und 7 */
div.inline_block { display: inline; zoom: 1; }

Im IE 6 und IE 7 wird die Eigenschaft display einfach wieder zurück auf inline gesetzt und anschließend die Eigenschaft zoom hinzugefügt. Damit wird der Internet Explorer dazu gezwungen die Microsoft-proprietäre Eigenschaft hasLayout für dieses Element auf true zu setzten. Was an dieser Stelle genau passiert ist an dieser Stelle zu kompliziert zum beschreiben, jedenfalls erzielt es den selben Effekt wie display: inline-block; in neueren Browsern. Wer mehr über hasLayout erfahren möchte, sollte sich den Artikel On having Layout zu Gemüte führen.

Eine funktionierende Demo zum obigen Beispiel gibt es natürlich auch.