Intelligente CSS-Lösungen für allgemeine UI-Herausforderungen

Es ist unglaublich zu sehen, was wir heute mit CSS erreichen können, besonders wenn Sie sich noch daran erinnern, wie schwierig es früher war, Stapelkontexte herauszufinden, oder warum Ränder zusammenbrachen und warum top: float nicht funktionierte. In diesem Beitrag werden wir uns genau das ansehen: spannende und unterhaltsame Dinge, die wir mit CSS tun können , die Untersuchung häufiger Probleme und Anwendungsfälle, denen wir uns alle bei unserer Arbeit stellen müssen.

Reichhaltigere, lebensechte Schatten mit CSS

Schatten helfen dabei, Bedeutung zu vermitteln und fügen einer Benutzeroberfläche zusätzlichen Wert hinzu. Viele Schatten, die wir heutzutage im Internet sehen, nutzen jedoch nicht ihr volles Potenzial. Lasst uns das ändern!

Ein umfassender tiefer Einblick in alles, was mit Schatten zu tun hat, kommt von Rob O'Leary. Sein Artikel über CSS-Tricks untersucht, wie Licht Schatten beeinflusst und wie man eine Lichtquelle definiert – die Grundlage für authentische Schatteneffekte. Sobald diese Basis festgelegt ist, lernen Sie, wie Sie mit Schatten Tiefe hervorrufen, Elemente hervorheben und sie einfügen, wie Sie Schatten schichten und natürlich, welche CSS-Eigenschaft für welchen Anwendungsfall verwendet werden soll. Rob wirft auch einen Blick auf die Zugänglichkeit und die Auswirkungen auf die Leistung, die Schatten mit sich bringen, sowie darauf, wie man sie animiert.

Ein weiterer fantastischer Artikel zu diesem Thema stammt von Josh W. Comeau. Um diesen „unscharfen grauen Kästchen, die nicht wirklich wie Schatten aussehen“, ein Ende zu bereiten, wie Josh den aktuellen Zustand der meisten Schatten im Internet beschreibt, zeigt er, wie man typische Kästchenschatten in schöne, lebensechte umwandelt . Ein kleines Detail, das jede Benutzeroberfläche viel taktiler macht.

CSS-Papierausschnitt-Effekt

Wenn Sie jemals einen Papierausschnitt-Effekt für eine Überschrift erstellen wollten, haben Sie sich vielleicht ziemlich schwer getan. Möglicherweise müssen Sie zwei separate div einrichten, die sich dann überlappen würden. Der Abstand müsste natürlich in relativen Einheiten definiert werden, was ein bisschen schwierig sein könnte, direkt über Bildschirme zu kommen.

Der CSS Paper Cut-Out Effect von Stephanie Eckles löst das Problem endgültig mit benutzerdefinierten CSS-Eigenschaften, CSS Grid, CSS-Transformationen und einer guten altmodischen CSS-Funktion attr() . Stephanie verwendet ein data auf h1 zusammen mit einer darin enthaltenen span . attr() nimmt den Wert des data auf, der dann für die content in einem :after -Pseudoelement verwendet wird. Die Lichter, Schatten und Farben können dann mit CSS Custom Properties angepasst werden. Wiederverwendbar und einfach zu pflegen!

Und wenn Sie an mehr Magie von Stephanie und anderen wunderbaren Menschen interessiert sind, die CSS lieben, werfen Sie einen Blick auf StyleStage, wo modernes CSS das Rampenlicht bekommt, das es verdient.

Werfen Sie auch einen Blick auf Ahmad Shadeeds Artikel „Thinking About The Cut Out Effect“, der auf alle feinen Details der Entscheidung eingeht, wann SVG sinnvoller sein könnte und wie es in einem realen Szenario implementiert werden kann. Der Artikel enthält auch viele Codebeispiele für den Einstieg!

Die Minimap für das Web

Wir haben sie schon einmal gesehen: winzige horizontale Balken, die normalerweise oben auf der Seite zu finden sind. Wenn ein Benutzer nach unten scrollt, füllt sich die horizontale Leiste, sodass der Benutzer weiß, wie viel tatsächlich noch gescrollt werden muss.

Was aber, wenn wir es etwas kontextbezogener machen? Vielleicht enthält die Seite einige Bilder und Videos oder Zitate und bestimmte Abschnitte – wäre es nicht interessant, sie anders hervorzuheben, während die Leser gleichzeitig eine Position auf der Seite anheften und bei Bedarf zurückspringen können? Das dachte sich auch Rauno Freiberg.

