Auf deinem Weg durch diesen Leitfaden wirst du wertvolle F\u00e4higkeiten erwerben, um deine Webprojekte \u00fcber das Gew\u00f6hnliche hinaus zu verbessern. Und hoffentlich bekommst du auch ein paar Inspirationen mit nach Hause.
\n
Erweiterte CSS-\u00dcberg\u00e4nge<\/h2>\n
Fortschrittliche CSS-\u00dcberg\u00e4nge machen UI-Elemente interaktiv, ansprechend und angenehm f\u00fcr das Auge. Stell dir vor, du hast einen Button auf deiner Website. Normalerweise steht er einfach nur da, aber mit CSS-\u00dcberg\u00e4ngen \u00e4ndert er sanft seine Farbe oder wird etwas gr\u00f6\u00dfer, wenn du mit der Maus dar\u00fcber f\u00e4hrst.<\/p>\n
Das Konzept dreht sich um die Idee der Interpolation – den flie\u00dfenden \u00dcbergang zwischen verschiedenen Zust\u00e4nden einer CSS-Eigenschaft.<\/p>\n
Um diese Effekte zu erzielen, musst du dich mit einigen CSS-Eigenschaften vertraut machen:<\/p>\n
- \n
- \u00dcbergangseigenschaften<\/strong>: Dazu geh\u00f6rt die Angabe der Eigenschaft, die du animieren m\u00f6chtest (z. B.
background-color<\/code> oderopacity<\/code>), die Festlegung der Dauer des \u00dcbergangs und die Entscheidung f\u00fcrtransition-timing-function<\/code> (z. B.ease-in<\/code> oderlinear<\/code>), die vorgibt, wie der \u00dcbergang w\u00e4hrend seiner Dauer verl\u00e4uft.<\/li>\n- Timing-Funktionen<\/strong>: Diese sind ein Muss, denn sie steuern die Beschleunigung und Verlangsamung des \u00dcbergangs. Eine der vielseitigsten Optionen ist hier die Funktion
cubic-bezier<\/code>. Mit dieser Funktion kannst du benutzerdefinierte Geschwindigkeitskurven erstellen und hast so die vollst\u00e4ndige Kontrolle \u00fcber das Tempo deines \u00dcbergangs. Das kann anfangs etwas knifflig sein, aber Werkzeuge wie Cubic-Bezier<\/a> machen es einfacher, diese Kurven zu visualisieren und zu erstellen.<\/li>\n<\/ul>\n![\"cubic-bezier\"](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/cubic-bezier.png\")
Ein Beispiel f\u00fcr cubic-bezier in Aktion<\/figcaption><\/figure>\n Hier ist ein einfaches Beispiel, um zu zeigen, wie du es in deinem CSS verwenden kannst:<\/p>\n
.my-element {\n\ntransition-property: opacity;\n\ntransition-duration: 0.5s;\n\ntransition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);\n\n}\n<\/code><\/pre>\nIn diesem Snippet \u00e4ndert
.my-element <\/code>seine Deckkraft mit einer einzigartigen Geschwindigkeitskurve, die durch die Funktioncubic-bezier<\/code> definiert wird. Diese Kurve gibt eine bestimmte Art von Bewegung vor, z. B. einen langsamen Beginn, eine Beschleunigung und eine Verlangsamung zum Ende hin.<\/p>\nWenn du
transition-timing-function<\/code> mit benutzerdefinierten Werten verwendest, kannst du deine Webelemente auf eine Art und Weise bewegen, die sich nat\u00fcrlicher, dynamischer oder einfach nur anders als der Standard anf\u00fchlt. Es ist ein gro\u00dfartiges Werkzeug, um deinen Webanimationen mehr Pers\u00f6nlichkeit und Finesse zu verleihen.<\/p>\nWenn es um fortgeschrittene Techniken geht, sind hier ein paar zu beachten:<\/p>\n
- \n
- Jonglieren mit mehreren Eigenschaften<\/strong>: Warum solltest du dich damit zufrieden geben, nur eine Sache zu animieren? Mit CSS kannst du mehrere Eigenschaften aneinanderreihen und sie alle auf einmal animieren. Das ist ideal, um deiner Animation mehrere Ebenen hinzuzuf\u00fcgen.<\/li>\n
- Synchronisierte Animationen<\/strong>: Du kannst auch verschiedene Eigenschaften aneinanderreihen, damit sie sich im gleichen Tempo bewegen und einen koordinierten Effekt erzeugen.<\/li>\n
- Verschachtelte \u00dcberg\u00e4nge<\/strong>: Wende \u00dcberg\u00e4nge auf Elemente innerhalb eines Containers an. Wenn du mit dem Container interagierst, verhalten sich die untergeordneten Elemente so, wie du es m\u00f6chtest.<\/li>\n<\/ol>\n
Achte darauf, dass diese Animationen nicht nur gut aussehen, sondern auch fl\u00fcssig laufen, besonders auf weniger leistungsstarken Ger\u00e4ten. Die Verwendung von Eigenschaften wie
transform<\/code> undopacity<\/code> ist ein kluger Schachzug, weil sie die Browser schonen und die Leistung nicht zu stark beeintr\u00e4chtigen sollten.<\/p>\nAu\u00dferdem wird dein Browser mit der Eigenschaft
will-change<\/code> vorgewarnt, damit er sich auf die Aktion vorbereiten kann und alles reibungslos l\u00e4uft.<\/p>\nEin letzter Hinweis, um sicherzustellen, dass alles funktioniert: Browser k\u00f6nnen w\u00e4hlerisch sein. Durch die Verwendung von Vendor-Pr\u00e4fixen kannst du sicherstellen, dass deine coolen \u00dcberg\u00e4nge in verschiedenen Browsern funktionieren. Das ist zwar ein bisschen mehr Arbeit, aber Tools wie Autoprefixer<\/a> k\u00f6nnen das f\u00fcr dich \u00fcbernehmen und sorgen daf\u00fcr, dass alles problemlos funktioniert.<\/p>\n
Transformationen in CSS<\/h2>\n
CSS-Transformationen sind eine tolle M\u00f6glichkeit, dein Webdesign interessanter zu gestalten. Sie k\u00f6nnen nat\u00fcrlich auch dazu verwendet werden, Dinge zu verschieben, aber sie k\u00f6nnen auch das gesamte Erscheinungsbild einer Seite ver\u00e4ndern. Die Eigenschaft
transform<\/code> ist hier der Hauptakteur.<\/p>\nSie ist vielseitig und kann Elemente von einer Stelle zur anderen verschieben, z. B. ein Bild \u00fcber den Bildschirm schieben oder seine Gr\u00f6\u00dfe ver\u00e4ndern – z. B. indem du etwas n\u00e4her oder weiter weg zeigst, so wie du ein Foto vergr\u00f6\u00dferst oder verkleinerst. Und wenn du etwas ausgefallener sein willst, kannst du die Elemente sogar drehen lassen.<\/p>\n
Wirklich beeindruckend wird es, wenn du 3D-Transformationen in den Mix einbeziehst. Mit Funktionen wie
translate3d<\/code>,scale3d<\/code> undrotate3d<\/code> k\u00f6nnen Elemente aus dem Bildschirm herausspringen und so direkt im Browser ein noch intensiveres Erlebnis schaffen.<\/p>\nNimm zum Beispiel den Effekt der umgedrehten Karte. Dabei handelt es sich um eine tolle Funktion, bei der eine Seite einer Karte bestimmte Informationen zeigt und beim Umdrehen neue Inhalte auf der anderen Seite zum Vorschein kommen. Dieses interaktive Element kann die Aufmerksamkeit deiner Besucher\/innen wirklich fesseln.<\/p>\n
Der Schl\u00fcssel zu diesem Effekt ist die effektive Nutzung der Eigenschaft
backface-visibility<\/code>. Damit wird sichergestellt, dass die R\u00fcckseite der Karte verborgen bleibt<\/a>, bis sie zu sehen ist.<\/p>\nAber warum hier aufh\u00f6ren? Wenn du diese Transformationen mit \u00dcberg\u00e4ngen und Animationen kombinierst, kannst du so viel mehr aus deinem CSS herausholen. Du kannst eine Schaltfl\u00e4che haben, die sich elegant vergr\u00f6\u00dfert, wenn du mit dem Mauszeiger dar\u00fcber f\u00e4hrst, oder ein Symbol, das sich spielerisch auf dem Bildschirm bewegt. Diese dynamischen Ver\u00e4nderungen verleihen deinen Webseitenelementen eine flie\u00dfende Qualit\u00e4t und machen das Nutzererlebnis noch interessanter.<\/p>\n
Designmodo bietet mehrere sch\u00f6ne Beispiele f\u00fcr diese Funktion. Zuerst siehst du das CSS f\u00fcr 3D-Transformationen<\/a> aufgeschl\u00fcsselt. Dann kannst du den Code in Aktion sehen<\/a>.<\/p>\n
![\"Designmodo](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/designmodo-spinning-donut.png\")
Designmodo bietet ein gro\u00dfartiges Beispiel daf\u00fcr, wie 3D-Transformationen wunderbar funktionieren<\/figcaption><\/figure>\n Container-Abfragen<\/h2>\n
Container-Abfragen sind ein weiterer Aspekt von CSS, den du kennenlernen solltest. Mit ihnen kannst du Elemente basierend auf der Gr\u00f6\u00dfe ihres Containers stylen und nicht nur auf der gesamten Bildschirmgr\u00f6\u00dfe. Stell dir das so vor: Du hast eine Box und willst, dass die Elemente darin gut aussehen, egal wie gro\u00df oder klein die Box ist. Container-Abfragen sind daf\u00fcr perfekt geeignet.<\/p>\n
Sie sind sehr praktisch, wenn du m\u00f6chtest, dass verschiedene Teile deiner Webseite, wie Seitenleisten oder Karten, ihr Aussehen \u00e4ndern, je nachdem wie viel Platz sie haben. Jede Komponente kann ihren eigenen Stil bestimmen<\/a>, unabh\u00e4ngig vom Rest der Seite.<\/p>\n
Hier ist eine kurze \u00dcbersicht, wie du sie verwenden kannst:<\/p>\n
- \n
- Richte den Container ein<\/strong>: Zuerst musst du CSS mitteilen, welcher Teil deiner Seite ein Container ist. Das tust du mit Eigenschaften wie
container-type<\/code> undcontainer-name<\/code>.<\/li>\n- Schreibe deine Abfragen<\/strong>: Genau wie Media Queries, aber f\u00fcr Container. Du schreibst eine Regel, die besagt: „Hey, wenn mein Container mindestens so breit ist, dann mach diese Stil\u00e4nderungen.“<\/li>\n<\/ul>\n
So w\u00fcrde der grundlegende Code daf\u00fcr aussehen:<\/p>\n
@container (min-width: 300px) {\n\n.component {\n\n\/* styles *\/\n\n}\n\n}<\/code><\/pre>\nIn diesem Beispiel werden die Stile der Klasse
.component<\/code> angewendet, wenn der Container eine Mindestbreite von 300px erreicht.<\/p>\nContainer-Abfragen k\u00f6nnen in verschiedenen Szenarien verwendet werden, wie z. B.:<\/p>\n
- \n
- Responsive Seitenleisten und Fu\u00dfzeilen<\/strong>: Anpassen der Breite und des Layouts von Seitenleisten oder Fu\u00dfzeilen auf der Grundlage der Containergr\u00f6\u00dfe.<\/li>\n
- Responsive Karten<\/strong>: \u00c4ndern des Layouts oder Stils von Karten in einem Grid- oder Flexbox-Layout auf der Grundlage der Breite ihres Containers.<\/li>\n<\/ul>\n
Obwohl Container-Queries von den wichtigsten Browsern wie Chrome, Firefox, Safari und Edge unterst\u00fctzt werden, empfiehlt es sich, sie als progressive Verbesserung zu verwenden. Beginne mit grundlegenden Stilen f\u00fcr nicht unterst\u00fctzende Browser und verbessere sie f\u00fcr diejenigen, die Container-Queries unterst\u00fctzen.<\/p>\n
Flexbox f\u00fcr die vertikale Ausrichtung verwenden<\/h2>\n
Flexbox<\/a> ist ein unglaublich praktisches Werkzeug in CSS, besonders wenn es um die vertikale Ausrichtung geht. Es gibt es zwar schon eine Weile, aber es ist immer noch sehr wichtig, vor allem f\u00fcr die Ausrichtung von Elementen entlang der Querachse (die je nach Layout vertikal sein kann).<\/p>\n
Verwendung von align-items f\u00fcr die vertikale Ausrichtung<\/h3>\n
Die Eigenschaft
align-items<\/code> in Flexbox ist das Mittel der Wahl, um Elemente innerhalb eines Containers vertikal auszurichten. Sie funktioniert, wenn dein Flexbox-Container eineflex-direction<\/code> an Zeilen hat. Mit dieser Eigenschaft kannst du steuern, wie alle Children eines Flexcontainers entlang der Querachse ausgerichtet werden.<\/p>\nWenn du z. B. eine Reihe von Elementen in einem Flexcontainer hast und sie alle vertikal zentriert haben m\u00f6chtest, verwendest du
align-items: center;<\/code>. Hier sind die wichtigsten Optionen, die du mitalign-items<\/code> hast:<\/p>\n- \n
flex-start<\/code>: Richtet die Artikel am Anfang des Containers aus.<\/li>\nflex-end<\/code>: Richtet die Artikel am Ende des Containers aus.<\/li>\ncenter<\/code>: Zentriert die Objekte im Container.<\/li>\nbaseline<\/code>: Richtet die Objekte auf der Basis ihrer Grundlinie aus.<\/li>\nstretch<\/code>: Dehnt die Objekte so, dass sie den Container ausf\u00fcllen (Standardverhalten).<\/li>\n<\/ul>\nAlign-self f\u00fcr individuelle Kontrolle verwenden<\/h3>\n
align-items<\/code> eignet sich zwar hervorragend, um alle Elemente in einem Container auszurichten, aber manchmal m\u00f6chtest du nur ein einzelnes Element anders ausrichten. Deshalb istalign-self<\/code> so n\u00fctzlich. Mit dieser Eigenschaft kannst du den Wertalign-items<\/code> f\u00fcr einzelne Flex-Elemente au\u00dfer Kraft setzen. Sie akzeptiert die gleichen Werte wiealign-items<\/code>.<\/p>\nAngenommen, du hast einen Flex-Container mit
align-items: center;<\/code>, aber es gibt ein Element, das du am Anfang ausrichten m\u00f6chtest. Dann kannst dualign-self: flex-start;<\/code> auf dieses spezielle Element anwenden. Auf diese Weise kannst du die Ausrichtung der einzelnen Elemente genau steuern.<\/p>\nAm hilfreichsten ist es jedoch, dies in Aktion zu sehen.<\/p>\n
Nehmen wir an, du entwirfst eine Navigationsleiste mit einem Logo, einigen Links und einer Suchleiste. Du m\u00f6chtest, dass die Links zentriert sind, das Logo oben und die Suchleiste unten ausgerichtet ist.<\/p>\n
So k\u00f6nntest du es machen:<\/p>\n
.nav-container {\n\ndisplay: flex;\n\nflex-direction: row;\n\nalign-items: center;\n\n}\n\n.logo {\n\nalign-self: flex-start;\n\n}\n\n.search-bar {\n\nalign-self: flex-end;\n\n}<\/code><\/pre>\nIn diesem Beispiel ist
.nav-container<\/code> ein Flex-Container, dessen Elemente im Allgemeinen zentriert sind. Das Logo und die Suchleiste weichen jedoch von dieser allgemeinen Regel ab und richten sich am Anfang bzw. am Ende des Containers aus.<\/p>\nModerne Farbfunktionen in CSS<\/h2>\n
Die modernen Farbfunktionen in CSS haben sich erheblich weiterentwickelt und bieten ausgefeiltere M\u00f6glichkeiten, Farben im Webdesign zu definieren und zu manipulieren. Schauen wir uns einige dieser Funktionen genauer an:<\/p>\n
1. rgb() und rgba()<\/h3>\n
Die Funktion
rgb()<\/code> ist eine traditionelle Methode, um Farben mit den Kan\u00e4len Rot, Gr\u00fcn und Blau zu definieren. Jeder Kanal kann einen Wert zwischen 0 und 255 annehmen. Die Variantergba()<\/code> f\u00fcgt einen Alphakanal f\u00fcr die Deckkraft hinzu, wobei 1 f\u00fcr vollst\u00e4ndig undurchsichtig und 0 f\u00fcr vollst\u00e4ndig transparent steht.<\/p>\nDas sollte in etwa so aussehen:<\/p>\n
.example {\n\ncolor: rgb(255, 0, 0); \/* Red *\/\n\nbackground-color: rgba(255, 0, 0, 0.5); \/* Semi-transparent red *\/\n\n}<\/code><\/pre>\n2. hsl() und hsla()<\/h3>\n
hsl()<\/code> stellt Farben in Form von Farbton, S\u00e4ttigung und Helligkeit dar, was die Auswahl von Farbvarianten intuitiver macht. Wiergba()<\/code> enth\u00e4lt auchhsla()<\/code> einen Alphakanal f\u00fcr die Deckkraft. Zum Beispiel so:<\/p>\n.example {\n\ncolor: hsl(120, 100%, 50%); \/* Green *\/\n\nbackground-color: hsla(120, 100%, 50%, 0.3); \/* Semi-transparent green *\/\n\n}<\/code><\/pre>\n3. oklch() und oklab()<\/h3>\n
oklch()<\/code><\/a> undoklab()<\/code> sind neuere Erg\u00e4nzungen der CSS-Farbfunktionen. Sie basieren auf dem CIELAB-Farbraum<\/a>, der so konzipiert ist, dass er f\u00fcr die Wahrnehmung einheitlich ist. Das bedeutet, dass \u00c4nderungen der Farbwerte eher den vom menschlichen Auge wahrgenommenen \u00c4nderungen entsprechen.<\/p>\nKonkret bedeutet dies:<\/p>\n
- \n
oklab()<\/code> der CIELAB-Farbraum wird f\u00fcr die Definition von Farben in einem wahrnehmungsm\u00e4\u00dfig einheitlichen Raum verwendet.<\/li>\noklch()<\/code> ist \u00e4hnlich, verwendet aber zylindrische Koordinaten (Helligkeit, Chroma und Farbton).<\/li>\n<\/ul>\nDiese Funktionen erm\u00f6glichen eine genauere und intuitivere Farbmanipulation, vor allem bei Aufgaben wie der Erstellung sanfter Farbverl\u00e4ufe. So k\u00f6nnte das in Codeform aussehen:<\/p>\n
.example {\n\ncolor: oklch(75%, 0.25, 250); \/* A color in oklch *\/\n\nbackground-color: oklab(0.623, 0.172, -0.079); \/* A color in oklab *\/\n\n}<\/code><\/pre>\nImplementierung von fortgeschrittenen Farbschemata<\/h3>\n
Mit diesen Funktionen, insbesondere den fortgeschrittenen
oklch()<\/code> undoklab()<\/code>, kannst du komplizierte Farbschemata implementieren, die visuell konsistent und ansprechend sind. Sie bieten mehr Kontrolle dar\u00fcber, wie Farben dargestellt und wahrgenommen werden, und stellen sicher, dass deine Designs sowohl \u00e4sthetisch ansprechend als auch zug\u00e4nglich sind.<\/p>\nWenn du diese Farbfunktionen mit CSS-Funktionen wie benutzerdefinierten Eigenschaften (CSS-Variablen) und Berechnungen kombinierst, kannst du dynamische und flexible Farbsysteme entwickeln, die sich an verschiedene Themes, Zust\u00e4nde und Umgebungen anpassen.<\/p>\n
Da sich die Webstandards und die Browserunterst\u00fctzung f\u00fcr diese Funktionen st\u00e4ndig \u00e4ndern, kann die Nutzung dieser modernen Farbfunktionen das visuelle Design und die Benutzerfreundlichkeit deiner Webprojekte erheblich verbessern.<\/p>\n
Text um Bilder herum biegen<\/h2>\n
Die CSS-Eigenschaft
shape-outside<\/code> bietet eine kreative M\u00f6glichkeit, Text um Bilder zu wickeln<\/a>, was zu dynamischeren und visuell interessanteren Layouts und fortschrittlicherem Bildstyling<\/a> beitr\u00e4gt.<\/p>\nDamit kannst du eine Form definieren, um die sich der Inline-Inhalt wickeln soll. Dies ist n\u00fctzlich, um Text in einer nicht-rechteckigen Form um Bilder zu legen und Layouts zu erstellen, die organischer und visuell ansprechender sind als der standardm\u00e4\u00dfige rechteckige Textumbruch.<\/p>\n
Wie funktioniert das?<\/h3>\n
Du kannst verschiedene Formen wie Kreise, Ellipsen und Polygone definieren oder sogar den Alphakanal eines Bildes verwenden, um die Form zu bestimmen.<\/p>\n
Die Eigenschaft
shape-outside<\/code> gilt normalerweise f\u00fcr schwebende Elemente. Wenn du ein Bild schwebend anordnest undshape-outside<\/code> anwendest, wird der Text entsprechend der festgelegten Form um das Bild herumgef\u00fchrt.<\/p>\nHier ist ein einfaches Beispiel f\u00fcr die Verwendung von shape-outside mit einem Kreis:<\/p>\n
.image {\n\nfloat: left;\n\nshape-outside: circle(50%);\n\nwidth: 200px;\n\nheight: 200px;\n\nmargin-right: 15px;\n\n}<\/code><\/pre>\nIn diesem Beispiel wird die Klasse
.image<\/code> auf ein Bildelement angewendet. Es wird nach links verschoben, undshape-outside: circle(50%);<\/code> erzeugt eine Kreisform, um die sich der Text wickeln wird. Wenn dushape-outside<\/code> effektiv einsetzt, er\u00f6ffnen sich dir neue M\u00f6glichkeiten f\u00fcr deine Designs, denn damit kann der Text um komplexe Formen herumflie\u00dfen, was magazin\u00e4hnliche Layouts und visuell ansprechende Webseiten erm\u00f6glicht.<\/p>\nCSS-Misch-Modi<\/h2>\n
CSS-Misch-Modi bieten eine leistungsstarke M\u00f6glichkeit, Farben und Bilder zu mischen und so einzigartige visuelle Effekte zu erzeugen, die dein Design aufwerten k\u00f6nnen. Mit diesen Misch-Modi kannst du ansprechende Texteffekte, Bild\u00fcberlagerungen und komplizierte Hintergrundmuster erstellen. Um
background-blend-mode<\/code> zu verwenden, lass uns zuerst dar\u00fcber sprechen, was sie tut. Mit dieser Eigenschaft kannst du festlegen, wie die Hintergrundbilder und -farben eines Elements ineinander \u00fcbergehen sollen. Wenn du zum Beispiel ein Hintergrundbild und eine Hintergrundfarbe hast, kannst du sie mit verschiedenen Misch-Modi wie Multiplizieren, Raster, \u00dcberlagern usw. \u00fcberblenden. So k\u00f6nnte der Code aussehen:<\/p>\n.element {\n\nbackground-image: url('image.jpg');\n\nbackground-color: blue;\n\nbackground-blend-mode: multiply;\n\n}<\/code><\/pre>\nBei
mix-blend-mode<\/code> wird der Inhalt eines Elements (einschlie\u00dflich Bilder und Text) mit seinem Hintergrund \u00fcberblendet. Das ist besonders n\u00fctzlich f\u00fcr Texteffekte<\/a> oder das \u00dcberlagern eines Bildes \u00fcber ein anderes. Zum Beispiel so:<\/p>\n<\n\n.element {\n\nmix-blend-mode: screen;\n\n}<\/code><\/pre>\nBeliebte Misch-Modi<\/h3>\n
Hier sind ein paar der beliebtesten Misch-Modi, die du kennen musst, um diesen Effekt richtig zu nutzen:<\/p>\n
- \n
- Multiplizieren<\/strong>: Multipliziert die Farben der \u00dcberblendebene und der Basisebene, was zu einer dunkleren Farbe f\u00fchrt.<\/li>\n
- Abblenden<\/strong>: Macht die Farben heller, im Gegensatz zum Multiplizieren. Sie ist n\u00fctzlich, um Lichteffekte zu erzeugen.<\/li>\n
- \u00dcberlagern<\/strong>: Kombiniert die Misch-Modi Multiplizieren und Raster. Helle Teile des Bildes werden heller und dunkle Teile werden dunkler.<\/li>\n
- Verdunkeln und Aufhellen<\/strong>: W\u00e4hlt die dunklere bzw. hellere Farbe aus.<\/li>\n
- Farbe abwedeln und Farbe verbrennen<\/strong>: Hellt die Grundfarbe auf oder verdunkelt sie, um die \u00dcberblendfarbe wiederzugeben.<\/li>\n
- Differenz und Ausschluss<\/strong>: Dient zum Erstellen k\u00fcnstlerischer und invertierter Farbeffekte.<\/li>\n<\/ul>\n
Anpassen an die Vorlieben der Nutzer<\/h2>\n
- Abblenden<\/strong>: Macht die Farben heller, im Gegensatz zum Multiplizieren. Sie ist n\u00fctzlich, um Lichteffekte zu erzeugen.<\/li>\n
- Responsive Karten<\/strong>: \u00c4ndern des Layouts oder Stils von Karten in einem Grid- oder Flexbox-Layout auf der Grundlage der Breite ihres Containers.<\/li>\n<\/ul>\n
- Schreibe deine Abfragen<\/strong>: Genau wie Media Queries, aber f\u00fcr Container. Du schreibst eine Regel, die besagt: „Hey, wenn mein Container mindestens so breit ist, dann mach diese Stil\u00e4nderungen.“<\/li>\n<\/ul>\n
- Synchronisierte Animationen<\/strong>: Du kannst auch verschiedene Eigenschaften aneinanderreihen, damit sie sich im gleichen Tempo bewegen und einen koordinierten Effekt erzeugen.<\/li>\n
- Timing-Funktionen<\/strong>: Diese sind ein Muss, denn sie steuern die Beschleunigung und Verlangsamung des \u00dcbergangs. Eine der vielseitigsten Optionen ist hier die Funktion