Sie arbeiten seit ein paar Jahren in der Webindustrie, Sie haben vielleicht das Gefühl, dass Sie immer das gleiche Website-Layout kodieren oder entwerfen. Obwohl Trends kommen und gehen, sehen die meisten Websites immer noch gleich aus: Fast jede von ihnen verwendet ein 12-Spalten-Raster, zwei- und dreispaltige, Boxen-Layouts und ähnliche Formen. Es wird ziemlich langweilig, sich das anzusehen, und die Benutzererfahrung ist auch nicht gerade toll.
Es ist an der Zeit, dass wir anfangen, uns von Feldern oder Bereichen inspirieren zu lassen, die über das digitale Design hinausgehen. Druck- und redaktionelle Designs können wunderschön sein. Warum also nicht mit alten Gewohnheiten brechen und neue CSS-Eigenschaften ausprobieren, die eine ganz neue Welt mit unendlichen Möglichkeiten eröffnen?
Eine CSS-Revolution ist im Gange – Dinge wie Flexbox oder CSS-Grid bieten einfache Möglichkeiten, interessante Layouts zu erstellen. Mit CSS können Sie in visuellen Stilen erstellen, die weit über die Ihnen vielleicht vertrauten hinausgehen.
In diesem Artikel stellen wir Ihnen einige CSS-Tipps vor, die Ihnen dabei helfen, mit nur wenigen Zeilen Code die Form Ihrer Website-Layouts zu durchbrechen.
Keine Angst vor Clipping
Ein weiteres großartiges Feature ist das CSS-Clipping. Die Begrenzung einer Form wird als Clip-Pfad bezeichnet (nicht zu verwechseln mit der veralteten Clip-Eigenschaft), und das Clipping definiert, welcher Bildbereich sichtbar sein soll. Das Beschneiden ist ähnlich wie das Ausschneiden eines Stück Papiers – alles außerhalb des Pfades wird versteckt, während alles innerhalb des Pfades sichtbar ist.
Clip-Pfad: Kreis (Radius bei x, y);
clip-path: url(#clipping); /*Referenzierung auf SVG-Element*/
Wenn z.B. eine Kreisfunktion eine Beschneidemaske über den oberen Rand eines Bildes setzt, sehen Sie nur den Teil des Bildes innerhalb dieses Kreises.
Das Coole daran ist, dass wir Shape-Funktionen und SVG als Clip-Pfade verwenden können, was uns eine Menge Möglichkeiten gibt – wir könnten sie zum Beispiel zu Morphing-Formen animieren. Schauen Sie sich diesen Artikel von Chris Coyier über die Erstellung von transparenten JPGs mit SVG-Clip-Pfad an.
Übersetzt mit www.DeepL.com/Translator (kostenlose Version)
Erkunden Sie die CSS-Blend-Modi
Duotone Bilder und Colorizer-Effekte gehören zu den angesagtesten Webdesign-Trends. Dank Spotify, das sie kohärent umsetzt, sind sie im gesamten Web sehr beliebt. Jetzt können Sie endlich aufhören, mehrere verschiedenfarbige Versionen Ihrer Assets zu erstellen und die Effekte direkt im Browser anwenden.
Die Verwendung von CSS-Blendemodi ist nicht nur eine großartige Möglichkeit, das Aussehen der Inhalte auf verschiedenen Websites zu vereinheitlichen, sondern ermöglicht es Ihnen auch, verschiedene Farbversionen eines Bildes zu setzen und dabei nur einen Wert in CSS zu ändern: die Farbe. Es gibt 15 mögliche Blendemoduswerte, einschließlich Bildschirm, Überlagerung, Aufhellen und Abdunkeln.
Es gibt eine Reihe von Implementierungsmethoden, je nach Art des Elements, auf das Sie den Effekt anwenden möchten. Zum Beispiel können Sie das Hintergrundbild und die Hintergrundfarbe, die auf dem Container-Hintergrund-Blend-Modus eingestellt sind, verwenden: verdunkeln;, oder ein Overlay mit Pseudo-Elementen (d.h. :before und :after) auf dem Image-Wrapper erzeugen, um einen kolorierenden Effekt zu erhalten.
Um einen zufriedenstellenden Duotoneffekt zu erzielen, wird empfohlen, ein kontrastreiches Schwarz-Weiß-Bild zu verwenden. Sie können dies erreichen, indem Sie CSS-Filter anwenden, um Graustufen und einen hohen Kontrastpegel einzustellen.
Eine weitere coole Eigenschaft ist der Mix-Blend-Modus, mit dem man den Inhalt des Elements mit dem Inhalt oder Hintergrund seines direkten Elternteils vermischen kann. Dies funktioniert besonders gut bei überlappenden Schriftzügen. Sie fragen sich vielleicht, warum wir in diesem Fall nicht einfach die Deckkraft anpassen – die Antwort ist einfach: wir können die Farbintensität leicht verlieren, wenn wir nur die Transparenz verwenden.
Die Ära der Bilder, die direkt im Webbrowser bearbeitet werden können, steht bevor, aber wir dürfen die Browserkompatibilität nicht vergessen – die Unterstützung für Blend-Modi ist derzeit noch begrenzt.