Raunos Minimap für das Web (funktioniert derzeit nur in Firefox) macht es trivial, eine Minimap-Darstellung der gesamten Seite zu erstellen, während es den Lesern auch ermöglicht, Abschnitte der Seite zu fixieren und zwischen ihnen zu navigieren. Um dies zu erreichen, verwendet Rauno eine experimentelle CSS-Eigenschaft element() , um ein Live-Bild aus einem beliebigen HTML-Element anzuzeigen (das derzeit nur in Firefox verfügbar ist).

Bedingter Randradius in CSS

Beim Entwerfen von Karten möchten Sie möglicherweise, dass ein border-radius einen ziemlich beträchtlichen Wert hat, wenn genügend Platz vorhanden ist, um ihn zusammen mit anderen Karten anzuzeigen. Wenn auf der Karte jedoch kein Platz und möglicherweise auch kein Rand vorhanden ist – wie dies bei kleineren Bildschirmen der Fall sein kann – möchten Sie möglicherweise border-radius auf 0 reduzieren. Wie würden Sie das erreichen?

Ahmad Shadeed hat sich in seinem Artikel über den bedingten Randradius in CSS ausführlich mit diesem Problem befasst. Die ursprünglich von Heydon Pickering und Naman Goel vorgeschlagene Idee besteht darin, eine ausreichend große Zahl zu verwenden, um den einen oder anderen Zustand auszulösen. Wenn auf kleineren Bildschirmen die Differenz zwischen 100vw und 100% 0 ist, dann ist der Radius auch 0 ; aber wenn die Differenz größer ist, würde ein größerer Wert verwendet werden. Sie können sich auch den CodePen ansehen.

Körnige CSS-Verläufe

Was wäre, wenn Sie etwas Rauschen hinzufügen möchten , um einem Bild ein wenig Textur zu verleihen? Natürlich könnten Sie Bilder als PNGs, WebP oder AVIFs exportieren, aber idealerweise möchten wir „Rauschen“ über SVGs hinzufügen, damit wir Rauschen jederzeit ein- und ausschalten können, wenn wir möchten.

In seinem CSS-Tricks-Artikel über körnige Farbverläufe erklärt Jimmy Chion, wie wir farbiges Rauschen erzeugen können, um einem Farbverlauf mit nur einem Hauch von CSS und SVG Textur hinzuzufügen. Wie Jimmy erklärt, besteht die Idee darin, einen SVG-Filter zu verwenden, um das Rauschen zu erzeugen, und dieses Rauschen dann als Hintergrund anzuwenden. Dann legen wir es unter einen Farbverlauf, verfeinern die Helligkeit und den Kontrast, und – voila – Sie haben einen Farbverlauf, der allmählich verschwindet.

Problem gelöst! Sie können auch den Spielplatz „Grainy Gradient“ erkunden, den Jimmy eingerichtet hat.

Mehrzeiliger Hintergrundverlauf

Manche Dinge scheinen mit CSS unmöglich zu machen – nun, bis jemand einen Hack findet, um es möglich zu machen. Wie in diesem Fall: Können Sie einen mehrzeiligen aufgefüllten Text mit einem Farbverlauf erzielen, der nicht für jede Zeile zurückgesetzt wird?

Ja, wie Matthias Ott zeigt. Die Lösung von Matthias ist etwas hacky, führt aber dank eines Pseudo-Elements, das über den Text gesetzt wird, zum gewünschten Ergebnis. Eine interessante Idee zum Basteln.

Formularfeldfokus ohne Umrisse

Wer sagt, dass Formulare langweilig sein müssen? Hakim El Hattab hat eine Demo erstellt, die beweist, dass selbst etwas so Einfaches wie ein Formular, das nach Name, E-Mail und Passwort fragt, eine Gelegenheit ist, um die Ecke zu denken und für einen Funken Freude zu sorgen.

Um dies zu erreichen, kombiniert Hakim Formfokus und Validierung in einer subtilen, aber überraschenden Animation, die ohne Fokuskonturen auf den Feldern selbst auskommt. Stattdessen markiert ein Punkt das fokussierte Feld. Wenn der Fokus auf ein anderes Feld wechselt, wird die Animation ausgelöst und der Punkt springt auf das neue aktive Feld, wodurch eine Verbindung zwischen den beiden hergestellt wird. Die Formularfeldvalidierung ist ebenfalls nahtlos integriert, wobei der Punkt erweitert und ein Häkchen angezeigt wird. Wenn Sie tiefer in den Code eintauchen möchten, hat Hakim auch eine Demo auf Codepen veröffentlicht. Inspirierend!

