7 geniale CSS-Hacks – mit Code zum Nachbauen
Mit CSS-Eigenschaften kann man Webdesigns wunderbar aufpolieren. Wir zeigen Ihnen ein paar weniger bekannte Tricks.
Um Textumrandungen exakt an der Zeichenkante auszurichten, nutzt man in CSS üblicherweise die Eigenschaft text-stroke. Doch je nach Browser wirkt das Ergebnis bisweilen schlecht lesbar, weil die Umrandung beispielsweise zu dick oder – wie in Internet Explorer – gar nicht dargestellt wird. Hier hilft die CSS-Property text-shadow, denn mit ihr lassen sich genaue Werte für die Schattenwürfe festlegen, sodass diese sich immer genau im gleichen Abstand um die Buchstaben legen.
Die manuelle Bestimmung zieht allerdings eine höchst aufwendige Rechnerei nach sich, wenn man immer den korrekten Abstand zum jeweiligen Buchstaben bestimmen will. Deshalb haben wir eine elegante und ressourcenschonende Lösung gsucht und mit dem CSS text-stroke generator von Owumaro (http://owumaro.github.io/text-stroke-generator) gefunden. Entwickelt hat ihn der Developer Antoine Matyja aus Lille. In Sekundenschnelle lässt sich damit eine browserkompatible, hochaufgelöste und noch dazu pixelgenaue Textumrandung generieren. Eine unfassbare Zeitersparnis! So hat das lästige horizontale und vertikale Ausrichten von Schattenwürfen ein Ende, und das Schönste an der Lösung: Sie basiert zu 100 Prozent auf purem CSS.
Denise Abeln ist Webdesignerin bei der Digitalagentur burgdigital in Bielefeld. Sie kennt CSS wie ihre Westentasche und experimentiert leidenschaftlich gern mit neuen CSS- Eigenschaften. ↗ www.burgdigital.de
2. Mittig eingerastet: CSS Scroll Snap
Ob swipebare Slideshows oder in verschiedene Bereiche aufgeteilte One-Pager: Mit CSS Scroll Snap lässt sich ihre Entwicklung prima vereinfachen
Bei CSS Scroll Snap handelt es sich um eine CSS-Erweiterung, die Developern die Möglichkeit gibt, Scroll-Container so zu konfigurieren, dass sie an bestimmten Punkten einrasten. Egal, ob der Nutzer schnell oder langsam horizontal wischt oder vertikal scrollt, das Bild rastet mit CSS Scroll Snap grundsätzlich mittig ein. Vertikal kann das Einrasten der Elemente auch am Anfang stattfinden.
Besonders hilfreich ist die Erweiterung, um ein App-nahes Verhalten im Browser zu kreieren. Komponenten wie swipebare Slideshows und Carousels et cetera müssen Entwickler nun nicht mehr mit JavaScript umsetzen – die native CSS-Implementierung ist zudem viel performanter, was die Usability und die User Experience auf touchfähigen Geräten verbessert. Noch ein kleiner Trick: Problematisch kann es sein, wenn ein Scroll-Container von einem fix positionierten Header überlagert wird. Das kann mit der CSS-Eigenschaft Scroll Padding nun verhindert werden – auch unabhängig von Scroll Snap. Mit scroll-padding-top: 2em rastet das Kindelement 2em vorher ein, sodass ein überlagerndes Element keinen Inhalt überdeckt. Möchte man zusätzlich mehr Platz zum Rand lassen, vergibt man die Eigenschaft scroll-margin.
Sven Wolfermann, Technical Consultant/ Webdeveloper bei maddesigNs im brandenburgischen Trebbin, findet Lösungen für jede CSS-Aufgabe. ↗ http://maddesigns.de
3. Tschüss Kästchenknast: CSS Shapes mit Animation
Erst das CSS-Modul Shapes befreite das Webdesign vom eintönigen Kästchenlayout und lässt Texte nun jegliche Formen umfließen
Als Frontend-Developer freut man sich über jede neue CSS-Eigenschaft, die das Webdesign bereichert. Wichtigste Neuerungen der letzten Jahre waren sicher CSS Flexbox und CSS Grid. Davor haben sich Layouts mit CSS immer wie ein Hack angefühlt (Floats, Inline-Boxen und der ganze Krampf ). Mit Flex und Grid gibt es endlich robuste, anpassungsfähige Basistechniken für diesen Zweck.
Doch aus dem Gefängnis der alles beherrschenden rechteckigen HTML-Kästchen, die das Webdesign seit 25 Jahren bestimmten, konnten dieses erst die CSS-Module Shapes und Masking befreien. Zwar ließen sich schon in CSS3 die Ecken einer Box optisch abrunden, aber der Text brach weiterhin an der eigentlich viereckigen Box-/Bildkante um, orientierte sich also nicht wirklich am Bildinhalt.
Das veränderte CSS Shapes, mit dem sich Websites ohne fiese Hacks so gestalten lassen, dass Texte beliebige Formen umfließen können – in Chrome seit 2014, in Safari seit 2017, in Firefox seit 2018 und in Edge seit 2020. Doch verwendet wird die tolle CSS-Property Shape Outside immer noch viel zu selten, obwohl Webentwicklern damit endlich ein Gestaltungsmittel zur Verfügung steht, um Weblayouts zu entwickeln – so stylish, dass man sie für Printmagazine halten könnte. Diese CSS-Formen lassen sich selbstverständlich auch animieren (siehe https://is.gd/cssshapescircledtextanimate) und mit all den anderen Bonbons aus der CSS-Wundertüte kombinieren.
Herbert Braun ist Senior Frontend Developer bei der Digitalagentur Aperto in Berlin. Als Webentwickler seit Netscape-Zeiten und Mitorganisator der Konferenz c‘t <webdev> wird er nicht müde, auf die tollen Möglichkeiten von CSS hinzuweisen. Er findet, dass jeder Frontend-Entwickler über ein tiefgehendes CSS-Verständnis verfügen sollte. ↗ https://woerter.de
4. Nur ein Handgriff: CSS Custom Properties (CSS Variables)
Um Teile einer Website mühelos anzupassen oder auszutauschen, ist die CSS-Eigenschaft Custom Properties, auch CSS-Variablen genannt, sehr nützlich
CSS-Werte wie Farben und Größen für mehrere Layoutelemente einer Website lassen sich mithilfe von Custom Properties (CSS Variables) zu Beginn des Stylesheets festlegen und bei späteren Designanpassungen schnell modifizieren. Eine einzige Änderung – und sämtliche betroffenen Elemente im Stylesheet werden überschrieben.
Als Inline Style, im Selector oder in einer Media Query, können Developer fast überall Custom Properties setzen. Den größten Nutzen bieten sie jedoch, wenn dies in :root passiert, denn dann sind sie in allen Selektoren verfügbar. Logische Funktionen, flexiblere Websites, schnelleres Prototyping, Kontinuität und die damit einhergehende Vermeidung von redundantem Code lassen dabei das Herz höherschlagen. Wechselnde Color-Schemes wie etwa Dark/Light UIs, bei denen der Hintergrund mal dunkel und mal hell erscheint, zählen zu den häufigsten Anwendungen.
Bekannt sind CSS-Variablen bereits aus Sass (Syntactically Awesome Stylesheets), einer Stylesheet-Sprache, die als CSS-Präprozessor mit Variablen, Schleifen und einer Vielzahl anderer Funktionen, die CSS nicht mitbringt, die Erstellung von CSS und die Pflege großer Stylesheets erleichtert. Aber im Unterschied zu Sass-Variablen wirken CSS-Variablen direkt auf die Struktur des Dokument-Objekt-Modells, sodass sie sich auch per JavaScript manipulieren lassen und zusätzlich sogar in Sass verwendet werden können. Top!
Fabian Heußner, Art Director UI/UX beim Designstudio Mutabor in Hamburg, meint, dass CSS wie der Belag auf einer Pizza ist: Ohne geht schon, aber mit schmeckt es erst richtig. ↗ www.fabianheussner.com
5. Responsive Ladung: CSS-Variable Aspect Ratio
Für flüssiges Nachladen von Bildern und Videos sorgen wiederverwendbare Aspect-Ratio-Container, die man mit CSS-Variablen und einem Padding-bottom-Hack entwickeln kann
Jeder Developer kennt Situationen, in denen man Bilder und Videos besser asynchron nachlädt – beispielsweise um den initialen Seitenaufruf zu beschleunigen, wenn für die Darstellung nicht alle Bilder benötigt werden. Doch verhindern responsive Bildbreiten, dass der Browser im Voraus berechnen kann, wie viel Platz dafür reserviert werden muss. Dieser Umstand führt beim Laden der Seite zu Sprüngen im Inhalt. Freihalten kann man den benötigten Platz für ladende Bilder oder Videos mithilfe der CSS-Variable Aspect Ratio.
Dafür gibt man dem Elternelement des Bilds einen prozentualen Wert für den padding-bottom an, der auf Basis des Seitenverhältnisses ausgerechnet wird. Der Browser kann das Bild nun absolut positionieren, da das Elternelement ausreichend Platz reserviert. Um diese Funktionalität wiederverwendbar zu machen, kann man eine aspect-ratio– Klasse anlegen, die mittels CSS-Variablen das Seitenverhältnis des Bilds angibt.
Johannes Eslage, Frontend-Developer bei der Digitalagentur Fork Unstable Media in Hamburg, glaubt an schlanke CSS-Lösungen anstelle schwergewichtiger Plug-ins. ↗ http://johanneseslage.de ↗ www.fork.de
6. Voll fixiert: CSS Position Sticky
Per CSS-Befehl Position Sticky bewegen sich Navigations- elemente beim Scrollen mit und bleiben stets sichtbar
Eine sehr nützliche und doch kaum genutzte CSS-Eigenschaft ist position: sticky. Mit dem CSS-Befehl lassen sich Seitenleisten, Navigationsmenüs und andere Elemente an jeder beliebigen Stelle so fixieren, dass sie beim Scrollen mitlaufen und an einer bestimmten Position ständig zu sehen sind. Neben sticky gibt es noch vier andere Werte der Eigenschaft position, mit denen sich verschiedene Effekte erzielen lassen: Die Positionen position: static (default) und position: relative (relative position in document order) belassen das Element, etwa ein Bild, immer in seinem Kontext. Man kann das Bild also nach oben oder unten verschieben, aber es verlässt seinen Kontext nie. Mit dem Wert position: absolute (absolute position in relative context) wird das Element aus dem normalen Fluss gelöst und unabhängig verschoben. Dabei könnten andere Elemente allerdings verdeckt werden.
Mit position: fixed (fixed in viewport) orientiert sich die Verschiebung am Viewport. Das Element wird aus dem normalen Fluss gelöst, bleibt aber beim Scrollen an seiner fest definierten Position. Je nach Screengröße könnte das Bild also plötzlich über dem Text stehen, in dem es vorher positioniert war.
Elemente, die man mit dem CSS-Befehl position: sticky formatiert, nutzen eigentlich alle vier Werte der Eigenschaft position. Zunächst ist das sticky-Element fest an seinen Kontext gebunden, ganz wie static oder relative. Dann wird es beim Scrollen ab einer gewissen Höhe aus dem Kontext gehoben und verhält sich wie fixed, während es sich wie absolute verhält, wenn es am Ende des sticky-Bereichs, also am Ende des Containers, angekommen ist. Ganz wichtig: Das sticky-Element benötigt einen Container, in dessen Kontext es sich bewegen kann. Die entsprechende Animation gibt’s hier zu sehen: https://codepen.io/rpsthecoder/pen/zGYXEX.
Stefan Nitzsche, Freelance UX/UI Designer in Essen, hält CSS für ein wunderbares Werkzeug, das sich immer weiter verbessert. ↗ https://stn1978.com
7. Experimentelle Animationen: CSS Offset Path
Mit der CSS-Eigenschaft Offset Path lassen sich sehr einfach natürliche Bewegungen von Objekten abbilden
Die CSS-Eigenschaft offset-path kommt aus dem Animationsbereich und legt einen Bewegungspfad fest, dem ein Element folgen soll – wobei dessen Positionierung im übergeordneten Container- oder SVG-Koordinatensystem erfolgt. Zurzeit handelt es sich noch um eine experimentelle Technologie, die nicht alle Browser unterstützen. Genaueres dazu findet sich unter https://caniuse.com/#search=offset-path.
Was so schön daran ist: Anders als mit transform und rotate lassen sich mit offset-path sehr unkompliziert viel natürlichere Objektbewegungen erzeugen, da man damit jeden beliebigen Pfad definieren kann. Bei unserem Raketenbeispiel nutzte ich einfach die Koordinaten eines SVG-Pfads, den ich vorher in Figma erstellt hatte. Es ist auf diese Weise viel einfacher und macht sehr viel mehr Spaß, kleinere Animationen auszuprobieren und Ideen umzusetzen. Die entsprechende Animation könnt ihr euch hier anschauen: https://codepen.io/Hesslich/pen/KKVJBov.
Sara Hesse, Freelance UX/UI-Designerin in Berlin, ist überzeugt, dass fundiertes CSS-Wissen Möglichkeiten und Restriktionen im Designprozess klären hilft. Experimentieren mit unbekannteren CSS-Eigenschaften eröffnet dannwieder neue kreative Potenziale. ↗ www.egal-wie.design
Codes zu den CSS-Hacks zum Download
Hier findet ihr die Codeschnipsel der oben beschriebenen CSS-Hacks zum Download. Gleich ausprobieren!
CSS-Hacks zum Nachlesen in der PAGE 10.2020
Als PAGE+-Abonnent können Sie sich diese und andere Ausgaben ohne zusätzliche Kosten herunterladen und im Print-Layout genießen.
Offene Worte finden ¬– Position beziehen! ++ Praxis: Inclusive Design ++ Kampagnen: Save the Civil Discourse! ++ Kreativ Awards in der Krise? ++ 3D-Events in der Cloud mit Unity ++ Webdesign: CSS-Hacks ++ Typo: deep fonts mit KI ++ Booklet: CD/CI-Ranking
