WordPress & Webwork

CSS-Links: einheitliche Sende-Buttons, Spritepad, Sprechblasen, Flexbox statt Float

Hier wieder mal ein paar interessante CSS-Links, die sich in miner Browser-Session angesammelt haben:

Björn Wibben liefert eine Lösung, wie man es schaffen kann das der Sende-Button eines Formulars in allen Browsern einheitlich zu gestalten. Lösung für ein sehr nerviges Problem.

Das Spritepad bietet eine sehr einfache Möglichkeit CSS-Sprites zu erstellen: einfach per Klicken und Ziehen die einzelnen Grafiken anordnen und anschließend den CSS-Code kopieren. Unter einem CSS-Sprite versteht man wenn mehrere Grafiken zu einer großen zusammengesetzt werden.

Durch Hintergrundpositionierung in CSS kann man bestimmte Bereiche der Grafik anzeigen lassen. Der Vorteil so einer Lösung ist die Optimierung der Performance der Website, weil in der Regel die Dateigröße sinkt und auf jeden Fall zusätzliche HTTP-Aufrufe eingespart werden.

Sprechblasen, so ähnlich, wie man sie aus den Comics kennt, kann man auch mit CSS erstellen:

Sprechblasen mit CSS

Im Artikel Nebeneinander liegende Elemente mit Flexbox statt Float eine interessante Lösung vorgestellt, wie man Blöcke nebeneinander anordnen kann ohne auf Float zurückgreifen zu müssen. Dabei wird auf das CSS Flexible Box Layout Module von W3C zurückgegriffen, welches sich allerdings noch in Entwicklung befindet und zur Zeit nur von Google Chrome unterstützt wird: aber auch hier nur mit dem Vendor-Präfix -webkit- und auch nicht im kompletten Umfang.

1 Reaktion(en)

  1. Jens Grochtdreis

    Flexbox hat irgendwann eine Änderung in der Spezifikation erfahren. Die alte Version hatte schon eine gute Verbreitung unter modernen Browsern. Die neue wird wohl neben Chrome auch von Firefox seit Version 7 unterstützt. So sagt es jedenfalls das "CSS3 Click Chart".

    Das Problem ist wie immer der IE. Aber das kennen wir ja nicht anders. Man kann aber deshalb mit dieser Methode prima in mobilen Umgebungen arbeiten, denn da gibt es ja zum Glück (noch) keinen IE.

Die Kommentare in diesem Beitrag sind geschlossen.

WordPress-Schulungs­unter­lagen

Anleitung für Autoren und Redakteure
Schneller und unkomplizierter Einstieg in die redaktionelle Betreuung einer WordPress-Installation.

Handbuch für Administratoren
Schneller und unkomplizierter Einstieg in die technische Betreuung einer WordPress-Installation.

Anschauen