Übergang von CSS-Verläufen

Wenn Sie jemals versucht haben, Farbverläufe in CSS umzuwandeln, haben Sie wahrscheinlich bemerkt, dass es tatsächlich nicht funktioniert. Anstatt allmählich von einem Gradienten zum anderen überzugehen, geschieht die Änderung sofort, abrupt, ohne fließenden Übergang zwischen den beiden.

Wie Keith J. Grant herausgefunden hat, können wir den Übergang jedoch mit einem cleveren Workaround erreichen. Wir verwenden dafür eine Pseudoelement- und Opazitätstransformation. Zuerst wenden wir einen Farbverlauf auf das Element an, positionieren dann sein Pseudoelement so, dass es das Element ausfüllt, und wenden dann den zweiten Farbverlauf darauf an. Und wir „wechseln“ zwischen zwei Farbverläufen, indem wir die Deckkraft des Pseudo-Elements ändern. Sie können ein voll funktionsfähiges Beispiel auf CodePen überprüfen.

Verbesserung der Bildleistung mit image-set()

Haben Sie schon von image-set() gehört? Sie können es sich als CSS-Hintergrund vorstellen, der dem HTML-Attribut srcset für img -Tags entspricht. Chromium-basierte Browser und Safari unterstützen es seit einigen Jahren, Firefox folgte erst kürzlich. Ollie Williams wirft einen Blick darauf, was wir heute damit machen können und was nicht.

Wie Ollie beschreibt, besteht ein Anwendungsfall für image-set() darin, mehrere Auflösungen eines Hintergrundbilds bereitzustellen und es dem Browser zu überlassen, zu entscheiden, welches Bild einem Benutzer angezeigt wird – eine hochauflösende Version für Benutzer auf ausgefallenen Geräten und a Bild mit niedrigerer Auflösung für diejenigen mit langsamen Verbindungen oder Bildschirmen mit einer geringeren Pixeldichte, zum Beispiel.

Ein weiterer sehr vielversprechender Anwendungsfall fehlt leider noch an Browserunterstützung: die Idee, neue Bildformate wie AVIF, WebP oder HEIF zu verwenden und gleichzeitig einen Fallback für ältere Browser hinzuzufügen. Wenn Sie so etwas schon heute erreichen möchten und kein background-image benötigen, ist das <picture> element könnte eine erwägenswerte Alternative sein, wie Ollie vorschlägt. Eine großartige Lektüre, die Ihnen hilft, die Bildleistung zu verbessern.

Clip-Path-Pop-Out-Effekt

Da clip-path: path() von den wichtigsten Browsern unterstützt wird, ist es an der Zeit, kreativ zu werden. Mikael Ainalem zeigt einen schönen Anwendungsfall für das ziemlich neue Feature: einen butterweichen Pop-Out-Effekt.

Mikael verwendet clip-path: path() , um ein Foto einer Person von seinem kreisförmigen Hintergrund abzuheben. Wenn Sie den Mauszeiger darüber bewegen, scheint sich die Person aus dem Inneren des Kreises zu erheben, wodurch ein cooler 3D-Eindruck entsteht. Perfekt für „Über uns“-Seiten.

Wunderlicher Knopf 3D

Details sind wichtig. Das Entwerfen eines schönen Buttons scheint kein großes, kompliziertes Unterfangen zu sein: ein bisschen Polsterung hier und da, eine flippige Farbe, zugänglicher Text und ein paar Button-Zustände. Nun, Josh Comeau hat den ganzen Weg gegangen, um einen wirklich skurrilen 3D-Button zu entwerfen, auf den Sie vielleicht mehr als einmal klicken möchten.

Die Idee ist einfach: Wir erstellen zwei Ebenen und versetzen die Vordergrundebene zunächst ein wenig. Beim Schweben verschieben wir die vordere Ebene nach unten. Dann passen wir den Fokusumriss mit outline-offset an oder verwenden :focus:not(:focus-visible) , um den Umriss auszublenden, wenn die Schaltfläche fokussiert ist und der Benutzer ein Zeigegerät verwendet.

