Fügen Sie SVG-Filter mit CSS hinzu

Fügen Sie SVG-Filter mit CSS hinzu

SVG gibt es seit Anfang der 2000er Jahre, und dennoch gibt es interessante Möglichkeiten, wie Designer es nutzen können. In diesem Tutorial liegt der Schwerpunkt auf den Filtern, die über SVG angewendet werden. Anstatt sie jedoch auf ein SVG-Bild anzuwenden, zeigen wir Ihnen, wie sie auf reguläre Seiteninhalte angewendet werden können.

Die Art und Weise, wie der Filter auf die SVG angewendet wird, erfolgt tatsächlich über CSS, indem angegeben wird, welche ID der Filter hat. Mit derselben Idee kann der Filter beispielsweise auf normalen Text angewendet werden. Das Gute daran ist, dass Sie Ihrem Text einige großartige grafische Darstellungen hinzufügen können, die bisher nur möglich gewesen wären, wenn Sie eine Reihe von Photoshop-Filtern angewendet und als Bild gespeichert hätten. Mit dem SVG-Filter bleibt der Text zugänglich und auswählbar, da er immer noch nur ein reguläres Textelement auf Ihrer Seite ist.

Der Code hier erstellt eine Verschiebungskarte zu Text, die auch eine Alpha-Karte enthält, damit sie wässrig erscheint und zum Thema der Seite passt. Dann wird ein weiterer Filter erstellt, der ein Menü als Wasserflecken erscheinen lässt, die leicht zusammenkleben, aber auseinanderfallen, wenn sie sich weiter weg bewegen. Auch dies entspricht dem Thema dieser bestimmten Seite und zeigt zwei kreative Möglichkeiten, um SVG-Filter auf andere Inhalte anzuwenden.



Möchten Sie mehr über SVG erfahren? Schauen Sie sich unseren Artikel an Alles, was Sie über SVG im Web wissen müssen . Alternativ können Sie Ihren Websites mit einer dieser coolen Funktionen ein gewisses Interesse verleihen Beispiele für CSS-Animationen .

01. Fangen Sie an

Zunächst müssen Sie die Projektdateien über den Link direkt oben herunterladen. Sobald Sie das getan haben, ziehen Sie die Start Projektordner auf Ihre Code-IDE und öffnen Sie die index.html Seite. Sie werden sehen, dass bereits einige Seiteninhalte geschrieben wurden. Der Header-Abschnitt muss erstellt werden und enthält die Überschrift, die von einem SVG-Filter beeinflusst wird. Fügen Sie den Code hier direkt innerhalb des hinzu Körper Etikett.

Underwater Adventure Park

02. Schließen Sie die Kopfzeile

Jetzt ist die Kopfzeile fertig, und der gesamte Text dafür ist vorhanden. Wenn Sie Ihre Seite gerade im Browser anzeigen, sehen Sie ein Wasserbild mit einem Text darauf. Die Überschrift, die derzeit noch nicht gestylt ist, wird gestylt und mit dem SVG-Filter versehen.

wie man eine dynamische Pose zeichnet

Experience the Ocean
Like Never Before

Underwater Adventure Park is an experience unlinke anything you have ever had. Travel to the depths of the Ocean and walk among the Sea Life!

03. Erstellen Sie einen SVG-Filter

Der SVG-Code kann an einer beliebigen Stelle auf der Seite hinzugefügt werden. Da er jedoch nicht angezeigt wird, empfiehlt es sich, ihn vor dem schließenden Body-Tag unten zu platzieren. Der SVG-Filter erzeugt Turbulenzgeräusche. Beachten Sie, dass der Filter eine ID hat. Auf diese Weise kann das CSS diese auf ein anderes Element auf der Seite anwenden.

04. Verstecke die SVG

Gehen Sie zu page.css Datei jetzt, und vor allem der CSS-Code für den Rest der Seite wird dort sein, wo unser neues CSS hingehen wird. Hier ist die SVG so eingestellt, dass sie überhaupt nicht auf der Seite angezeigt wird. Auf das Tag mit der Überschrift zwei wird die richtige Schriftart angewendet.

