• Inline-SVG als Sprite: Nutzung und Automatisierung

    Dieser Artikel ist als Fortführung von SVG-Sprite als Background: Nutzung und Automatisierung anzusehen. Es gelten dieselben Vorbedingungen und dasselbe Setup.

    Anstatt SVGs als Hintergrundgrafik zu verwenden, geht es bei dieser Technik darum SVG-Grafiken wie Bilder als Inline-Element einzusetzen. Der Vorteil ist, dass bei dieser Methode zwei Farben im Inline-SVG angepasst werden können und die Skalierung einfacher ist. Beitrag lesen →

  • SVG-Sprite als Background: Nutzung und Automatisierung

    Aus meiner Sicht setzen sich SVG Grafiken so langsam gegenüber Icon-Fonts durch. Der große Vorteil von SVG ist das Browser übergreifend gleiche Rendering, was bei Schriften nicht gewährleistet ist. Die Manipulations- und Animationsmöglichkeiten sind ein weiteres großes Plus.

    Beitrag lesen →

  • Die Wahrheit über Input Types

    Alle sind sich einig: Nutze passende Input Types – Sofort. Der Browser fällt ja „weich“ auf ein Standard-Eingabefeld zurück, sollte er einmal nicht in der Lage sein, den genutzten Input Type zu verstehen. Prinzipiell ist gegen diese Marschrichtung nicht viel zu sagen. Oft wird der Einsatz auch mit einer viel besseren Semantik begründet. Dann wird’s schon kniffliger. Beitrag lesen →

  • HTML Input Types Test-Seite

    Scanne den QR-Code, um diese Seite aufzurufen

    Rufe diese Seite mit einem Testgerät bzw. Browser deiner Wahl auf, um die verschiedenen Input Types von HTML zu testen. Beitrag lesen →

  • Komplexe Tooltips mit Schatten erstellen (CSS + HTML)

    In diesem Guide möchte ich euch zeigen, wie ihr Tooltips mit Schatten erstellen könnt, die auch am Zeiger einen korrekten Schatten haben. Bei Tooltips werden die Zeiger gerne über den Border-Trick generiert. Bei diesem Trick sieht das Element zwar dreieckig aus, ist aber tatsächlich weiterhin ein Rechteck, wodurch bei dieser Lösung der Einsatz von box-shadow nicht funktioniert.  Beitrag lesen →

  • Gute Usability für (externe) Links

    Hyperlinks ermöglichen uns die Navigation im Internet. Je besser ein Link mit Metadaten erweitert wird, desto leichter und komfortabler wird die Navigation für den Nutzer.  Beitrag lesen →

  • HTML5: CSS und JavaScript einbinden, Meta-Viewport-Tag

    Diese kleine Übersicht gibt einen schnellen Zugriff auf die wichtigsten HTML5-Tags, um Ressourcen (CSS und JavaScript) einzubinden und für responsive Projekte die Viewport-Behandlung korrekt einzustellen. Beitrag lesen →

  • Umlaute und Sonderzeichen in HTML

    Immer wieder kommt es bei Projekten vor, dass man Sonderzeichen einsetzen muss. Wenn UTF-8 gerade mal nicht möglich ist oder man eine andere Darstellung des Zeichens für CSS benötigt, helfen folgende Listen oft weiter. Beitrag lesen →

  • HTML5 Fullscreen API: Vollbildmodus schon nutzbar?

    Zur Zeit beschäftige ich mich intensiv mit der HTML5 Fullscreen API. Mit diesem kleinen Beitrag möchte ich kurz auf einige Stolpersteine hinweisen und beschreiben, in welchen Fällen die Nutzung derzeit leider schlicht nicht möglich ist. Beitrag lesen →