WordPress & Webwork - perun.net

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

Von am 30. 07. 2012 um 13:05

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.

Diesen Artikel weiterempfehlen oder später lesen:

auf Kindle (später) lesen

Premium WordPress Themes

Verwandte Artikel:

Kategorien:
HTML & CSS
Tags:
, ,  
Beitrag:
Trackback-Adresse und die Druckvorschau
Kommentare:
Kommentare verfolgen oder Kommentar abgeben

 — 

Ein Kommentar »»

  1. 1. – Jens Grochtdreis

    Kommentar vom 30.07.2012 um 13:45

    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.

Hinweis:
300+ Professionelle WordPress-Themes
Premium WordPress-Themes, 38 davon mit deutschem Support

Einen Kommentar hinterlassen




XHTML (folgende Tags sind erlaubt): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Kommentar-Vorschau ist aktiviert (Javascript wird benötigt).

Code-Beispiele: damit die Code-Beispiele richtig angezeigt werden müssen die Sonderzeichen maskiert werden (z. B. < zu &lt;).

Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.