Dann verschieben wir die Schaltfläche um ein paar Pixel nach oben, wenn sie schweben, animieren die Transformation ein wenig, passen die Bezier-Kurve für die Animation an und fügen ein wenig Unschärfe hinzu, um einen weicheren, natürlicheren Schatten zu erzielen. Und voila – wir haben eine skurrile 3D-Schaltfläche, die zugänglich ist, auf Mobilgeräten und auf dem Desktop funktioniert und es ein Vergnügen ist, darauf zu tippen und zu klicken. Das vollständige Code-Snippet finden Sie natürlich in Joshs Blog.

CSS-Diagramme

Vielleicht müssen Sie ein Säulendiagramm, ein Balkendiagramm oder sogar ein Säulendiagramm mit mehreren Datensätzen oder gestapelte Säulen entwerfen. Wo fängst du überhaupt an? Vielleicht mit Charts.css, einem CSS-Framework zur Datenvisualisierung , das CSS-Hilfsklassen verwendet, um HTML-Elemente als Diagramme zu formatieren.

Das von Lana Gordiievski und Rami Yushuvaev erstellte Framework unterstützt viele Diagrammtypen, hat keine Abhängigkeiten und ist sehr leichtgewichtig. Es enthält auch eine umfassende Dokumentation zu seinen Komponenten und integrierten Diagrammtypen, und der Quellcode ist auf GitHub verfügbar (lizenziert unter MIT). Und wenn Sie etwas kreativere Ansätze benötigen, erklärt Preethi auch, wie Sie CSS-Diagramme mit interessanten Formen auf CSS-Tricks erstellen.

Der neue CSS-Reset

Was verwenden Sie, um Stile über Browser hinweg zu normalisieren ? Seit kurzem gibt es neue Ansätze, um die Größe des globalen CSS-Resets zu reduzieren, und vielleicht wären sie auch gute Kandidaten für Ihre Projekte.

Mit seinem Modern CSS Reset hat Andy Bell den CSS-Reset auf sein Minimum reduziert, indem er Box-Sizing-Regeln hinzugefügt, Standardränder entfernt, Core-Root-Standardwerte und Body-Standardwerte festgelegt hat. Gleichzeitig entfernt Andy alle Animationen, Übergänge und glattes Scrollen für Leute, die es vorziehen, sie nicht zu sehen, und hat standardmäßig moderne Eigenschaften wie scroll-behavior und text-decoration-skip-ink hinzugefügt.

The New CSS Reset von Elad Shechter verfolgt einen etwas aggressiveren Ansatz. Elad entfernt alle Standardstile, die wir für bestimmte HTML-Elemente erhalten, mit Ausnahme der display property . Beide Ansätze sind eine Betrachtung wert!

Stabile Bildlaufleisten mit CSS

Ah, das gute alte Layout verschiebt sich! Wie Bramus Van Damme erklärt, ist einer der etwas obskureren Gründe für Layoutverschiebungen auf unterschiedliche Arten von Bildlaufleisten im Web zurückzuführen. Während Overlay-Scrollbars unter iOS/macOS über dem Inhalt platziert werden (und standardmäßig nicht angezeigt werden), werden andere Scrollbars im „Scrollbar-Gutter“ platziert, dh dem Raum zwischen der inneren Randkante und der äußeren Polsterkante.

Wenn der Inhalt einer Box zu groß wird, zeigt der Browser standardmäßig eine Bildlaufleiste an. Im letzteren Fall führt dies zu einer Layoutverschiebung. Glücklicherweise könnte dieses Problem bald für immer verschwunden sein. Lernen Sie eine glänzende neue scrollbar-gutter Eigenschaft kennen: Indem wir sie auf stable setzen, können wir den Browser immer die Scrollbar-Gutter anzeigen lassen, selbst wenn das Feld nicht überläuft.

Und um die Dinge symmetrisch zu halten, können wir scrollbar-gutter: stable both-edges verwenden. Die Funktion ist noch nicht verfügbar, kommt aber sehr bald in Chromium, andere Rendering-Engines werden hoffentlich bald folgen.

Die überraschenden Dinge, die CSS animieren kann

Wenn Sie an das Animieren von CSS-Eigenschaften denken, welche kommen Ihnen in den Sinn? Will Boyd betrachtete die Frage aus einer anderen Perspektive und beschloss, die Eigenschaften zu untersuchen, die einem nicht sofort in den Sinn kommen, diejenigen, die normalerweise nicht mit Animation in Verbindung gebracht werden, sich aber als animierbar herausstellen.

In seinem Beitrag „Die überraschenden Dinge, die CSS animieren kann“ taucht Will tief in diese unerwartet animierbaren Eigenschaften ein – und natürlich in die raffinierten Dinge, die Sie tun können, indem Sie sie animieren. z-index kann beispielsweise für mehrschichtige Animationen verwendet werden, opacity hilft Ihnen, ein Modal nur mit CSS auszublenden. Eine großartige Erinnerung daran, wie leistungsfähig CSS ist.

Lernmittel

Lernen hört nie auf, oder? Nachfolgend haben wir einige nützliche – und unterhaltsame – zusammengestellt! — Ressourcen, die perfekt sind, um Ihre CSS-Kenntnisse auf die nächste Stufe zu bringen. Und wenn Sie bereits ein CSS-Profi sind, gibt es auch Herausforderungen, um Ihr Wissen auf die Probe zu stellen. Genießen!

CSS-Vokabeln und Cheatsheets

Vielleicht warst du schon einmal dort. Gerade wenn Sie unter Zeitdruck arbeiten, müssen Sie schnell etwas nachschlagen. Was CSS angeht, werden Sie mit CSS Tricks Almanac nie etwas falsch machen, und Sie können auch CSS-Vokabeln nachschlagen, die von Ville V. Vanninen aus Finnland gesammelt wurden.

Lernen Sie Flexbox auf unterhaltsame Weise

Was haben Frösche, Zombies und Türme gemeinsam? Nun, sie sind Ihre besten Freunde beim Erlernen von Flexbox. Denn seien wir ehrlich: Flexbox ist sehr mächtig, wenn man es einmal verstanden hat, aber es kann ziemlich schwierig sein, dorthin zu gelangen. Machen wir also das Lernen ein bisschen lustiger.

Im Spiel Flexbox Froggy hilfst du einem kleinen Frosch und seinen Freunden , ihre Seerosenblätter zu finden , indem du, du hast es erraten, CSS schreibst. Das Spiel besteht aus 24 Levels, die Sie von den Grundlagen der Flexbox-Positionierung zu fortgeschritteneren Herausforderungen führen.

Wenn Zombies mehr in Ihrer Gasse sind, ist Flexbox Zombies genau das Richtige für Sie. Jeder Abschnitt des Spiels enthüllt einen Teil der Handlung, führt ein neues Flexbox-Konzept ein und präsentiert sogenannte „Zombie-Überlebensherausforderungen“ , die Ihnen helfen, Ihre neuen Fähigkeiten zu festigen.

Zu guter Letzt sollten Sie sich auch Flexbox Defense ansehen. Inspiriert von Tower-Defense-Spielen besteht Ihre Aufgabe darin, ankommende Feinde daran zu hindern, an Ihrer Verteidigung vorbeizukommen – natürlich indem Sie Ihre Türme mit CSS positionieren. Alle drei Spiele laufen direkt in Ihrem Browser. Viel Spaß beim Flexboxen!

CSS-Grid, CSS-Selektoren und andere Wettbewerbe

Möchten Sie Ihre CSS-Kenntnisse auf die nächste Stufe bringen? Diese drei kleinen Spiele helfen Ihnen dabei – im wahrsten Sinne des Wortes. In Grid Garden wirst du stolzer Besitzer eines Karottengartens . 28 Level warten auf Sie, in denen Sie sich mit Hilfe des CSS-Rasters gut um Ihre Ernte kümmern müssen.

Wenn Sie der Meinung sind, dass Ihre CSS-Selektoren-Fähigkeiten etwas Polieren benötigen könnten, ist CSS Diner genau das Richtige für Sie. Teller, Äpfel, Gurken – in jeder der 32 Herausforderungen müssen Sie einen anderen CSS-Selektor verwenden, um bestimmte Elemente auf einem Tisch auszuwählen.

Und wenn Sie Lust auf etwas Konkurrenz haben, schauen Sie sich unbedingt auch CSSBattle an. Im CSS-Golfspiel setzen Sie Ihre CSS-Fähigkeiten ein, um Ziele mit kleinstmöglichem Code visuell nachzubilden, um an die Spitze der Rangliste zu gelangen. Jede der Challenges widmet sich einem bestimmten Thema wie visibility , display , transition oder z-index .

Einpacken

Sind Sie kürzlich auf eine CSS-Ressource oder -Technik gestoßen, die Ihre Herangehensweise an eine bestimmte Herausforderung verändert hat? Lass es uns in den Kommentaren unten wissen! Wir würden gerne davon hören.