css3 | perun.net

Die hint.css eine kleine Tooltip-Bibliothek mit der man gestylte Tooltips umsetzen kann, die lediglich CSS und ein bisschen HTML benötigen:

Man muss lediglich die CSS-Datei einbinden, entweder als separate Datei oder n dem man den Code in die bereits bestehende CSS-Datei reinkopiert. Anschließend kann man mit so Konstrukten…

Ich bin ein <span class="hint  hint--bottom" data-hint="Hallo">Tooltip</span>. 

… verschiedenartige Tooltips erzeugen. Ich habe sowohl die Online-Demo, wie die lokale Variante getestet und es funktioniert mit den aktuellen Versionen von Firefox, Chrome und Opera und auch auf dem Internet Explorer 9.

Weitere Infos gibt es in der readme-Datei.

Via Twitter.

Seit längerer Zeit existiert das neue Dateiformat für Kindle, dass eine Unterstützung für HTML5 und für CSS3 bietet. Ich habe bereits darüber berichtet. Seit dem 3.4er Update für Kindle Keyboard unterstützen alle relevanten Kindle-Geräte und auch die Apps, dass neue Format.

Daher habe ich mir gedacht, ich mache mal einen kleinen Test und schaue mal, wie sich das Testdokument in der Kindle-App für Android, dem Kindle Fire 1, dem Kindle Keyboard und dem Kindle Previewer (Vorschau-Software) macht. Das sind die Umgebungen auf denen ich auch sonst teste.

Hier der HTML-Code: (weiterlesen…)

Ich habe im Mai diesen Jahres am Beispiel meiner Herr-der-Ringe- und Hobbit-Website erklärt, wie man WordPress als "klassisches" CMS verwenden kann. Dabei habe ich erklärt, wie man sich den Umgang mit vielen Seiten und Unterseiten erleichtern kann, wie man alternative Titel ausgibt und wie man aus der Hauptnavigation ein Dropdownmenü realisiert.

Da ich heute ein paar kleine Änderungen an der Navigation durchgeführt habe, gehe ich auf die Erstellung und die Einbindung solch einer Navigation noch einmal ausführlich ein. (weiterlesen…)

Christian Schaefer hat einen interessanten Vortrag zum Thema Ladezeit-Optimierung von Websites online gestellt. Die Folien beinhalten viele wertvolle Informationen und hebt sich damit angenehm von vielen anderen Präsentationen.

Kollege Jens Grochtdreis, von dem ich auch den Hinweis auf den oberen Vortrag bekommen habe, hat in einem Blogartikel 24 Quellen zu HTML5 und CSS3 aufgelistet: Referenzen, Tools, Demoseiten.

Hier ein paar Lesezeichen, die sich in meinem Browser in den letzten Tagen aufgesammelt haben:

Auf CSS-Portal findet man mehrere Online-Generatoren, darunter unter anderem einen Generator für CSS-Layouts und einen Generator für Navigationsmenüs, die mit CSS3 umgesetzt wurden.

Bilder in Base64 konvertieren

Auf Image to data URI convertor kann man seine Bilder in Base64 codieren, das untere Bild welche ich aus diesem Artikel entnommen habe könnte ich entweder "klassischerweise" so einbinden:

<img src="browser-perun_net-juli-2012.png" width="500" height="244" title="" alt="" />

In Base64 codiert schaut das Ergebnis aber so aus: (weiterlesen…)

Chico UI ist eine Sammlung von Tools um recht einfach Funktionen für eine Website nachzurüsten. Du brauchst eine Dropdown-, Akkorden- oder Tab-Navigation? Dann findet du bei Chico UI erprobte Lösungen.

Neben diesen Funktionen findest du hier auch u.a. einen Bilder-Slider, einen Kalender-Widget und eine CSS-Bibliothek. Bei der CSS-Bibliothek sind die gängigen HTML-Elemente gestylt, es sind CSS-Icons definiert…

… sowie Nachrichten-Boxen, Seitenumbruch-Links und Tabellen.

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. (weiterlesen…)