• Spezifitäts-Graph: Wartbarkeit von CSS messen

    In allen Projekten möchte man möglichst wartbares CSS schreiben. In diesem kurzen Tipp möchte ich euch zeigen, was man für wartbares CSS beachten muss und wie man die Umsetzung mit einem Spezifitäts-Graph prüfen kann. Beitrag lesen →

  • Hintergrund vom rechten / unteren Rand aus positionieren

    Wusstet ihr, dass man ein Hintergrund-Bild per CSS auch vom rechten Rand des Bezugsobjekts aus positionieren kann? Dies war mir bis heute unbekannt, obwohl dies schon seit längerer Zeit möglich ist durch den CSS3-Standard. Beitrag lesen →

  • 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 →

  • Browserlist für Autoprefixer anlegen

    Im CSS sollte man heutzutage keine Browser-Prefixes mehr selbst schreiben. Denk dem Grunt-Task grunt-postcss und dem Plugin autoprefixer kann diese Aufgabe automatisiert werden. Wie hierbei die gewünschte Browser-Kompatibilität konfiguriert wird, zeige ich euch in diesem kurzen Artikel. 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 →

  • CSS-Basis durch Reset oder Normalisierung

    Um die Kaskade von CSS ausnutzen zu können, sollte man eine solide CSS-Basis setzen. Mit diesem Thema befassen sich schon lange viele Webentwickler. Eric Meyer hat 2007 die erste Version seines bekannten CSS-Resets veröffentlicht und 2011 aktualisiert. Mittlerweile haben sich weitere Wege etabliert, um eine CSS-Basis zu setzen. Beitrag lesen →

  • CodePen.io WordPress Shortcode funktioniert nicht

    Eine kurze Notiz für alle, die gerne CodePens in ihren WordPress-Blog einfügen und dies über das Plugin von Chris Coyier tun. Bei mir wollte das Plugin nicht so recht funktionieren. Es hat nicht den Pen ausgegeben, sondern nur den Inhalt des Shortcodes und es hat gleichzeitig die Seite zerstört. 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 →