CSS-Tricks zum Aufrütteln Ihrer Weblayouts
Das Erlernen neuer CSS-Tricks ist eine der besten Möglichkeiten, das Design Ihrer Website zu verbessern. Wenn Sie eine Weile in der Webbranche gearbeitet haben, haben Sie möglicherweise das Gefühl, dass Sie immer dieselben Layouts codieren oder entwerfen. Trends kommen und gehen, aber die meisten Websites sehen gleich aus - mit dem 12-Spalten-Raster, zwei- und dreispaltigen Box-Layouts und ähnlichen Formen. Es wird nicht nur ein wenig langweilig anzusehen, sondern die Benutzererfahrung ist auch nicht so großartig.
Eine Möglichkeit, dies zu ändern, besteht darin, sich von Bereichen oder Bereichen inspirieren zu lassen, die über das digitale Design hinausgehen. Warum nicht Print- oder redaktionelle Designs für Ihre Website verwenden? Sie können alte Gewohnheiten mit neuen CSS-Eigenschaften brechen, die eine neue Welt der Möglichkeiten eröffnen. Sie können einen anständigen nutzen Webseitenersteller um dich zu inspirieren.
Wenn Sie weitere Ratschläge zum Webdesign wünschen, lesen Sie unseren Leitfaden zum perfekten Design Website-Layout oder auffrischen Atomic Design . Plus, hier sind die Benutzererfahrung Tipps, die Sie wissen müssen.
Eine CSS-Revolution ist im Gange - Tools wie Flexbox oder CSS-Raster bieten einfache Möglichkeiten zum Erstellen interessanter Layouts. Mit CSS können Sie visuelle Stile erstellen, die weit über die vertrauten hinausgehen.
In diesem Artikel geben wir einige CSS-Tipps, mit denen Sie mit nur wenigen Codezeilen die Form Ihrer Website-Layouts sprengen können.
01. Erkunden Sie die CSS-Mischmodi
Duotone-Bilder und Colouriser-Effekte sind einige der heißesten Webdesign-Trends. Dank Spotify, das sie zusammenhängend implementiert, sind sie im Internet weit verbreitet. 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-Mischmodi ist nicht nur eine hervorragende Möglichkeit, das Erscheinungsbild des Inhalts auf Websites zu vereinheitlichen, sondern ermöglicht es Ihnen auch, verschiedene Farbversionen eines Bildes festzulegen und nur einen Wert in CSS zu ändern: die Farbe. Es gibt 15 mögliche Mischmoduswerte, einschließlich Bildschirm, Überlagerung, Aufhellen und Abdunkeln.
Abhängig von der Art des Elements, auf das Sie den Effekt anwenden möchten, gibt es verschiedene Implementierungsmethoden. Beispielsweise können Sie das Hintergrundbild und die Hintergrundfarbe für den Hintergrund-Mischmodus des Containers verwenden: verdunkeln; oder eine Überlagerung mit Pseudoelementen erstellen (d. h. :Vor und :nach dem ) auf dem Bildumschlag, um einen Färbungseffekt zu erzielen.
Um einen zufriedenstellenden Duotoneffekt zu erzielen, wird empfohlen, ein kontrastreiches Schwarzweißbild zu verwenden. Sie können dies tun, indem Sie CSS-Filter anwenden, um Graustufen und einen hohen Kontrast festzulegen.
Eine weitere coole Eigenschaft ist Mix-Blend-Modus Hiermit können Sie den Inhalt des Elements mit dem Inhalt oder Hintergrund des direkten übergeordneten Elements mischen. Dies funktioniert besonders gut bei überlappenden Schriftzügen. Sie fragen sich vielleicht, warum wir in diesem Fall nicht nur die Deckkraft anpassen - die Antwort ist einfach: Wir können die Lebendigkeit der Farben nur durch Transparenz leicht verlieren.
Die Ära der Bilder, die direkt in Ihrem Webbrowser bearbeitet werden können, steht vor der Tür, aber wir können es nicht vergessen Browser-Kompatibilität - Die Unterstützung für Mischmodi ist derzeit begrenzt. Und um diese Bilder zu schützen, sollten Sie Ihre Bilder erkunden Cloud-Speicher Optionen.
02. Fügen Sie eine Maske hinzu
Die Maskierung teilt Ihrem Browser mit, welche Asset-Elemente sichtbar sein sollen, und ist sehr nützlich, um kreative Formen und Layouts zu erstellen. Die Maskierung kann auf drei Arten erfolgen: mithilfe eines Rasterbilds (z. B. PNG-Format mit Transparenzteilen), CSS-Verläufen oder SVG-Elementen.
Beachten Sie, dass SVG im Gegensatz zu einem typischen Rasterbild ohne signifikanten Qualitätsverlust skaliert oder transformiert werden kann.
img { mask-image: url(‘mask.png’) linear-gradient(-45deg, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%); mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/ } Es ist wichtig zu erwähnen, dass Firefox nur das neueste unterstützt. Daher müssen wir ein Inline-SVG-Maskenelement verwenden. Was ist, wenn wir ein Rasterbild mit Transparenzstufen verwenden? Die transparenten Teile des Bildes werden nicht angezeigt. Mit anderen Worten, die undurchsichtigen Fragmente werden angezeigt und andere Teile werden ausgeblendet.
Die Maskierung ist besonders leistungsfähig, da Sie damit dieselben Eigenschaften auf Hintergrundbilder anwenden und deren Position, Größe und Wiederholung definieren können.
Ein guter Anwendungsfall für die CSS-Maskierung sind Artikel, die Text und Bilder kombinieren. Unregelmäßige Container und Bilder sind im Druck sehr beliebt, aber im Web mühsam und zeitaufwändig zu implementieren. Aber dank Maskierung nicht mehr!
Sie können auch Spaß daran haben, mithilfe von Transparenzstufen einen Teil der animierten Bilder auszuschneiden (z. GIF-Dateien ). Vergessen Sie bei der Verwendung dieser Eigenschaften jedoch nicht die browserübergreifende Unterstützung und fügen Sie Herstellerpräfixe hinzu.
03. Hab keine Angst vor dem Abschneiden
Ein weiteres großartiges Feature ist das CSS-Clipping. Die Grenze einer Form wird als Clip-Pfad (nicht zu verwechseln mit der veralteten Clip-Eigenschaft), und Clipping definiert, welcher Bildbereich sichtbar sein soll. Das Ausschneiden ähnelt dem Ausschneiden eines Blattes Papier - alles außerhalb des Pfads wird ausgeblendet, während alles innerhalb des Pfads sichtbar ist.
clip-path: circle(radius at x, y); clip-path: url(#clipping); /*referencing to SVG element*/Wenn eine Kreisfunktion beispielsweise eine Schnittmaske über einem Bild festlegt, wird nur der Teil des Bildes innerhalb dieses Kreises angezeigt.
Das Coole ist, dass wir Formfunktionen und SVG als Clip-Pfade verwenden können, was uns viele Möglichkeiten bietet - zum Beispiel könnten wir sie in verwandelnde Formen animieren. Schau dir das an Artikel von Chris Coyier Informationen zum Erstellen von transparentem JPG mithilfe des SVG-Clippfads.
Wenn Sie sich fragen, was der Unterschied zwischen Ausschneiden und Maskieren ist, denken Sie daran, dass Masken Bilder und Clips nur Vektorpfade sind. Es ist erwähnenswert, dass das Maskieren mehr Speicherplatz beansprucht, da Sie mit einem vollständigen Bild arbeiten und alles Pixel für Pixel ausgeführt werden muss.
Aus diesem Grund wird empfohlen, Masken zu verwenden, wenn Sie einen teilweisen Transparenzeffekt erzielen möchten. Wenn Sie scharfe Kanten wünschen, verwenden Sie am besten die Clip-Pfade.
04. Denken Sie über den Tellerrand hinaus
Form außen und Form innen zur Rettung! Wer hat gesagt, dass Textcontainer immer rechteckig sein müssen? Lassen Sie uns buchstäblich aus dem Kasten herausgehen und neue Formulare entdecken, die unsere Seitenlayouts reicher und weniger kastenförmig machen. Mit den Eigenschaften 'Form außen' und 'Form innen' können Sie Ihren Inhalt um benutzerdefinierte Pfade in CSS wickeln.
Wie funktioniert es? Wenden Sie einfach den folgenden Code auf das angegebene schwebende Bild oder den angegebenen Container an:
shape-outside: circle(50%); /* content will flow around the circle*/Es ist wichtig zu beachten, dass die Eigenschaft float und die Abmessungen des Elements - Höhe und Breite - definiert werden müssen, da dies sonst nicht funktioniert. Für die Form können Sie gehen Kreis() , Polygon () , Einsatz() oder Ellipse() .
Ein weiterer möglicher Wert ist der url () Funktion. In diesem Fall kann die Shape-Outside-Eigenschaft eine Elementform basierend auf dem Bild definieren. Sie können die verwenden url () Funktion anstelle der Polygon () Wenn Sie eine besonders anspruchsvolle Grafik mit vielen Kurven und Punkten haben und möchten, dass der Inhalt reibungslos um sie herum gewickelt wird.
Wenn Sie mehr Platz zwischen Ihrem Element und dem Inhalt schaffen möchten, verwenden Sie die Formrand Eigentum, das wie ein Rand wirkt. Formfunktionen können animiert werden, jedoch nur für definierte Polygone - die url () Funktion kann leider nicht animiert werden.
Browserunterstützung für Form außen ist im Moment begrenzt, aber drücken Sie die Daumen für die schnelle Implementierung in anderen Browsern.
05. Versuchen Sie SVG für die Animation
Um ehrlich zu sein, kann ich mir das heutige Web nicht ohne vorstellen SVG (skalierbare Vektorgrafiken). Sein Name spricht für sich selbst - er skaliert und beantwortet alle Bedenken in Bezug auf sich anpassendes Webdesign . Die SVG-Grafik ist unabhängig von der Bildschirmauflösung des Geräts, auf dem sie angezeigt wird, gestochen scharf.
Neben der Skalierbarkeit gibt es noch eine weitere Funktion, die Sie zum Spielen mit SVG ermutigen sollte: die Möglichkeit, SVG mit CSS zu bearbeiten. Wenn Sie noch nie versucht haben, sich mit CSS-Animationen und SVG-Code zu beschäftigen, müssen Sie es jetzt versuchen - es ist unglaublich, wie schnell Sie erstaunliche Effekte erzielen können.
Sie denken vielleicht, dass es in einigen Fällen einfacher ist, Rasterbilder zu verwenden. SVG hat jedoch einen großen Vorteil gegenüber normalen Bildern. In SVG enthaltene Wörter werden in der Tag und so bleibt Text, der es durchsuchbar, auswählbar und zugänglich macht. Es bedeutet auch, dass Sie es direkt im Code bearbeiten können. Wir müssen jedoch daran denken, die Schriftfläche einzubetten, um sicherzustellen, dass die Schrift gerendert wird.
Das Animieren von SVG mit CSS ist wie das Animieren eines anderen Elements in HTML - es kann mit Übergängen, Transformationen und Keyframe-Animationen durchgeführt werden. Sobald Sie mit dem SVG-Code vertraut sind, ist der Rest unkompliziert und sehr intuitiv, da Sie dies im Grunde genauso tun, wie Sie es in HTML tun würden.
Das Coolste an SVG ist, dass Sie jeden gewünschten Teil greifen und ihn mit CSS-Animationen zum Leben erwecken können. Dies bedeutet, dass wir einige sehr interessante dynamische Effekte erstellen können, die nicht unbedingt JavaScript verwenden. SVG verfügt über eine eigene DOM-API, sodass der gesamte SVG-Code problemlos mit DevTools überprüft werden kann. Ich empfehle dringend, ihn bei der Erforschung dieses Themas zu verwenden.
06. Mach ein bisschen Lärm
Die 1980er und 1990er Jahre sind zurück! Glitch - die Ästhetik von Chaos, Lärm und Jamming - wird in diesem Jahr zu einem beliebten Designtrend. Die Feier von Störungen, Ausfällen und Fehlern kann auch im Web gesehen werden. Wenn Sie mit der Perspektive spielen und visuell chaotischer sein möchten, können Sie dies einfach tun, indem Sie die Elemente Ihrer Website transformieren und verzerren.
Das perfekte Beispiel dafür, wie es nur in CSS gemacht wird, finden Sie auf CodePen von Captain Anonymous , der verzerrten, animierten Text darstellt. Eine Codezeile zaubert:
transform:skew(60deg, -30deg) scaleY(.66667);07. Werden Sie kreativ mit Collage
Collagen-inspirierte Designs genießen ihren Moment in der bildenden Kunst - während sie diesen Artikel recherchieren, die Arbeit von Rosanna Webster und Barrakuz hat sofort mein Herz gestohlen - und selbst im Internet bekommen sie immer mehr Aufmerksamkeit. Wenn Sie Zweifel haben, besuchen Sie die MailChimp-Homepage (unten). Hast du die Collage bemerkt?
Der traditionelle Ansatz besteht darin, einfach Rasterbilder anzuhängen, die in einem Grafikeditor erstellt wurden. Mit den in diesem Artikel beschriebenen Techniken ist es jedoch möglich, ähnliche Effekte mithilfe von CSS-Eigenschaften zu erstellen. Sie können sich sogar vorbereiten Collagen die sich wirklich an die Anforderungen des Webs anpassen - und skalierbar, animiert und interaktiv sind.
Ich habe einige Beispiele mit all diesen coolen CSS-Eigenschaften vorbereitet, damit Sie sehen können, wie sie kombiniert werden können, um einen collagenartigen Stil im Web zu erzielen. Schauen Sie sich meine Beispiele an .
08. Browserunterstützung nicht vergessen
Wenn Sie sich zurückgehalten fühlen, wenn Sie CSS-Eigenschaften verwenden möchten, von denen Sie vermuten, dass sie nicht von allen Browsern unterstützt werden, wird die @ unterstützt Regel ist da, um Ihnen zu helfen. @ unterstützt Mit dieser Option können Sie die Browserunterstützung für CSS-Eigenschafts-Wert-Paare überprüfen.
Der Code, der in der enthalten ist @ unterstützt Der Block wird nur gerendert, wenn diese Bedingungen erfüllt sind. Andernfalls wurde der Code vom Browser nicht gelesen. In einem Fall, in dem der Browser nicht versteht @ unterstützt Es wird auch kein bestimmter Teil des Codes generiert.
@supports (mix-blend-mode: overlay) { .example { mix-blend-mode: overlay; } }Durch die Kombination von Funktionen wie Mischmodi, Maskieren, Ausschneiden, CSS-Formen und der Leistungsfähigkeit von SVG erhalten wir eine Reihe großartiger Tools, mit denen wir unsere Kreativität steigern und von der Norm abweichen können. Mit diesen Tools haben wir die Möglichkeit, eine Webversion von Dingen zu erstellen, die wir derzeit in gedruckter Form sehen.
Obwohl bei einigen Eigenschaften immer noch Probleme mit der Kompatibilität der Browser auftreten können (wenn Sie viele Probleme haben, ziehen Sie eine robustere in Betracht Web-Hosting Service), zögern Sie nicht, mit ihnen zu spielen. Obwohl die Browserunterstützung derzeit möglicherweise eingeschränkt ist, wird dies in Zukunft wahrscheinlich nicht mehr der Fall sein. Es ist nur eine Frage der Zeit.
Dieser Artikel wurde ursprünglich im Netzmagazin veröffentlicht.
Zum Thema passende Artikel:
