Zauberei mit CSS erstellen – Filter und Mischmodi für Anfänger:innen

1. Einführung: Hallo, ich bin Aga und ich habe eine super kreative CSS-Klassen für Sie erstellt. Wenn Sie CSS Harry Potter werden möchten, ist die Zeit jetzt. In meinen Übungen wirst du mit CSS-Filtern wie Graustufen, Kontrasten, Sättigung spielen , aber auch wirklich schönen zuo zerrissenen Effekt nur in ein paar Codezeilen mit CSS-Mischmodi anwenden . Wenn Sie neugierig, gut, können Sie nur mit CSS tun, um auf Photoshop, oder anderen Grafik-Editor. Bitte bleib bei mir. Die Klassen sind für Leute bestimmt, die bereits einige Codezeilen gelesen haben. Aber wenn Sie mit CSS nicht vertraut sind, empfehle ich Ihnen dringend, meine anderen Klassen zu sehen. Tschüss, wir sehen uns in meinen Klassen. 2. Tools: Lassen Sie uns über Tools sprechen, die wir in diesen Klassen verwenden werden. Zunächst einmal werden wir unseren Lieblings-Web-Browser verwenden. Ich benutze normalerweise Chrome, wir können auch Firefox verwenden. Wir werden DevTools sehr viel verwenden. Was sind DevTools? Dies sind Web-Entwickler-Tools, die direkt in jedem Browser integriert sind. Ich verwende DevTools wirklich in Chrome, aber vielleicht haben Sie andere Präferenzen. Mal sehen, wie wir sie starten können und was tatsächlich drin ist. Wir haben das Chrome geöffnet, wir klicken mit der rechten Maustaste, „Inspect“ und knallen, wir haben die DevTools auf unserer rechten Seite des Fensters geöffnet. Was Sie hier sehen können, ist der ganze Code, HTML unserer Website es ist hier, wir haben diese Skillshare Website geöffnet. Sie können einfach überprüfen, welcher Teil des Codes für das Layout verantwortlich ist. Wenn Sie zum Beispiel im Code herausfinden möchten, wo sich die Navigation befindet, klicken Sie einfach auf diesen Pfeil und navigieren Sie einfach zu ihm. Nun wissen Sie, dass dieser Code für das Rendern der Navigation verantwortlich ist. Hier haben wir Stile, so können wir auf CSS-Datei zu bekommen. Wir können zurück zu Elementen, so unsere HTML-Code, und sehen, welche Stile hier angewendet werden. Moment mag es kompliziert erscheinen, aber keine Sorge, ich werde alles Schritt für Schritt erklären. Wenn Sie dieses Fenster in einer anderen Position haben möchten, können Sie entscheiden, ob es unten nach links sein soll oder ob es in einem separaten Fenster sein sollte. Wir können DevTools auch in Firefox öffnen. Die Regel ist die gleiche, Rechtsklick, „Inspect Element“ und Sie können das Fenster der DevTools sehen, die Teil des Firefox-Web-Browsers sind. Wieder haben wir den HTML-Code, wir haben CSS. Wir können auch die Position der DevTools ändern. Ziehen Sie sie zum Beispiel nach rechts. Eine andere Sache, die wir haben müssen, ist ein Code-Editor. Ich empfehle Ihnen, Atom zu verwenden. Sie können es kostenlos von der Website atom.io herunterladen und es ist für macOS und Windows verfügbar. Vielleicht wie andere Code-Editoren wie Sublime Text. Fühlen Sie sich frei, alles zu verwenden, was Ihren Bedürfnissen entspricht. Unter der Annahme, dass wir gehen, um verwenden, Web-Browser, die DevTools und Code-Editor. 3. CSS Filter + Übung: In dieser Lektion erfahren Sie mehr über CSS-Filter. CSS-Filter helfen uns, Effekte wie in Photoshop zu erzielen, wie z. B. Unschärfe, Anpassung des Kontrastes oder Farbverschiebung. Verfügbare CSS-Filter sind Unschärfe, Helligkeit, Kontrast, Schlagschatten, Graustufen, Farbton-Drehen, Invertieren Deckkraft, Sättigung und Sepia. Öffnen Sie CSS-Filter Ordner und klicken Sie dann auf Index HTML. Dies ist die Website, auf der wir die CSS-Filterübung machen werden. Wir haben die Bilder, die ein wenig Modifikationen erfordern, wie Änderung der Helligkeit oder Kontrast, können Sie sich frei fühlen, zu tun, was Sie wollen. Ich werde Ihnen meine Art zeigen, diese Bilder zu verbessern. Zuallererst werden wir die Dev-Tools starten. Die schnellste Möglichkeit besteht darin, die Tastenkombination mit einer Tastatur zu verwenden oder mit der rechten Maustaste zu überprüfen. Wie Sie sehen können, haben wir HTML-Code für die, für diese beiden Spitzen. Und wir werden CSS-Filter anwenden. Ich schreibe Filter, und sagen wir, ich möchte den Kontrast erhöhen. Wenn ich 1 tippe, bedeutet dies, dass sich der Zustand nicht ändert. Wenn ich 1.1 schreibe, bedeutet dies, dass der Kontrast um 10 Prozent erhöht wird. Wenn ich 0,9 schreibe, bedeutet dies, dass der Kontrast um 10 Prozent verringert wird. Lassen Sie uns den Kontrast um 20 Prozent erhöhen, und wir möchten Helligkeit hinzufügen, sowie eine, die sich nichts geändert hat. Aber lassen Sie uns es um 20 Prozent erhöhen. Das Foto ist momentan dunkler. Um das Bild in eine Old-School-Atmosphäre zu bringen, werde ich auch sättigen Filter verwenden. Wir werden all diese freien Filter kombinieren, und ich schreibe sättigen und möchte die Sättigung um 30 Prozent erhöhen, sagen wir. Ich tippe 1.3. Wie Sie sehen können, ist das Bild jetzt verbessert. Vielleicht Sättigung ein bisschen mehr. Sie können jetzt sehen, dass das Bild ein anderes Clave Wort hat. Natürlich können wir es in Photoshop ändern, aber in CSS ist es viel einfacher, wenn Sie Photoshop noch nicht geöffnet haben. Ich kopiere den Code und füge ihn in den Atom-Editor ein. Ich suche nach dem linken Selektor in CSS, ich füge, speichere und verweise auf die Seite, damit ich sehen kann, dass das Bild [unhörbar] gespeichert wird. Was ich jetzt tun werde, ist, den Hover-Effekt anzuwenden. Ich möchte dieses Bild verschwommen haben, weil es wie das Bild ist, das hinter dem Bild mit den Wellen ist, also werde ich Unschärfefilterschicht anwenden. Für die Unschärfe müssen wir den Wert in Pixeln definieren. Zum Beispiel möchte ich, dass das Bild um vier Pixel verschwommen wird und wenn ich schweben möchte, möchte ich das Bild unschärfen. Kopieren wir den Code und fügen Sie ihn in unseren Atom-Editor, in unsere CSS-Datei. Und beim Hover, also schreibe ich jetzt die Pseudo-Klasse, würde ich gerne die gleichen Werte haben, also muss ich sie kopieren, nicht zurücksetzen und verwischen, Null. Lassen Sie uns den Effekt überprüfen. Ich aktualisiere die Seite und wenn ich schwebe, ist die Unschärfe verschwunden. Sie können Tonnen von verschiedenen Effekten zu tun. Pseudo-Klassen spielen, mit Filtern spielen, mit anderen Bildern. Ich empfehle Ihnen dringend, einfach mutig zu gehen und mit ihnen zu experimentieren. Ihre Hausaufgabe ist es, Filter auf dieses Bild und auch auf den Hintergrund anzuwenden. Für den Hintergrund funktioniert es genauso. Wir wenden nur Filter an, zum Beispiel, invertiert 0.8 oder sättigen 1.5. In der nächsten Übung werde ich Ihnen etwas Magie mit Schlagschattenfilter zeigen. 4. CSS Filter: drop-shadow: Dieser Teil werden wir mit Schlagschatten-Filter spielen. Für Schlagschatten müssen wir vier Werte definieren. Die erste ist in der x-Achse versetzt, die zweite ist in y-Achse, dritte definiert, wie die Unschärfe verteilt werden soll, so dass der Weichzeichnungsradius und der letzte die Farbe ist. Schauen Sie sich nun den Schlagschatten in der Praxis an. Wir öffnen Drop-Shadow Ordner und Index HTML. Dies ist die Seite, wo wir Schlagschatten-Filter implementieren werden. Lassen Sie uns Dev-Tools wie immer öffnen und hier werden wir Filter auf dieses Bild anwenden. Ich schreibe Filter Schlagschatten und ersten Offset in x. sagen wir, fünf Pixel, Offset in y, sagen wir, 10 Pixel, der Unschärfe-Radius, sagen wir, Null und die Farbe, vorerst versuchen wir es mit Weiß. Wir haben den Schatten. Das Coolste an Schlagschatten in der Filtereigenschaft ist, dass es tatsächlich die Form der PNG-Datei adressiert. Wir haben die Akte, die Transparenz hat. Wir haben das Bild, das es ausgeschnitten ist, können Sie die Form der Hand und die Blätter sehen und besser, Filter zu verwenden, weil es die Form adressiert. Wenn wir stattdessen Box-Shadow anwenden, werden Sie sehen, dass der Effekt ein bisschen anders ist. Lassen Sie uns 10 Pixel des Offsets, 10 Pixel der Unschärfe und die Farbe Weiß als auch schreiben 10 Pixel der Unschärfe und die Farbe Weiß als und Sie können hier sehen, dass der Effekt ziemlich seltsam ist. Lassen Sie uns die Transformation kommandieren, damit sie nicht gedreht wird. Die Sache ist, dass Box-Schatten funktioniert nur vier Boxen, also egal, ob Sie Bild ausgeschnitten und in PNG-Datei gespeichert haben, behandelt es Ihr Bild genau wie das rechteckige; so hat es Höhe und Breite eingestellt. Es kann die Formen innerhalb des Bildes unterscheiden. Was ist cool über Filter-Tropfschatten ist, dass es tatsächlich respektiert diese Wir können wirklich coole Kombinationen und wirklich schöne Effekte haben. Was ich an Schlagschatten wirklich mag, ist, dass wir auch RGBA verwenden können, so dass wir den Alpha-Kanal der Farbe ändern können, was bedeutet, dass wir die Transparenz ändern können, also lasst uns schwarze Farbe haben, also ist es 000 und wenn du es würdest wie das, schließen. Wir haben die schwarze Farbe, aber wenn wir den vierten Wert hinzufügen , der sich im Alphakanal, dem Transparenzkanal, sagen wir 50 Prozent, können Sie sehen, dass Transparenz vor sich geht, was fantastisch ist. Vielleicht nehmen wir 30 Prozent und lassen Sie es uns ein wenig verwischen. Vielleicht nicht so viel. Vielleicht um fünf Pixel. Vielleicht lassen Sie es uns ein wenig auf den unteren Teilen des Bildes. Dies ist wirklich interessant in der Tat, weil es wie eine 3_D Sache aussieht, so dass Ihre Website nicht mehr flach ist und Sie können viel damit spielen , dank der Schlagschattenfilter-Eigenschaft. Ich empfehle Ihnen dringend, es zu überprüfen und Ihre eigenen Ideen und Lösungen anzuwenden. Das letzte, was ich hier erwähnen möchte, ist, dass wir auch mit Schlagschattenfilter mit CSS-Animationen spielen können. Wie Sie sehen können, ist die Sache sehr einfach, wir müssen nur Animation anwenden, die Keyframe-Animation, die die Position des Offsets für x und y ändert. Wenn wir in den Code schauen, werden Sie sehen, dass wir die Keyframes haben, Schlagschattenanimationen oder für den ersten Frame haben wir einige Arten von Werten und für den letzten hat es einen erhöhten Offset für die X-Achse und auch die größere Verbreitung der Unschärfe erhöht. Ich bin wirklich gespannt, was Sie erreichen werden, indem Sie all diese Eigenschaften wie Filterung und Animationen mischen , also lassen Sie es mich wissen, indem Sie Ihre Arbeit in den Projektabschnitt einfügen. Der letzte Teil dieser Klasse ist, wir werden uns auf CSS-Mischmodi konzentrieren. Es ist super aufregend. Also bleib bitte bei mir. 5. CSS Mischmodi – Intro: Dies ist die Zeit, um mit Mischmodi zu spielen. CSS-Mischmodi ermöglichen es uns, Elemente mit den dahinter liegenden Elementen zu mischen. Wir können den Mischmodus verwenden, in dem wir das Element und das dahinter liegende Element mischen. Für den Hintergrund-Mischmodus definieren wir die Mischung zwischen dem Hintergrundbild der Elemente und der Hintergrundfarbe. [ unhörbar] könnte mit Mischmodi vertraut sein. Zum Beispiel in Photoshop, wo Sie anwenden können, dass Freund wirkt sich auf D-Ebene. Zum Beispiel können wir Therapie- oder Overlay-Mischmodus oder Pin-Licht haben. Dies bedeutet, dass unser Bild von der Ebene zwei gemischt ist, ist gemischt, die Ebene, die dahinter hat. diesem Grund können wir diese erstaunlichen Farben erreichen. Wie Sie hier sehen können, haben wir die vollständige Liste der verfügbaren Mischmodi in Photoshop. Die Schönheit des CSS-Mischmodus ist, dass wir das gleiche in Farbe zur Verfügung haben. Lassen Sie uns überprüfen, wie CSS-Mischmodi, Wort und Praxis. Wir haben das Bild auf der linken Seite. Es ist ein einfaches IMG-Tag. Ich wende den gemischten Mischmodus an. Das erste Beispiel, das wir als Farbe überprüfen möchten. Als nächstes haben wir Farbe brennen, Farbe ausweichen, verdunkeln, Unterschied, Ausschluss, hartes Licht, Farbton, die sehr verrückt ist, erben, so dass es nichts ändert. Anfangs aufhellen, Leuchtkraft, multiplizieren, normal, Overlay, Sättigung, Bildschirm, weiches Licht, unset. Wir können mit den Farben spielen, indem Sie die Hintergrundfarbe des übergeordneten Elements dieses IMG-Elements ändern. Wir werden es blau machen und es in Ausschluss ändern. Wir werden so ein Ergebnis haben. Um den Effekt stärker zu machen, können wir Graustufen anwenden, indem wir CSS-Filter hinzufügen. Dank ihm werden wir sehen, dass die Farben begrenzt waren, weil unser Bild jetzt in Graustufen ist so dass wir nur die Ebenen haben graue Farben. In der Übung auseinander werden wir mit Mischmodi experimentieren, um den Dualtoneffekt zu erzeugen. Sie könnten mit ihm von Spotify Produkt vertraut sein. 6. Duotone-Effekt: In dieser letzten Übung werden wir einen Duoton-Effekt erzeugen. Der feinere Effekt, den wir mit CSS-Mischmodi erreichen wollen, ist dieser, den Sie auf der linken Seite sehen können. Es erinnert mich an den Duoton-Effekt, der von Spotify bekannt ist. Ich hoffe, Sie sind damit vertraut. Also fangen wir an, das Experiment zu machen. Lassen Sie uns Blend Modi Duotone Ordner öffnen, und Flash Index HTML. Dies ist, wo wir Duoton-Effekt implementieren werden. Lassen Sie uns Def-Tools öffnen und den Code überprüfen. Es gibt ein paar Dinge, die getan werden müssen, um den Duoton-Effekt zu erzeugen. Zunächst einmal werden wir die Hintergrundfarbe auf den Container anwenden, dass es ein übergeordnetes Bild ist. In unserem Fall ist es links Bildauswahl der Bildklasse. zweite Sache ist, eine Mischungsmodus-Eigenschaft auf das Bild anzuwenden und das Bild Graustufen zu machen und den Rest von allen zu kontrastieren. Um den Duotone-Effekt zu maximieren, ist es notwendig, das Bild in einer Graustufe zu haben. Das letzte, was wäre, ein Pseudo-Element mit einer Hintergrundfarbe zu erstellen, so dass wir die beiden Farben miteinander vermischt haben. Eine Farbe, die aus dem übergeordneten Container genommen wird, und die zweite, die aus dem Pseudo-Container genommen wird. Lassen Sie uns es mit roter Farbe anwenden. Sagen wir, wir wollen zuerst Blau. So werden wir die blaue Farbe sehen, stattdessen so. Jetzt können wir das Bild sehen, wir fügen Mischmodus hinzu, und wie Sie sehen können, wird das Bild mit dem blauen Hintergrund gemischt. Aber jetzt müssen wir auch die Pseudo-Klasse erstellen. Lassen Sie uns zuerst den Code kopieren und in unserem CSS implementieren. Also suche ich nach dem linken Bildcontainer, ich im Hintergrund gemacht habe. Ich füge den Mischmodus für jetzt hinzu. Wir können aufhellen verwenden, und wir wollten auch Filter anwenden, um das Bild in Graustufen zu machen. Ich schreibe, filtere Graustufen 1, und wir können den Kontrast auch um 30 Prozent [unhörbar] erhöhen . Lassen Sie uns die Seite aktualisieren, und Sie können sehen, dass Sie den Hintergrund erhalten, wir können ändern, dies ist der Hintergrund im übergeordneten Container, und einzelne bekam den Aufhellen, Mischmodus angewendet, und ein Graustufenfilter. Wir können den Mischmodus auch in einen anderen Mischmodus ändern. Ich werde vorschlagen, mit dunkeln statt aufhellen zu gehen, weil wir das Aufhellen für das Pseudo-Element verwenden werden. über Pseudo-Element sprechen, müssen wir es natürlich erstellen. Wir erstellen das Pseudo-Element für den übergeordneten Container des Bildes, also ist es in unserem Fall das linke Bild. So sieht das Pseudo-Element aus, und es ist sehr wichtig, den Inhalt zu definieren, damit das Pseudo-Element generiert wird. Es kann geleert werden, genau wie ich es hier getan habe, und natürlich die Größe davon definieren, also Höhe und Breite. Wir haben die Position absolut, Tab Null, links Null, und jetzt können wir die Hintergrundfarbe anwenden. Ich füge nur jemanden hinzu, nur einen zufälligen, und Mix-Mischmodus. Wie bereits erwähnt, werde ich mich verdunkeln anwenden. Also lassen Sie uns speichern, und aktualisieren Sie die Seite. Etwas hat sich geändert. Jemand war nicht die beste Wahl, also können wir versuchen, die Freundschaftsfarben zu verwenden. Mal sehen, welches Bild hier ist. Ich würde vorschlagen, mit einem roten, für den übergeordneten Container und für, nach zwei Klassen, den blauen zu gehen. Tut mir leid, das ist Experiment. Nachdem ich diese Farbe und für den übergeordneten Container rot eingefügt habe. Ich bin erfrischend, und das ist der letzte Effekt. Natürlich können wir versuchen, verrückter damit zu sein, und zum Beispiel Bildschirm hinzufügen, oder jede andere, die besser für Ihre Bedürfnisse passt. Aber so können Sie den Duoton-Effekt im Grunde tun, indem Sie die Farben aus dem übergeordneten Container mit einem darauf angewendeten Pseudoelement mischen .