DevOps World: Design-Refresh

Genau 3059 Tage hat dieser Blog nun schon auf dem Buckel. In dieser Zeit wurden 113 Artikel veröffentlicht, diverse Plugins installiert (und wieder entfernt), mehrmals der Server gewechselt und sogar zweimal der Name getauscht. Was sich seitdem kaum verändert hat: das Design – bis heute! DevOps World präsentiert sich in neuem Gewand.

» Weiterlesen

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/

target=“_blank“ und XHTML Strict

Wer seine Website schonmal mit XHTML Strict durch den W3C HTML-Validator gejagt hat, wird feststellen, dass einige Attribute inzwischen nicht mehr erlaubt sind. Dazu gehört unter anderem der Befehl target=“_blank“, der Links in einem neuen Fenster oder Tab öffnen lässt.

Der Benutzer soll selbst entscheiden, ob ein Link in einem neuen Fenster geöffnet werden soll, oder nicht.

Dieser These kann ich mich nicht unbedingt anschließen, denn inzwischen erwartet man einfach, dass sich externe Links in einem neuen Tab öffnen. Natürlich gibt es immer noch Workarounds, um den gewünschten Effekt zu erzielen. Aus dem Grund stelle ich an dieser Stelle eine (wie ich finde) sehr elegante Lösung vor, die zwar auf JavaScript basiert, aber auch funktioniert, wenn JavaScript im Browser deaktiviert ist.
Eine zweite Methode basiert auf CSS3, die allerdings noch nicht von allen Browser vollständig unterstützt wird. Ich rate daher vorerst auf JS zurückzugreifen.

» Weiterlesen