SVG Path-Animation: Lineart mit CSS

Lineart ist die Bezeichnung für Strichzeichnungen, die nur wenig oder gar nicht koloriert sind. Eine Path-Animation wirkt, als würden sie gerade mit einem Stift gezeichnet – ein schöner Effekt, der technische Zeichnungen verständlicher macht, als Basis für ein animiertes GIF oder Pausenfüller zwischen zwei Absätzen wirkt.

http-equiv=“X-UA-Compatible“?

Warum mosert der Validator?
Error: A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge.

MathJax – neue Heimat

Für die Handvoll tapferer Mathematiker, die sich an Formeln mit MathML, Latex oder TEX in Webseiten trauen: MathJax, die Javascript-Library für mathematische Formeln, beherbergt die Code-Library nicht mehr.

WebP vs JPG und PNG : Fotos und Grafik optimieren

Fotos und Grafiken werden immer für die Webseite optimiert. Nachdem JPEG über Jahrzehnte das Königsformat für Fotos war und Motive mit transparentem Hintergrund die Ladezeit ausdehnt, ist WebP das neue JPEG + PNG.

CSS offset-path: Animation entlang eines Pfades

CSS offset-path bewegt Elemente entlang eines Pfads: einer S-Kurve, einer Acht oder beliebiger Formen und schießt kleine Raketen in den Orbit.

Website-Staging und Domain-Umzug: Sehen, was sonst niemand sieht

Beim Umzug einer Webseite auf einen anderen Server entsteht eine mehr oder minder lange Wartezeit bis alle DNS-Server die neue IP-Adresse registriert haben.

Gleich mittenrein

Icons für option-Tag

Viele Formular-Elemente widersetzen sich hartnäckig allen Annäherungen seitens CSS – sehen wir mal von border-radius und font-size für Eingabefelder vom vom Typ Text ab.

SVG SMIL Animationen

Eigentlich wären SVG SMIL-Animationen ein perfekter Nachfolger für die animierten GIFs und fast vergessenen Flash-Animationen. Sie brauchen kein Beiwerk, kein Javascript, kein CSS. Alles in einer Datei.

Ladezeit: SVG optimieren für die Webseite

SVG-Grafiken aus Inkscape und Adobe Illustrator sind vollgepackt mit Attributen, die für die Anzeige in Webseiten nicht gebraucht werden und die Ladezeit verlängern. Wie läßt sich SVG optimieren?

Pseudo-Elemente mit querySelector

Pseudo-Elemente wie ::before und ::after ersparen zusätzliche HTML-Elemente, aber früher galt, dass Javascript nicht auf Pseudo-Elemente wie ::before und ::after zugreifen kann, weil sie nicht im DOM liegen. Javascript querySelector und getComputedStyle bilden zusammen eine Lösung.

Font per base64 in CSS einbetten

Webfonts lassen sich auf die Zeichen reduzieren, die tatsächlich benötigt werden, und dann wie Bilder als Base64 codieren. Dabei entsteht eine Zeichenkette, die direkt in die @font-face-Regel eingesetzt wird.

CSS: Text mit Verlauf füllen

Ein Verlauf oder Gradient wird durch CSS background-image erzeugt, aber für Text hat CSS nur color zu bieten. CSS color hingegen weist einem Text Farbe zu, aber keinen Verlauf, denn gradient ist ein Wert für die Eigenschaft background-image