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 .
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
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!
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.
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; }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; 
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); } 
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.
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.
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
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.
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; } } 
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; }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.
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.
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
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'.
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; }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; } 
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); } 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); }
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); } 
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:
