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:
Dann das 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:
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:
Über CSS wird der Text durchsichtig gemacht und das h1-Element bekommt als Hintergrundbild das gewünschte Logo:
#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
Internet Explorer 6 auf Spoon.net
Vor etwa einem Jahr habe ich schonmal einen Artikel geschrieben wie man den Internet Explorer 6 als Standalone wieder zum laufen bekommt zum Testen diverser Webanwendungen. Inzwischen gibt es aber eine neue und viel bessere Lösung. Unter Spoon.net kann der IE6 bequem aus einem anderen Browser heraus gestartet werden und das ganz ohne Installation (und natürlich kostenlos). Dazu wird lediglich ein Plugin benötigt und schon kann der IE6 gestartet werden.
Der IE6 ist allerdings nicht der einzige Browser, der auf Spoon.net zur Verfügung steht. Weitere Browser sind z.B. IE7 – 9, Firefox 2 – 4, Chrome, Safari und Opera. Aus meiner Sicht das perfekte Tool zur Crossbrowser-Optimierung und daher ein fetter Linktipp von mir.
Hinweis: Spoon.net läuft derzeit nur unter Windows. Eine Mac-Version ist aber bereits in Planung.
Ältere Artikel »