CSS, HTML und Javascript mit {stil}

motion-path: Animation entlang eines Pfades

fly-me-to-the-moon
CSS Transition und Animationen bewegen ein Element auf geradem Weg von A nach B, aber nicht entlang einer S-Kurve, einer Acht, halten nichts von einem Orbit oder einer Schleife. CSS kennt keine Animation entlang eines Pfades – das kommt erst mit motion-path.

Domain-Umzug und Wartezeit bei den DNS-Servern

Webseite umziehen und DNS-Server
Beim Umzug eines Webseite auf einen anderen Server entsteht eine mehr oder minder lange Wartezeit bis alle DNS-Server die neue IP-Adresse registriert haben. Wer prüfen will, wie die Seite auf dem neuen Server dasteht, muss im Ungewissen warten.

Spielereien mit Formularen: CSS für option-Tag

appearance
Viele Formular-Elemente widersetzen sich hartnäckig allen Annäherungen seitens CSS – sehen wir mal von border-radius und font-size für Eingabefelder ab. Etwas appearance: none und ein paar Tricks holen Bilder in das option-Tag.

SVG SMIL Animationen

android
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 optimieren: Dateigröße verkleinern, überflüssige Attribute entfernen: SVG optimiert
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

Click me, Touch me
Bislang galt, dass Javascript nicht auf Pseudo-Elemente wie ::before und ::after zugreifen kann, weil sie nicht im DOM liegen. Javascript querySelector hat eine Lösung.

Font in die CSS-Datei einbetten

Fonts in CSS-Datei einbetten
Schriften / Webfonts lassen sich – wie Bilder – durch Base64 codieren. Dabei entsteht ein Schwall aus Zeichen, der Font in die CSS-Datei eingebettet wird.

SVG in WordPress laden

SVG in Wordpress
Für den Einsatz von SVG in WordPress muss der Media Upload überredet werden, SVG als zulässigen Mime-Type anzuerkennen. Das passiert mit zwei oder drei Zeilen in der Datei functions.php und ist schon lange bekannt.

CSS: Text mit Verlauf füllen

SVG Text mit Bild bzw. Verlauf / Gradient füllen
CSS kann einem Text Farbe zuweisen, aber keinen Verlauf. Es gibt zwar einen alten Trick mit background-clip und text-fill-color, der aber nur in einer Browserfamilie wirkt.

Open Source – Code-Editor Brackets

adobe brackets Code Editor
Brackets ist ein Code-Editor, programmiert in HTML und Javascript. Dennoch ist Brackets eine Desktop-Anwendung. Adobe hat das Projekt ins Leben gerufen und verwaltet es auf Github.

Eine WordPress-Datenbank für Zwei

Zwei WordPress, eine Datenbank
Wofür könnte man zwei WordPress-Installationen brauchen, die beide auf dieselbe Datenbank zugreifen? z.B. für eine App, die nicht auf dasselbe Template zugreift, sondern ein eigenes Template bekommt.

SVG image-Tag – Grafik als PNG für alte Browser

SVG in einem image-Tag
Schöner Trick von Alexey Ten, der Bilder gleichzeitig als PNG für ältere Browser und als SVG für alle anderen in HTML einbindet: Eine SVG-Grafik wird innerhalb eines SVG-Elements mit dem SVG image-Tag geladen.

CSS organisieren und aufräumen

Hexenkessel: CSS organisieren, strukturieren, CSS-Ladezeit verbessern
CSS-Dateien entwickeln sich schnell zu einem Hexenkessen, sie wachsen, werden unüberschaubar und versanden in Redundanz.

Safari zeigt eingebettete Bitmaps in SVG nicht an

bitmap-in-svg-in-safari
SVG ist zwar Vektorgrafik, aber es gibt gute Gründe, in einer Vektorgrafik auf eine Bitmap zurückzugreifen. Wird das SVG-Bild inline in das HTML-Dokument gesetzt, zeigt Safari die Grafik korrekt an.