svg { display: none; } h2 { font-size: 5.5vw; font-family: 'Crete Round', serif; }

05. Zur Überschrift hinzufügen

Das Zeilenhöhe wird auf Null gesetzt, da die Überschrift später animiert wird. Daher ist es wichtig, die Skalierung auf der Seite zu kontrollieren. Es ist auch etwas gepolstert, damit es mit dem richtigen Platz um ihn herum sitzt und die Farbe geändert wird.

.headline { line-height: 0; display: inline-block; padding: 70px; color: #ccffff;

06. Beende die Überschrift

SVG-Filter mit CSS hinzufügen: Beenden Sie die Überschrift

Das SVG wird verwendet, um den Überschriftentext zu verschieben

Beim Abschluss der Überschriftenklasse wird in der nächsten Zeile die Verschiebungsfilter ID in der SVG zum Text. Das translate3d stellt sicher, dass der Text hardwarebeschleunigt wird. Die Skala wird leicht geändert, um sicherzustellen, dass die Verschiebung beim Anwenden richtig aussieht.

filter: url(#displacementFilter); transform: translate3d(0, 0, 0); transform: scaleY(1.8) rotateY(-2deg); }

07. Verschieben

SVG-Filter mit CSS hinzufügen: Verschieben

Und jetzt wird der Text verschoben

Wenn Sie den Filter zu diesem Zeitpunkt testen, ersetzen die Turbulenzen den Text vollständig. Das ist einfach zu beheben. Kehren Sie zum Filtercode auf der Seite index.html zurück. Dies nimmt die Turbulenzen und die Quellgrafik, die der Text ist, und wendet sie als Verschiebungsfilter an. Versuchen Sie, die Grundfrequenz und die Anzahl der Oktaven in den Turbulenzen zu ändern.

08. Erweichen Sie die Kanten

SVG-Filter mit CSS hinzufügen: Kanten weicher machen

Verwenden Sie eine Gaußsche Unschärfe, um den Text weicher zu machen

Die Kanten sehen für einen wässrigen Effekt etwas hart aus. Das kann mit einer Gaußschen Unschärfe geheilt werden. Fügen Sie den Code nach der Verschiebungskarte hinzu. Wenn Sie die Seite aktualisieren, hat sie den Text definitiv verwischt, aber die Verschiebung ist weg. Auch dies sind Elemente, die auf dem Weg zur Erzeugung des Effekts behoben werden können.

09. Verbinden Sie die beiden

Hinzufügen von SVG-Filtern mit CSS: Zusammensetzen der beiden

Kombinieren Sie die Unschärfe und Verschiebung für einen angenehmeren Effekt

Fügen Sie die zusammengesetzte Linie hier unterhalb der vorherigen Gaußschen Unschärfe hinzu. Sie werden sehen, dass dies die Unschärfe und die Verschiebung miteinander kombiniert und dem Text einen wässrigen durchscheinenden Effekt verleiht. Es hat die Kanten etwas aufgeweicht, aber nicht genug. Es wäre gut, wenn die ursprüngliche Unschärfe hinzugefügt werden könnte.

wie man die Perspektive im Illustrator loswird

10. Führen Sie die Unschärfe zusammen

Hinzufügen von SVG-Filtern mit CSS: Zusammenführen der Unschärfe

Mit einem Zusammenführungsvorgang sieht es noch besser aus

Durch eine Zusammenführungsoperation kann das Endergebnis des Verbundwerkstoffs mit dem Unschärfeeffekt zusammengeführt werden. Dies sieht nun so aus, als würde es zum Hintergrundbild passen und zu den Lichtlinien, die durch das Wasser kommen. Das Beste am Text ist, dass er immer noch auswählbar und Teil der Seite ist, anders als wenn Sie dies in Photoshop erstellt haben.

11. Erstellen Sie eine Animation

Geh zurück zum page.css Datei und fügen Sie in den Keyframes wie hier gezeigt. Dadurch wird nur die Schriftgröße von einer vertikalen Breite von Null auf eine vertikale Breite von 5,5 vergrößert. Zu Beginn wird dies auf die Überschrift angewendet, sodass der Text vergrößert und auf dem Bildschirm angezeigt wird. Wenn sich der Text bewegt, ändert sich auch die Verschiebung über die Länge, was zu einer wässrigen Welligkeit führt.

@keyframes scaler { from { font-size: 0vw; } to { font-size: 5.5vw; } }

12. Ändern Sie den H2-Stil

Hinzufügen von SVG-Filtern mit CSS: Ändern Sie den H2-Stil

Ersetzen Sie den h2, um eine Animation einzuführen

Das h2 Der Stil wurde zuvor in Schritt 4 hinzugefügt. Ersetzen Sie diesen Code durch diesen neuen Code, der die CSS-Animation über vier Sekunden zur Überschrift hinzufügt. Die Animation stoppt und hält den letzten Keyframe. Speichern Sie dies und testen Sie es im Browser, um zu sehen, wie der Text angezeigt wird.

h2 { line-height: 0; font-size: 0vw; animation-name: scaler; animation-duration: 4s; animation-fill-mode: forwards; font-family: 'Crete Round', serif; }

13. Navigation hinzufügen

Erstellen wir nun eine geeignete, von Wasserflecken inspirierte Animation mit einem anderen SVG-Filter. Fügen Sie den folgenden Navigationsinhalt ganz oben im Body-Code vor der Überschrift hinzu, die im ersten Schritt des Lernprogramms gestartet wurde. Dadurch werden die Grundlagen eines Hamburgermenüs in einem Kreis erstellt.

14. Beenden Sie die Navigation

Jetzt können die restlichen Navigationselemente hinzugefügt werden. Hierbei wird auch die Open-Source-Symbolbibliothek Font Awesome verwendet, die dem Kopfabschnitt hinzugefügt wurde, um eine Verknüpfung vom CDN dieser Bibliothek herzustellen. Jedes kreisförmige Menüelement enthält ein Symbol.

15. Fügen Sie den neuen Filter hinzu

Für diesen Effekt wird ein weiterer Filter hinzugefügt. Fügen Sie diesen Code in der SVG nach dem schließenden Filter-Tag des zuvor hinzugefügten Codes hinzu. Hier werden die Effekte sehr ähnlich wie bisher aufgebaut. Dadurch sieht das Menü aus wie klebrige Flüssigkeitsklumpen, die sich auseinander bewegen.

wie man eine Ebene in Photoshop verschwimmt

16. Beenden Sie den Filter

Der Rest des Filters wird hier hinzugefügt, wodurch der Effekt vervollständigt wird, der auf jedem Kreis der Menüelemente platziert wird. Dadurch wird den Elementen der Flüssigkeits-Blob-Effekt hinzugefügt. Speichern Sie diese Seite und wechseln Sie dann zur Datei 'design.css'.

17. Wenden Sie den Filter an

Der CSS-Code kann nun zu den verschiedenen hinzugefügt werden design.css , nur um das gesamte Navigations-CSS am selben Ort zusammenzuhalten. Es wurde etwas Code hinzugefügt, aber hier wird der Filter auf das Menü angewendet, bei dem es sich um ein festes Menü handelt, sodass es jederzeit auf dem Bildschirm angezeigt wird.

.menu { filter: url(“#shadowed-blob'); position: fixed; padding-top: 20px; padding-left: 80px; width: 650px; height: 150px; box-sizing: border-box; font-size: 20px; text-align: left; }

18. Lassen Sie das Menü funktionieren

Das Menü wird so eingestellt, dass es unsichtbar wird, wenn das Menü geöffnet ist. Das Hover-Element jedes Menüelements wird so erstellt, dass sich etwas ändert, wenn der Benutzer darüber fährt. Jedes untergeordnete Element des Menüs erhält einen Übergang von 0,4 Sekunden, wenn die Menüelemente an ihre ursprüngliche Position zurückkehren.

.menu-open { display: none; } .menu-item:hover { background: #47959f; color: #b2f0f8; } .menu-item:nth-child(3), .menu-item:nth- child(4), .menu-item:nth-child(5), .menu- item:nth-child(6) { transition-duration: 400ms; }

19. Fügen Sie einen Hamburger hinzu

Fügen Sie SVG-Filter mit dem CSS: Burger-Symbol oben hinzu

Ändern Sie den Z-Index des Burger-Symbols, um ihn nach oben zu bringen

Das Burger-Symbol wird durch Ändern des Symbols über die anderen Elemente gehoben Z-Index . Das Menü wird größer, wenn der Benutzer darüber fährt. Wenn Sie auf das Menü klicken, wird der Burger von drei Zeilen eines Burgers zu einem 'X' animiert, was die Option zum Entfernen des Menüs anzeigt.

bester PC für Grafikdesign 2015
.menu-open-button { z-index: 2; transition-timing-function: cubic- bezier(0.175, 0.885, 0.32, 1.275); transition-duration: 400ms; transform: scale(1.1, 1.1) translate3d (0, 0, 0); cursor: pointer; } .menu-open-button:hover { transform: scale(1.2, 1.2) translate3d (0, 0, 0); }

20. Verschieben Sie die Elemente

Der erste Menüpunkt ist eigentlich das dritte untergeordnete Element des Menüs, da sich ein Kontrollkästchen und der Hamburger davor befinden. Wenn Sie dies hinzufügen, kann sich das erste Menüelement in Position bewegen, sobald der Benutzer auf das Menü klickt. Jedes Menüelement wird mit einer etwas längeren Zeit ausgezogen.

.menu-open:checked + .menu-open-button { transition-timing-function: linear; transition-duration: 400ms; transform: scale(0.8, 0.8) translate3d (0, 0, 0); } .menu-open:checked ~ .menu-item { transition-timing-function: cubic- bezier(0.165, 0.84, 0.44, 1); } .menu-open:checked ~ .menu-item:nth-child(3) { transition-duration: 390ms; transform: translate3d(110px, 0, 0); }

21. Adressieren Sie die verbleibende Bewegung

Hinzufügen von SVG-Filtern mit CSS: Verbleibende Bewegung

Bewegen Sie die Menüelemente mit unterschiedlichen Geschwindigkeiten, um ein flüssigeres Erscheinungsbild zu erzielen

Die restlichen Menüelemente werden mit unterschiedlichen Geschwindigkeiten ausgefahren. Auf diese Weise können die Elemente in den frühen Phasen der Animation zusammenkleben, wodurch mithilfe des SVG-Filters ein blödes, flüssiges Aussehen entsteht. Speichern Sie die Dokumente und sehen Sie die fertigen Ergebnisse in Ihrem Browser.

.menu-open:checked ~ .menu-item:nth-child(4) { transition-duration: 490ms; transform: translate3d(220px, 0, 0); } .menu-open:checked ~ .menu-item:nth-child(5) { transition-duration: 590ms; transform: translate3d(330px, 0, 0); } .menu-open:checked ~ .menu-item:nth-child(6) { transition-duration: 690ms; transform: translate3d(440px, 0, 0); }

Generate, die preisgekrönte Konferenz für Webdesigner, kehrt vom 24. bis 25. April nach NYC zurück! Um Tickets zu buchen, besuchen Sie www.generateconf.com

Generate, die preisgekrönte Konferenz für Webdesigner, kehrt vom 24. bis 25. April nach NYC zurück! Um Tickets zu buchen, besuchen Sie www.generateconf.com

Dieser Artikel wurde ursprünglich im Creative Web Design Magazine veröffentlicht Webdesigner . Ausgabe 283 hier kaufen oder Abonnieren Sie hier den Web Designer .

Zum Thema passende Artikel:

  • Animieren Sie SVG mit JavaScript
  • Die vollständige Anleitung zu SVG
  • SVG-Animationen mit GSAP aufladen