Kreatives Programmieren: Eine CSS-Collage erstellen

1. CSS Collage erstellen – Intro: Hallo, ich bin Aga und ich kann es kaum erwarten, dich zu meinen Klassen einzuladen. Wir erstellen CSS-Collage mit einfachem Code. Wir werden einige CSS-Magie verwenden. Wir werden eine CSS-Collage erstellen. Machen Sie sich keine Sorgen, wenn Sie denken, dass Sie Photoshop oder einen anderen Software-Grafikeditor benötigen . Wir werden nur die Macht des Codes nutzen. Mit ein paar Zeilen Code, werden wir eine wirklich interessante Fakten in Ihrem Webbrowser erstellen. Bitte vergessen Sie nicht, Ihre Arbeit im Projektbereich zu posten. Wir sehen uns in der nächsten Lektion. Tschüss. 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. Normalerweise verwende ich Chrome. Wir können auch Firefox verwenden. Wir werden viel Dev-Tools verwenden. Was sind unsere Entwicklungstools? Dies sind Web-Entwickler-Tools, die direkt in jedem Browser integriert sind. Ich verwende wirklich gerne Dev-Tools in Chrome, aber vielleicht haben Sie verschiedene Präferenzen. Mal sehen, wie wir sie starten können und was tatsächlich drin ist. Wir haben das Chrome offen. Wir klicken mit der rechten Maustaste, inspizieren und knallen, wir haben die Entwicklungstools auf der rechten Seite des Fensters geöffnet. Was Sie hier sehen können, ist der ganze Code, HTML unserer Website sicher. Wir haben diese Skillshare Website geöffnet. Sie können einfach überprüfen, welcher Teil des Codes für den Layer aus verantwortlich ist. Wenn Sie zum Beispiel in Code herausfinden möchten, wo sich die Navigation befindet, klicken Sie einfach auf diesen Pfeil und navigieren Sie einfach zu ihm. Jetzt 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 dass unser 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 nach links gegraben werden soll oder ob es in einem separaten Fenster sein sollte. Wir können auch Entwicklungstools in Firefox öffnen. Die Regel ist die gleiche Rechtsklick, Inspect-Element und Sie können das Fenster der Dev-Tools sehen, die Teil des Firefox-Web-Browsers sind. Wieder haben wir den HTML-Code, wir haben CSS. Wir können auch die Position der Entwicklungswerkzeuge ändern. Zum Beispiel, grub sie nach rechts. Die 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. Es ist für Mac OS und Windows verfügbar. Vielleicht wie andere Code-Editoren wie Sublime Text, fühlen Sie sich frei, zu verwenden, was Ihren Bedürfnissen entspricht. Zusammenfassend werden wir verwenden, Web-Browser, die Dev-Tools und Code-Editor. Bitte denken Sie daran, das Paket herunterzuladen. Es ist unter Ihrem Projektabschnitt. 3. HTML und CSS: Wenn Sie mit HTML und CSS nicht vertraut sind, empfehle ich Ihnen dringend, meine Kurse zum Codieren Ihrer eigenen Website zu besuchen. Ich zeige hier, wie CSS-Klassen zu erstellen, erklären, was unsere CSS-Selektoren. Ich würde Ihnen auch empfehlen, SVG mit einfachem CSS-Code zu animieren, also meine Editor-Klassen, in denen ich auch zeige, wie man Selektoren, CSS-Selektoren, CSS-Klassen erstellt . Also bekommst du alles hier rein. 4. Clip-path – grundlegende Formen: In dieser Lektion werden wir lernen, was Clip-Pfad tut. Clip-Path ist eine CSS-Eigenschaft. Im Allgemeinen hilft es uns, einige Formen auszuschneiden. Clip-Pfad ist nur eine Shape-Grenze. Clipping definiert, welcher Bildbereich sichtbar sein soll. Clipping ähnelt dem Zerkleinern von Papierstücken. Alles, was außerhalb des Pfades liegt, wird ausgeblendet, während alles innerhalb des Pfades sichtbar ist. Wenn beispielsweise eine Kreisfunktion eine Schnittmaske über dem oberen Rand eines Bildes setzt, sehen Sie den Teil des Bildes, der sich innerhalb des Kreises befindet. Lassen Sie uns überprüfen, wie Clip-Pfad in die Realität funktioniert. Wir haben ein einfaches div mit einem Hintergrund. Der Hintergrund sind rosa Fliesen, wir möchten hier klicken Pfad anwenden, die einen Kreis aus diesem Quadrat ausschneiden wird. Ich schreibe Clip-Pfad in der Klasse der Kacheln. Sie können sehen, dass dieses div Klassenkacheln hat und für diesen Selektor schreiben wir Clip-Pfad, Kreis. Ich möchte, dass der Radius des Kreises die Hälfte der Höhe und Breite dieses Quadrats ist. Wir müssen Photoshop nicht verwenden, um Elemente auszuschneiden. Abgesehen von Kreisen und Rechtecken, die sehr einfache und einfache Formen sind, können wir auch etwas komplizierteres anwenden. Lassen Sie uns überprüfen, ich füge jetzt das Stück Code ein. Wir haben Clip-Pfad und definiertes Polygon. Jedes dieser Elemente sind die Koordinaten. Dank ihnen können wir eine Form erstellen. In diesem Beispiel haben wir drei Scheitelpunkte. Dies ist das Endergebnis, das ein Dreieck ist. Du darfst jetzt fragen, wie ich eine solche Form erstellen kann? Muss ich mit den Zahlen experimentieren, um die perfekte Form zu finden? Natürlich brauchst du das nicht. Es gibt viele Werkzeuge. Dies ist eines der Beispiele für ein sehr cooles Werkzeug, mit dem Sie kompliziertere Formen erstellen können. Dies wird als CSS Clip-Path Maker bezeichnet. Sie können tatsächlich etwas aus den bereits vorbereiteten Formen wie Achteck, Fünfeck Sechseck, etc. mit diesem Werkzeug können Sie auch die Form anpassen. Sie können einfach die Punkte ziehen und ihre Koordinaten ändern. Lassen Sie uns diese Nachricht anwenden, weil es ziemlich Spaß macht. Lass es uns so verzerrter machen. Die Sache, die ich tun muss, ist, dass ich den Code kopiere. Ich bin hier, in meinen lokalen Akten. Ich aktualisiere es. Ich habe immer noch das Rechteck. Hier füge ich den als CSS-Code ein und ich habe meine Form. Einfach so einfach. Um zusammenzufassen, verwenden wir Clip-Pfad, um einige Elemente auszuschneiden. Wir machen einige Teile des Bildes sichtbar und einige verborgen. Alles hängt von der Form ab, die wir definieren. Wir begannen mit einem einfachen Kreis, wo wir gerade einen Radius des Kreises definiert und im zweiten Beispiel verwendeten wir Polygon. In der nächsten Lektion lernen wir, wie Sie benutzerdefinierte Formen anwenden, die beispielsweise in Illustrator erstellt wurden . Wir werden URL-Funktion verwenden. 5. Clip-path – Übung: Lassen Sie uns die Übung mit Clip-Pfad und URL-Funktion machen. Wir öffnen den Ordner „Glitzer-Clip“. Lassen Sie uns auf Index HTML doppelklicken, um zu sehen, was sich darin befindet. Also im Inneren haben wir die Datei, die bereits für Sie vorbereitet sind. Dies ist HTML-Datei, und wenn wir div-Tools starten, können wir sehen, dass dies der Abschnitt mit dem div namens Glitzer-Klasse, Glitter-Schatten und Text ist. Ich möchte die Form hier anwenden. Ich möchte aus diesem Rechteck einen Spritzer ausschneiden. Wenn wir Bilder öffnen, Unterordner werden wir sehen, dass es splash.svg gibt, die wir bereits kennen. Alles, was wir tun müssen, ist, dass wir diese SVG-Form mit clip-path Eigenschaft anwenden müssen. Was hier interessant ist, ist, dass wir eine GIF-Datei haben. Es bewegt sich also, es ist tatsächlich Glitzer. Dies ist, was ich an diesem Beispiel mag, dass wir GIFs anwenden können und Clip-Pfad funktioniert darauf. Das ist großartig. Ich habe auch eine Form von Pseudo-Klasse hinzugefügt. Wenn Sie nicht wissen, was Pseudo-Klassen und CSS sind, machen Sie sich keine Sorgen. Ich werde eine weitere Klasse erstellen, die diesem Thema gewidmet ist, aber jetzt nehmen wir es einfach als selbstverständlich an. Wir öffnen die ganze Mappe, es ist Glitzer-Clip. Wir haben index.html, und wie im vorherigen Beispiel habe ich bereits Skelett für Sie vorbereitet svg Skelett, wo Sie Clip-Pfad hinzufügen können. Ich sehe, dass hier ein Clip-Pfad-Tack fehlt, also füge ich es hinzu. Hier füge ich unsere Form hinzu, die in SVG-Datei definiert ist. Dies ist in einem HTML üblich Wenn Sie nicht mit ihm vertraut sind, bedeutet dies, dass es nicht auf der Seite gerendert wird, es ist nur die Information für mich [unhörbar]. Lassen Sie uns splash.svg öffnen. Im vorherigen Beispiel kopieren wir nur den Pfad und fügen ihn zwischen Clip-Pfad ein, sorry, es sollte geöffnet werden, also ändern Sie ihn auch. Beim Einfügen kann ich ID und Klasse entfernen, weil wir es nicht brauchen. Wir speichern es, und jetzt ist es an der Zeit, Clip-Pfad auf die bestimmte Klasse anzuwenden. Wenn ich es aktualisiere, hat sich nichts geändert. Wir möchten Clip-Pfad auf diesem div anwenden. Dies ist div Klasse genannt glitter. Wenn ich hier clip-path URL-Funktion schreibe , müssen wir auf die Form verweisen, die es im HTML-Dokument definiert ist, in Bezug auf id, also ist es Hash und der Name unserer ID. Lassen Sie uns kodieren. Wir haben index.html überprüft. Es gibt nichts definiert, also müssen wir ID definieren. Das heißt splash, nichts Neues, und aktualisieren Sie wieder, weil wir eine Änderung vorgenommen haben. Clip-Pfad, URL-Funktion und Name der ID splash, und es funktioniert. Wie Sie sehen können, wird der Splash auf Glitter angewendet, der das Glitter als Hintergrund hat. Wenn wir es entführen, wirst du sehen, dass Glitzer weg ist. Aber wir müssen diesen Clip-Pfad auch auf die nächste Klasse anwenden, die Pseudo-Klasse von vorher. Was ich gerade mache, ich öffne Glitzerschatten und hier klicke ich auf die Pseudo-Klasse vor der Pseudo-Klasse. Wenn wir den Hintergrund aufheben, werden Sie sehen, dass er verschwindet. Das ist der richtige Ort. Wir wollen hier einen Clip-Pfad anwenden und ihn auch anwenden. Jetzt haben wir eine wirklich interessante Wirkung. Denken Sie daran, dass, wenn Sie etwas in div-Tools ändern, es nur in Ihrem Webbrowser aufbewahrt wird, und es wird nur in dieser Sitzung beibehalten, dass Sie Ihren Browser geöffnet haben. Wenn ich die Seite aktualisiere, meine Änderungen verschwunden. Also müssen wir sie in unserer CSS-Datei hinzufügen. Lassen Sie uns CSS Datei öffnen. Wir haben Clip-Pfad zu Glitter und zu Glitzer-Schatten-Pseudo-Klasse hinzugefügt. Lass es uns speichern, aktualisieren, und es funktioniert. Denken Sie daran, HTML-Datei und styles.css zu speichern. Denn sehr oft ist dies der Grund, warum Ihre Änderungen nicht im Webbrowser widergespiegelt werden. Jetzt haben wir den Glitzer in diese schöne Splash-Form ausgeschnitten. 6. Clip-path – Clip-path: Zur Erinnerung: Für eine Clippfadeigenschaft können wir grundlegende Formen verwenden, die bereits im Webbrowser definiert sind. Wir können zum Beispiel Inset verwenden, die ein Rechteck aus unserem Quadrat machen und wir können auch runde Ecken haben, wir können auch Kreis, Ellipse, Polygon für kompliziertere Formen haben . Für benutzerdefinierte Formen können wir SVG verwenden. SVG steht für Scalable Vector Graphics, und wir können es in Vektorgrafiken Softwares wie Catch, Adobe Illustrator oder Inkscape erstellen . Dies ist eine großartige Lösung, weil wir entscheiden können, was die Form sein sollte, die wir im Grafik-Editor zeichnen können , und es ist sehr praktisch für uns später, um HTML- und CSS-Code zu verwenden. Wie wir es tun sollten. Es ist höchste Zeit für die URL-Funktion. Ich werde Ihnen zeigen, wie Sie es tun, indem Sie die Übung machen. So können wir jetzt den Ordner URL-Funktion öffnen, der den Ordner ist, in dem wir die Übung machen können. Ich habe bereits das Skelett, HTML-Skelett für Sie vorbereitet . Lassen Sie uns überprüfen, was sich darin befindet, indem Sie doppelklicken. So öffnet es sich im Webbrowser und wie Sie sehen können, ist es nur ein Rechteck mit einem Bild. Wir können sehen, was im Code geschieht, indem Sie mit der rechten Maustaste, inspizieren. Also starten wir die Dev-Tools und hier ist der HTML-Code. Wie Sie sehen können, haben wir das div mit einer Klasse namens splash und hier haben wir eine CSS-Stile für diese Klasse angewendet. Also haben wir den Hintergrund, wir haben die Breite und Höhe eingestellt und einige Hintergrundeigenschaften. Jetzt möchten wir SVG-Pfad anwenden, der ausgeschnitten wird, aus diesem Rechteck spritzt. Lassen Sie uns also den ganzen Ordner mit den URL-Funktionsdateien im Code-Editor öffnen. Ich benutze Atom. Also hier sind die Akten. Wie Sie sehen können, haben Sie die Bilder Unterordner, Stile und Index HTML. So können wir das HTML-Skelett sehen und hier ist SVG-Tag, aber es ist leer. Hier ist nichts geschrieben und hier möchten wir unseren SVG-Pfad anwenden. Wenn Sie also den Ordner einchecken, haben wir Bilder und wir möchten diese Form anwenden , um den Spritzer aus dem Rechteck auszuschneiden. Also werden wir Clip-Pfad verwenden. Also öffnen wir diese Form SVG, tut mir leid. Also öffnen wir Splash SVG und hier ist der SVG-Code. Es sieht aus wie HTML, aber es ist XML, weil SVG ein XML-basiertes Format ist, und was uns interessiert ist, ist dieses Pfad-Tag, also kopieren wir einfach das Pfad-Tag und fügen es zwischen Entwicklern ein. Devs steht für Definition. bedeutet, dass diese SVG nicht auf der Seite gerendert wird. So sehen Sie den Splash nicht im HTML-Dokument. Wenn wir die Seite aktualisieren, werden Sie sehen, dass sich nichts geändert hat, aber wir haben diese SVG im Code. Was hier fehlt, ist das Clip-Pfad-Tag und die ID. Wir müssen auch Clip-Pfad schließen, vergessen Sie es nicht. Sie können das Tag hier haben. So können Sie sehen, dass sich dieses Tag öffnet und es das schließende Tag, ID, nennen wir es splash. Wir können ID und Klasse entfernen, da es von Adobe Illustrator generiert wird, verwenden wir es nicht. Wir brauchen nur alle Koordinaten, die unsere Form definieren. Was wir jetzt tun müssen, ist, dass wir irgendwie von unserem CSS referenzieren müssen, das sich im Stil-Ordner befindet und wir müssen diese Form und Clip-Pfadeigenschaft anwenden. Also wissen wir alle, wie der Clippfad geschrieben werden sollte. Wir schreiben nur Clip-Pfad und hier statt Kreis oder Ellipse oder Einschub, schreiben wir URL-Funktion und hier haben wir die Definition der Form zu schreiben. Unsere Form ist bereits in index.html definiert und die ID ist splash. Also, was wir tun müssen, ist, dass wir nur auf sie ID verweisen müssen. Hash steht also für ID und CSS und der Name dieser ID, es ist splash. Wir müssen es nur retten. Wir können auch index.html speichern und jetzt beziehen wir uns auf die Seite und knallen etwas hat sich geändert. Endlich. Wenn wir gehen zu splash, Klasse, splash dev, und überprüfen Sie das Fenster mit den Stilen, so können wir sehen, dass dieser Clip-Pfad angewendet wird. Wenn wir darauf kommen, sehen wir immer noch die rechteckige. Wenn wir jetzt kommen, sehen wir, dass das Rechteck, einfach wie das. Also lasst uns eine andere Übung machen. In unserem Ordner gibt es eine andere Form, Form SVG. Also statt Splash, wollen wir Form SVG haben. Also, was wir tun, ist, dass wir einfach das Pfad-Tag genau das gleiche mit dem kopieren , was wir mit Splash SVG gemacht haben. Wir fügen es in index.html anstelle unseres vorherigen Pfades ein. Sie können immer noch ID Splash haben. Wir entfernen unnötigen Code, speichern ihn und aktualisieren ihn und jetzt haben wir die Form, die für Splash definiert ist. Zusammenfassend, was wir tun müssen, ist, dass wir SVG-Code öffnen, den Teil des Codes kopieren, der für die Generierung der Form verantwortlich ist. Also hier ist das Pfad-Tag, das wir in HTML-Datei einfügen, zu SVG, das bereits in der Definition definiert ist. Wir haben den Clippfad und der Clippfad hat die ID erstellt. Wir können es den Namen schreiben, was wir wollen, so dass es sogar Element sein kann und später in CSS, wir müssen nur darauf in der Clip-Pfad-Eigenschaft mit URL-Funktion verweisen. Also statt splash, wir müssen Element hier schreiben und wenn wir aktualisieren, hat nichts nur den Namen der Form geändert, auf die wir verweisen. 7. Clip-path – Glitter: Lassen Sie uns also die Übung mit Clip-Pfad und URL-Funktion machen. Wir öffnen den Ordner „Glitter-Clip“. Doppelklicken Sie auf „index.html“, um zu sehen, was sich darin befindet. Im Inneren haben wir die Datei, die bereits für Sie vorbereitet sind, dies ist HTML-Datei. Wenn wir Dev-Tools starten, können wir sehen, dass dies der Abschnitt mit dem div Glitter mit einer kleinen Glitzer-Klasse, Glitzer-Schatten und Text ist. Ich möchte die Form hier anwenden. Ich möchte aus diesem Rechteck einen Spritzer ausschneiden. Wenn wir Bilder Unterordner öffnen, werden wir sehen, dass es splash.svg gibt, die wir bereits kennen. Alles, was wir tun müssen, ist, dass wir diese SVG-Form anwenden müssen, mit clip-path Eigenschaft. Was hier interessant ist, ist, dass wir GIF-Datei haben. Es bewegt sich, es ist eigentlich Glitter. Das ist, was ich an diesem Beispiel wirklich mag, dass wir GIFs anwenden können und Clip-Pfad darauf arbeitet. Das ist großartig. Ich habe auch eine Form von Pseudo-Klasse hinzugefügt. Wenn Sie nicht wissen, was die Pseudo-Klasse in CSS ist, machen Sie sich keine Sorgen. Ich werde eine weitere Klasse erstellen, die diesem Thema gewidmet ist. Aber jetzt lassen Sie es uns einfach als selbstverständlich betrachten. Wir öffnen die ganze Mappe. Es ist Glitzer-Clip. Wir haben index.HTML. Wie verbessert Beispiel, habe ich bereits Skelett für Sie vorbereitet, svg Skelett, wo Sie Clip-Pfad hinzufügen können. Ich sehe diesen Clip-Weg-Schlepper. Ein Clip-Pfad-Schlepper fehlt hier, also füge ich ihn hinzu. Hier füge ich unsere Form hinzu, definiere eine „svg-Datei“. Dies ist ein Kommentar in HTML, wenn Sie nicht mit ihm vertraut sind. Es bedeutet, dass es nicht auf der Seite gerendert wird. Es ist nur diese Information für mich oder den Code oder mit dem Coder. Lassen Sie uns splash.svg öffnen. Im vorherigen Beispiel haben wir nur den Pfad kopiert und zwischen Clip-Pfad eingefügt. Tut mir leid, es sollte sich öffnen. Ich ändere es auch. Beim Einfügen kann ich ID und Klasse entfernen, weil wir sie nicht brauchen. Wir retten es. Jetzt ist es an der Zeit, Clip-Pfad auf die bestimmte Klasse anzuwenden. Wenn ich es aktualisiere und sich nichts geändert hat, möchten wir clip-path auf dieses div anwenden. Dies ist div Klasse genannt glitter. Wenn ich hier clip-path URL-Funktion schreibe, müssen wir auf die Form verweisen, die die Definition eines HTML-Dokuments ist, und Sie verweisen auf ID, also ist es Hash und der Name unserer ID, lassen Sie uns überprüfen, lassen Sie uns kodieren. Wir haben index.HTML überprüft. Es ist nichts definiert, also müssen wir ID definieren, das heißt Splash, nichts Neues. Aktualisieren Sie erneut, weil wir eine Änderung vorgenommen haben, also Clip-Pfad, URL-Funktion und Name der ID splash. Es funktioniert. Wie Sie sehen können, wird der Unmut auf Glitter angewendet, der das Glitter als Hintergrund hat. Wenn wir es auskommentieren, werden Sie sehen, dass Glitzer weg ist. Aber wir müssen diesen Clip-Pfad auch auf die nächste Klasse anwenden, die Pseudo-Klasse von vorher. Was ich gerade mache, ist, dass ich Glitzer-Schatten öffne und hier klicke auf die Pseudo-Klasse, vor der Pseudo-Klasse. Wenn wir den Hintergrund aufheben, werden Sie sehen, dass er verschwindet, also ist dies der richtige Ort. Wir wollen uns hier bei clip-path bewerben. Wenden Sie es auch an. Jetzt haben wir wirklich interessante Wirkung. Denken Sie daran, dass, wenn Sie etwas in Dev-Tools ändern, es nur in Ihrem Webbrowser aufbewahrt wird. Es wird nur in dieser Sitzung beibehalten, dass Sie Ihren Browser geöffnet haben. Wenn ich die Seite aktualisiere, meine Änderungen verschwunden. Wir müssen sie in unserer CSS-Datei hinzufügen. Lassen Sie uns CSS Datei öffnen. Wir haben Clip-Pfad zu Glitter und zu Glitzer-Schatten-Pseudo-Klasse hinzugefügt, lassen Sie es uns speichern, aktualisieren, und es funktioniert. Denken Sie daran, HTML-Datei und styles.css zu speichern , da dies sehr oft der Grund ist warum Ihre Änderungen nicht im Webbrowser widergespiegelt werden. Jetzt haben wir den Glitzer in diese schöne Splash-Form geschnitten. 8. Masken: Wir haben gelernt, wie Clip-Path Eigenschaft zu verwenden und was sind die verschiedenen Möglichkeiten. Es ist jetzt höchste Zeit, mehr über Maskierung, insbesondere Masken-Bild-Eigenschaft zu erfahren. Masken werden verwendet, um einige Teile der Elemente, einige Teile des Bildes, ein- oder auszublenden . Natürlich klingt es wie Clipping, also was ist der Unterschied? Der Hauptunterschied besteht darin, dass Masken Bilder und Clips Pfade sind. Ich werde über die Unterschiede im nächsten Abschnitt sprechen. Lassen Sie uns vorerst sehen, was die Möglichkeiten mit Maskierung sind. Lassen Sie uns den Ordner Mask öffnen. Im Inneren haben wir index.html, Stile und Bilder. Was ist da drin? Dies ist die HTML-Datei, die ich für Sie auch für diese Clip-Pfad-Übung bevorzugt habe. Aber hier werden wir eine Maske anwenden, also lassen Sie uns die Dev-Tools starten. Jetzt möchten wir auf dieses div, mit dem Klassenglitter, ein Maskenbild anwenden . Alles, was Sie wissen müssen, ist, dass die Eigenschaft Mask-Bild genannt wird. Jetzt können wir die URL-Funktion hinzufügen. Wir beziehen uns auf eine Datei und die Bilder. Wenn wir diesen Ordner öffnen, können wir sehen, dass wir in Images zwei Dateien haben: Mask-Gradient, Sie können hier sehen, dass wir die Transparenz haben, und Kreismaske, nur einen Kreis. Dies ist eine PNG-Datei, also bedeutet es, dass es sich um eine Rastergrafik handelt. Ich tippe die URL-Funktion ein. Der Pfad zum Bild, also Bilder, und der Name der Datei, die circle-mask.png ist. Was Sie sehen können, ist, dass die Maske nicht angewendet wird und der Grund dafür ist, dass wir Hersteller-Präfixe verwenden müssen. Es bedeutet, dass wir Webkit hinzufügen müssen, weil wir Chrome verwenden. Für Firefox ist es moz von Mozilla. Ich tippe die gleiche Eigenschaft nur mit dem Präfix Webkit, also Mask-Image und genau das Gleiche. Images/circle-mask.png und der Kreis wird angewendet. Es funktioniert fast genauso wie ein Clipping, aber hier verwenden wir die Raster-Datei. Wenn wir einen genaueren Blick werfen, werden Sie Pixel sehen, der pixelige Effekt. Wir werden über diesen Effekt sprechen und ihn mit Clipping in einer Weile vergleichen. Was Sie sehen können, ist, dass der Kreis auf dem Boden ausgeschnitten ist. Es liegt daran, dass das Bild nicht ganz in dieses Quadrat passt. Glücklicherweise haben wir so etwas wie Maskengröße Eigenschaft und wir können einstellen. Dies sind die gleichen Werte wie für den Hintergrund in CSS. Wir können enthalten verwenden, es bedeutet, dass die ganze Maske werden wir hier enthalten. Wir müssen das auch auf unseren Schatten anwenden. Wir werden Pseudo-Klasse, Einfügen des Codes, und Sie werden sehen, dass die Maske angewendet wird. Etwas Seltsames passiert hier. Dies liegt daran, dass die Maske wiederholt wird. Wenn wir Maskengröße für eine kleinere setzen, wenn wir hier wie 50 Pixel hinzufügen, werden Sie sehen, dass wir Tonnen von kleinen Masken auf unsere rechteckigen angewendet haben. Wir können dies auch für Schatten tun , indem wir 50 Pixel eingeben. Es ist ein wirklich interessanter Effekt. Sie können tatsächlich viel damit experimentieren. Wenn Sie die Maske nicht wiederholen möchten, gibt es eine CSS-Eigenschaft namens mask-repeat. Wir können entscheiden, ob wir wiederholen wollen, ob wir nur in der X-Achse oder in Y wiederholen wollen. Denken Sie daran, dass Sie für Chrome immer Webkit-Präfix hinzufügen müssen, aber wir müssen auch nur die Eigenschaft hinzufügen, ohne Präfixe für den anderen Browser hinzuzufügen. Mask-Repeat und wir haben Repeat-x. Es wird hier durchgestrichen, weil es in Chrome nicht funktioniert, aber für andere Browser kann es funktionieren. Ich kopiere das für den glitzernden Schatten. Lass uns umgekehrt machen, da wird Y angewendet, also haben wir so etwas. Sie können wirklich verrückte Effekte erstellen. Sie können auch keine Wiederholung hinzufügen, was bedeutet, dass die Maske nur an einer Stelle angewendet werden kann. Keine Wiederholung hier. Glitzer-Schatten, keine Wiederholung. Wir haben einen kleineren. Wir könnten auch die Größe ändern, um die gesamte Maske in das Bild passen zu lassen. Wiederholen und enthalten. 9. Masking: Lassen Sie uns eine kurze Zusammenfassung über Maskierung machen. Was wissen wir, ist, dass wir Mask-Bild-Eigenschaft anwenden , um einige Elemente in Bezug auf die Maske zu verstecken oder anzuzeigen. Für einen erwachsenen, müssen wir uns an Webkit-Präfix erinnern, weil es sonst nicht funktioniert. Bitte denken Sie daran. Eine andere Sache über Maskierung ist, dass wir Maskengröße anwenden können , um zu definieren, was die Größe der Maske sein sollte. Die gesamte Maske kann in das Bild oder in das Element passen. Wir können auch eine Maske auftragen - wiederholen, um das Muster über der Maske zu wiederholen. Dies sind also die Eigenschaften, die auch für den Hintergrund in CSS angewendet werden können. So können wir sagen, dass Maske irgendwie mit dem Hintergrund verwandt ist, und natürlich können wir uns auch an Webkit-Präfixe für diese Eigenschaften erinnern. Masken können Rasterbilder mit unterschiedlichen Transparenzstufen sein. Das beste Format ist also PNG-Datei, und wir werden PNG mit Transparenzen nur in einer Minute anwenden. In unserem Übungsmappe haben wir auch Kreismasken-Gradient. Was wir hier sehen können, ist, dass auf dem Kreis der Hintergrund verblasst. Lassen Sie uns versuchen, diese Art von Maske anzuwenden. Im vorherigen Beispiel haben wir nur ein einfaches, undurchsichtiges Bild angewendet. Machen wir es jetzt klar im Code-Editor. Also haben wir unser Glitzer-Div, Glitzer-Schatten. Wir haben den Text. 10. Abschließende Übung – Water: Es ist Zeit für die letzte Übung mit Maskierung und Clipping. Ich hoffe, Sie haben Spaß beim Spielen und Experimentieren mit diesen CSS-Eigenschaften. Lassen Sie uns Collage-Wasser-Ordner öffnen. Wir können überprüfen, was im Index html ist. Nun, es gibt einige Rechtecke, einige Bilder und den Titel. Aber der Effekt, den wir am Ende erreichen möchten, ist dies. Was Sie sehen können, ist, dass wir einen Spritzer anwenden, wir schneiden einige Elemente des Bildes mit Clipping und Maskierung aus. Ich werde diese Übung Schritt für Schritt mit Ihnen machen. Also öffne ich den ganzen Ordner im Atom-Code-Editor und wenn ich in HTML schaue, kann ich sehen, dass ich bereits eine Struktur erstellt habe. Ich habe den Platz, um svg-Code für die Clip-Pfade einzufügen und auch einen Ordner mit Bildern. Wenn wir auf die Seite gehen, werden Sie sehen, dass wir diesen Spritzer auf den Behälter mit diesem Farbverlauf anwenden müssen. So können wir DevTools verwenden, um zu überprüfen, was der Klassenname ist , der diesen Block mit Farbverlauf generiert. Eigentlich ist es vorher, es wurde diese Pseudo-Klasse auf den Container angewendet. Sie können sehen, dass dies der Hintergrund ist und zu diesem Container, zu diesem Block, müssen wir unseren Clip-Pfad anwenden, diesen. Wenn wir also Bilder öffnen, können wir sehen, dass dieser Blitz etwas ist, das ist etwas, das wir auf unseren Container anwenden. Der Name ist also Klasse splash-2.svg. Also öffnen wir es, wir kopieren den Pfad. Natürlich müssen wir Clip-Pfad-Tag erstellen, schließen und den Pfad darin einfügen. Natürlich können wir die Dinge loswerden, die wir nicht benutzen werden. Zum Beispiel id, wir speichern es und wir müssen ID für den Clip-Pfad hinzufügen , weil wir in CSS darauf verweisen werden. Wir können Splash links hinzufügen, weil es auf der linken Seite ist. Ich kann sehen, dass ich die Eingabe gemacht habe, also muss ich es reparieren. Ja, jetzt ist es richtig, speichern und dann müssen wir Clip für Container anwenden, bevor. Es ist also Clip-Pfad, URL-Funktion und im Inneren schreiben wir Splash links, und natürlich Semikolon am Ende der Zeile und aktualisieren die Seite. Ich kann sehen, dass meine Form angewendet wird. Die anderen Formen, die ich ausschneiden muss, sind diese beiden. Auch hier können wir Clipping verwenden, aber wir können auch versuchen, es zu maskieren, es wird dasselbe tun. Der Grund, warum ich vorschlage, Clipping Es liegt daran, dass wir SVG-Dateien haben. Wir machen den kleinen Bonus für diese Übung mit Maskierung, aber jetzt lassen Sie uns Clipping verwenden. Oben rechts haben wir diese Form, also ist es Spritzer eins. Also öffne ich hier, kopiere den Pfad, füge ihn in den Index html mit der gleichen Sache ein. Also ClipPath Tag, id, lassen Sie es spritzen, oben rechts. Schließen wir das Tag, keine Tippfehler. Pfad einfügen, sorry, Pfad einfügen, ID entfernen, speichern. Lassen Sie uns mit DevTools überprüfen, auf welche Klasse wir diese Wiedergabe anwenden müssen. Es ist nur das Wasser. Also suchen wir zuerst Wasser hier. Wir wenden Linkpfad, URL-Funktion, Splash, Top-Rechte, Speichern, Aktualisieren an. Wir lassen unseren Spritzer anwenden. Der letzte. Das ist also der Splash Strich frei, kopieren, ClipPath, ID, Splash Button rechts, Einfügen und natürlich das Schließen der Registerkarte. Das Letzte ist, dass wir uns bewerben müssen. Lassen Sie uns einfach überprüfen, zu welcher Klasse, weil ich mir nicht sicher bin. Es nennt sich Wasser Sekunde. Also suche ich nach Wasser Sekunde in meiner CSS-Datei. Das gleiche, nur die Anwendung von ClipPath, URL-Funktion, lassen Sie uns einfach Platz hier. Es ist Splash, unten rechts. Aktualisieren, und die Übung ist fertig. Die Sache, die ich hier erwähnen möchte, ist, dass dies der Container ist. Lassen Sie uns das für eine Weile kommentieren. Dies ist der Container mit dem Hintergrund. Ich habe auch Hintergrundanhang behoben. So ist der Hintergrund fixiert und wir haben diese Art von Paralleleffekten in der Bewegung. Deshalb denke ich, dass es irgendwie anders und interessant ist. Sie können dies im Auge haben, wenn Sie Ihre Projekte durchführen. Das ist erledigt. Das letzte, was ist der kleine Bonus für diese Übung. 11. Exercise: Ich habe gerade Masken erstellt. Dies sind PNG-Dateien. Wir können sehen, ist, dass sie hier unten transparent sind. Lassen Sie uns diese beiden Spritzer anwenden. Anstelle von Clipping, können Maskierung hinzufügen. PNG-Dateien, es ist Maskenbild, URL-Funktion, Bilder, splash- 2 PNG, und natürlich, Hinzufügen von Anbieter-Präfix, das Webkit ist. Lassen Sie uns die Seite aktualisieren. Wir können sehen, dass der Spritzer glatt und irgendwie verschwommen ist, aber die Maske wiederholt sich. Natürlich müssen wir Maskenwiederholung hinzufügen, keine Wiederholung. Entschuldigung. Natürlich mit Hersteller-Präfix und Maskengröße, lassen Sie uns enthalten hinzufügen, und das gleiche mit webkit. Natürlich können die gleichen Eigenschaften, die wir auf unsere Wasserklasse anwenden können. Anstelle von Clip fügen wir Schrägstrich 1 hinzu. Speichern, erfrischend, und das ist die gleiche verschwommene Wirkung. Natürlich können Sie viel damit experimentieren. Wir können ein paar Löcher in der Maske machen. Alles ist bereit für Ihre Kreativität und den endgültigen Effekt, den Sie erreichen möchten. Vergessen Sie nicht, Ihr Projekt zu drücken.