PICO CSS – Kleines CSS-Framework
Pico.css ist ein kleines feines CSS-Framework, das für ein schnelles und sauberes semantisches Webdesign steht.
Pico.css ist ein kleines feines CSS-Framework, das für ein schnelles und sauberes semantisches Webdesign steht.
backdrop gibt es in zwei Ausführungen: Einmal als CSS backdrop-filter z.B. für einen Milchglaseffekt und einmal als Pseudo-Element ::backdrop für einen Overlay.
Neue CSS-Eigenschaften erscheinen nicht en block à la CSS 2 oder CSS 3, sondern tröpfeln mal hier und mal da ein. Popup-Fenster und CSS-Animationen beim Scrollen – beides ohne Javascript – sind auf dem Weg.
CSS offset-path bewegt Elemente entlang eines Pfads: einer S-Kurve, einer Acht, auf Kreisen und entlang von Vielecken.
CSS mask image bringt Masken und Freistellpfade für alle Bitmap-Formate. Das Originalbild bleibt erhalten und die Maske kann animiert werden.
CSS Größen schöpfen aus einem großen Fundus: Pixel, EM oder REM, Prozent, larger oder smaller. vw und vh ähneln Prozentangaben, aber beziehen sich auf den Viewport und nicht auf das umfassende Element.
Simulatoren / Emulatoren geben einen besseren Einblick, wie die Webseite auf einem iOS bzw. Android-Gerät aussieht, aber sie brauchen einen »Anlauf«.
Am Anfang war der Pixel … das war einfach (vergessen wir mal, dass es auch pt gab). Heute haben wir einen ganzen Keller voller Maßeinheiten für Schriftgrößen, Abstände, Breite und Höhe von Elementen.
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.
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.
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.
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
CSS-Dateien entwickeln sich schnell zu einem brodelnden Hexenkessel. Sie wachsen, werden unüberschaubar und versanden in Redundanz. Wie behalten wir die Übersicht und wie finden wir das CSS above the fold?
