Προσθέστε φίλτρα SVG με CSS

Η SVG ήταν γύρω από τις αρχές της δεκαετίας του 2000, και όμως εξακολουθούν να υπάρχουν ενδιαφέροντα τρόποι που οι σχεδιαστές βρίσκουν να το χρησιμοποιήσουν. Σε αυτό το σεμινάριο, η εστίαση θα είναι στα φίλτρα που εφαρμόζονται μέσω του SVG - αλλά αντί να τα εφαρμόζουμε σε μια εικόνα SVG, θα σας δείξουμε πώς μπορούν να εφαρμοστούν σε οποιοδήποτε περιεχόμενο κανονικής σελίδας.

Ο τρόπος με τον οποίο εφαρμόζεται το φίλτρο στο SVG είναι στην πραγματικότητα μέσω του CSS, λέγοντάς το τι αναγνωρίζεται το φίλτρο. Χρησιμοποιώντας την ίδια ιδέα, το φίλτρο μπορεί να εφαρμοστεί σε κανονικό κείμενο, για παράδειγμα. Το καλό μέρος για αυτό είναι ότι μπορείτε να προσθέσετε κάποια μεγάλη γραφική εμφάνιση στο κείμενό σας, το οποίο θα είχε προηγουμένως πιθανό εφόσον εφαρμόζεται ένα αριθμό φίλτρων Photoshop και εξοικονομώντας ως εικόνα. Χρησιμοποιώντας το φίλτρο SVG, το κείμενο παραμένει προσβάσιμο και επιλέξιμο, καθώς εξακολουθεί να είναι ακόμα απλά ένα κανονικό στοιχείο κειμένου στη σελίδα σας.

Ο κώδικας εδώ θα δημιουργήσει ένα χάρτη μετατόπισης σε κείμενο που περιέχει επίσης ένα χάρτη άλφα για να φανεί υγρό και να προσαρμόσει το θέμα της σελίδας. Στη συνέχεια, θα δημιουργηθεί ένα άλλο φίλτρο που κάνει ένα μενού να εμφανίζεται ως blobs νερού, το οποίο κολλάνε ελαφρώς μαζί, αλλά το blob, καθώς κινούνται πιο μακριά. Και πάλι αυτό συνεχίζει με το θέμα αυτής της συγκεκριμένης σελίδας και δείχνει δύο δημιουργικούς τρόπους για την εφαρμογή φίλτρων SVG σε άλλο περιεχόμενο.

Ενδιαφέρεστε να μάθετε περισσότερα για το SVG; Ρίξτε μια ματιά στο άρθρο μας Όλα όσα πρέπει να γνωρίζετε για το SVG στον ιστό . Εναλλακτικά, προσθέστε κάποιο ενδιαφέρον για τους ιστότοπούς σας με ένα από αυτά τα δροσερά Παραδείγματα κινούμενων σχεδίων CSS .

• Κατεβάστε τα αρχεία Για αυτό το σεμινάριο από το FileSilo

01. Ξεκινήστε

Πρώτον, πρέπει να κάνετε λήψη των αρχείων του έργου χρησιμοποιώντας τον σύνδεσμο απευθείας παραπάνω. Μόλις το κάνετε αυτό, σύρετε το αρχή φάκελο έργου στον κωδικό σας IDE και ανοίξτε το index.html σελίδα. Θα δείτε ότι υπάρχει κάποιο περιεχόμενο σελίδας που έχει ήδη γραφτεί. Το τμήμα κεφαλίδας πρέπει να δημιουργηθεί και αυτό θα περιέχει τον τίτλο που θα επηρεαστεί από ένα φίλτρο SVG. Προσθέστε τον κώδικα εδώ, ακριβώς μέσα στο σώμα ετικέτα.

 & lt; div class = "bg" & gt;
& lt; div class = "middle" & gt;
& lt; h2 class = "headline" & gt; υποβρύχια
Adventure Park & ​​LT; / H2 & GT;
& lt; div class = "intro_block" & gt; 

02. Κλείστε την κεφαλίδα

Τώρα ο επικεφαλής ολοκληρώνεται, με όλο το κείμενο για αυτό στη θέση του. Εάν προβάλετε τη σελίδα σας στο πρόγραμμα περιήγησης αυτή τη στιγμή, θα δείτε μια εικόνα νερού με κάποιο κείμενο σε αυτό. Ο τίτλος, ο οποίος εξακολουθεί να είναι σκόπιμος, πρόκειται να διακοσμηθεί και να έχει το φίλτρο SVG να εφαρμοστεί σε αυτό.

 & lt; h3 class = "subhead" & gt; εμπειρία ο ωκεανός
& lt; br & gt; όπως ποτέ πριν & lt; / h3 & gt;
& l; p τάξη = "intro" & gt; υποβρύχια
Το Adventure Park είναι μια εμπειρία
χωρίς να κάνετε τίποτα που έχετε ποτέ
είχε. Ταξιδέψτε στα βάθη του
τον ωκεανό και να περπατήσετε ανάμεσα στο
Θαλάσσια ζωή! & Lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt; 

03. Δημιουργήστε ένα φίλτρο SVG

Ο κωδικός SVG μπορεί να προστεθεί οπουδήποτε στη σελίδα, αλλά όπως δεν φαίνεται, μπορεί να είναι καλή ιδέα να το τοποθετήσετε στο κάτω μέρος, πριν από την ετικέτα του σώματος κλεισίματος. Το φίλτρο SVG δημιουργεί θόρυβο στροβιλισμού. Παρατηρήστε το φίλτρο έχει ένα αναγνωριστικό - αυτό είναι που επιτρέπει στο CSS να το εφαρμόσει σε άλλο στοιχείο στη σελίδα.

 & lt; svg xmlns = "http://www.w3.org/2000/svg" & gt;
& lt; φίλτρο ID = "DisplacementFilter" & GT;
& lt; τύπος φτωχότητας = "αναταραχή"
basefrequency = "0.004" numoctaves =
"2" αποτέλεσμα = "αναταραχή" / & gt;
& lt; / Filter & GT;
& lt; / svg & gt; 

04. Απόκρυψη του SVG

Μετακινηθείτε στο Σελίδα.CSS Αρχείο τώρα και πάνω απ 'όλα ο κώδικας CSS για το υπόλοιπο της σελίδας θα είναι όπου θα πάνε τα νέα μας CSS. Εδώ ο SVG έχει οριστεί ότι δεν εμφανίζεται καθόλου στη σελίδα. Η επικεφαλίδα δύο ετικέτας έχει ρυθμιστεί ώστε να έχει το σωστό τύπο που εφαρμόζεται σε αυτό.

 SVG {
Εμφάνιση: Κανένα;
}
h2 {
Μέγεθος γραμματοσειράς: 5.5VW;
Οικογένεια γραμματοσειράς: «Κρήτη γύρο», Serif?
} 

05. Προσθήκη στον τίτλο

ο ύψος γραμμής Έχει ρυθμιστεί στο μηδέν επειδή αργότερα ο τίτλος θα κινηθεί, οπότε ο έλεγχος της κλιμάκωσης στη σελίδα είναι σημαντική. Δίνεται επίσης κάποια επένδυση έτσι ώστε να κάθεται με τη σωστή ποσότητα χώρου γύρω από αυτό και το χρώμα αλλάζει.

 .HEADLINE {
Γραμμή-Ύψος: 0;
Οθόνη: Inline-Block.
Padding: 70px;
Χρώμα: #CCFFFF; 

06. Τελειώστε τον τίτλο

Σε φινίρισμα από την κατηγορία τίτλων, η επόμενη γραμμή ισχύει μετατοπιστήριο ID στο SVG στο κείμενο. ο translate3d Εξασφαλίζει ότι το κείμενο γίνεται επιταχυνόμενο υλικό. Η κλίμακα αλλάζει ελαφρά για να διασφαλιστεί ότι όταν εφαρμόζεται η μετατόπιση, φαίνεται δεξιά.

 Φίλτρο: URL (#DisplacementFilter);
Μετασχηματισμός: Translate3D (0, 0, 0);
Μετασχηματισμός: Περιστροφή (1,8) περιστροφικό (-2deg).
} 

07. Κάντε την απόκλιση

Εάν δοκιμάσετε το φίλτρο σε αυτό το στάδιο, η αναταραχή αντικαθιστά πλήρως το κείμενο. Αυτό είναι εύκολο να διορθωθεί. Επιστρέψτε στο κωδικό φίλτρου στη σελίδα Index.html. Αυτό παίρνει την αναταραχή και το γραφικό πηγαίου, το οποίο είναι το κείμενο και το εφαρμόζει ως φίλτρο μετατόπισης. Δοκιμάστε να αλλάξετε τη συχνότητα βάσης και τον αριθμό των οκταβίων στην αναταραχή.

 & lt; fedisplacementmap in2 = "αναταραχή" in = "
SourceGraphic "κλίμακα =" 30 "xchannelselector =" r "
ychannelselector = "g" αποτέλεσμα = "disp" / & gt; 

08. Μαλακώνει τις άκρες

Οι άκρες φαίνονται λίγο σκληρό για ένα υδάτινο αποτέλεσμα. Που μπορεί να θεραπευτεί με ένα blur gaussian. Προσθέστε τον κώδικα μετά τον χάρτη μετατόπισης. Όταν ανανεώσετε τη σελίδα, έχει σίγουρα θολή το κείμενο, αλλά η μετατόπιση έχει φύγει. Και πάλι αυτά είναι στοιχεία που μπορούν να στερεωθούν στο δρόμο για τη δημιουργία της επίδρασης.

 & lt; fegaussianblur in = "sourcegraphic"
stddeviation = "15" αποτέλεσμα = "blr" / & gt; 

09. Σύνθετα τα δύο

Προσθέστε τη σύνθετη γραμμή εδώ κάτω από την προηγούμενη θολούρα Gaussian. Θα δείτε ότι αυτό συνδυάζει τη θόλωση και την μετατόπιση μαζί, και δημιουργεί επίσης ένα υδατικό ημιδιαφανές αποτέλεσμα στο κείμενο. Έχει περάσει με κάποιο τρόπο να μαλακώσει τις άκρες, αλλά όχι αρκετό. Θα ήταν καλό αν μπορούσε να προστεθεί το αρχικό θαμπάδα σε αυτό.

 & lt; fecomposite in = "blr" in2 = "disp" χειριστής = "in" αποτέλεσμα = "comp" / & gt; 

10. Συγχώνευση του θολώματος

Μια λειτουργία συγχώνευσης επιτρέπει τη συγχωρήσει το τελικό αποτέλεσμα του σύνθετου συνθηκισμού με το αποτέλεσμα θολώματος. Αυτό τώρα μοιάζει να ταιριάζει με την εικόνα φόντου και φαίνεται να ταιριάζει με τις γραμμές του φωτός που έρχονται μέσα από το νερό. Το καλύτερο μέρος για το κείμενο είναι ότι εξακολουθεί να είναι επιλέξιμο και μέρος της σελίδας, σε αντίθεση με το αν το δημιουργήσετε αυτό στο Photoshop.

 & lt; αποτέλεσμα femerge = "τελικό" & gt;
& lt; femergenode in = "blr" / & gt;
& lt; femergenode in = "comp" / & gt;
& lt; / femerge & gt; 

11. Δημιουργήστε ένα κινούμενο σχέδιο

Επιστρέψτε στο Σελίδα.CSS αρχείο και προσθέστε τα κλειδιά όπως φαίνεται εδώ. Αυτό θα κλιμακωθεί μόνο το μέγεθος της γραμματοσειράς από ένα μηδενικό κατακόρυφο πλάτος σε ένα κατακόρυφο πλάτος 5.5. Στην αρχή αυτό θα εφαρμοστεί στον τίτλο, έτσι ώστε το κείμενο να ζυγίζει και να στηρίζεται στην οθόνη. Καθώς το κείμενο μετακινείται, η μετατόπιση θα αλλάξει επίσης το μήκος, δίνοντας μια υδαρή κυματιστή.

 @KeyFrames Scaler {
από {
Μέγεθος γραμματοσειράς: 0VW;
}
προς την {
Μέγεθος γραμματοσειράς: 5.5VW;
}
} 

12. Αλλάξτε το στυλ H2

ο h2 Το στυλ είχε προηγουμένως προστεθεί στο βήμα 4. Αντικαταστήστε αυτόν τον κώδικα με αυτόν τον νέο κώδικα, το οποίο προσθέτει το CSS Animation σε σχέση με τέσσερα δευτερόλεπτα στην επικεφαλίδα. Η κινούμενη εικόνα σταματά και κρατάει το τελευταίο βασικό πλαίσιο. Αποθηκεύστε αυτό και δοκιμάστε το στο πρόγραμμα περιήγησης για να δείτε το κείμενο στη θέση του.

 H2 {
Γραμμή-Ύψος: 0;
Μέγεθος γραμματοσειράς: 0VW;
Animation-Όνομα: Scaler;
Κινούμενα σχέδια: 4s;
Κινούμενα σχέδια-πλήρωση: Προώθηση.
Οικογένεια γραμματοσειράς: «Κρήτη γύρο», Serif?
} 

13. Προσθέστε την πλοήγηση

Τώρα ας δημιουργήσουμε μια κατάλληλη κινούμενη εικόνα που εμπνέεται από το νερό χρησιμοποιώντας ένα άλλο φίλτρο SVG. Προσθέστε την ακόλουθη περιεκτικότητα σε πλοήγηση στην κορυφή του κώδικα του σώματος, πριν ξεκινήσει η επικεφαλίδα που ξεκίνησε στο πρώτο βήμα του σεμινάριο. Αυτό θα δημιουργήσει τα βασικά στοιχεία ενός μενού χάμπουργκερ σε έναν κύκλο.

& lt; nav class = "menu" & gt;
& lt; τύπος εισόδου = "checkbox" href = "#" κλάση =
"Μενού-ανοιχτό" όνομα = "Ανοίξτε το μενού" ID = "
ανοιχτό "/ & gt;
& lt; label class = "menu-open-button"
for = "menu-open" & gt;
& lt; span class = "χάμπουργκερ
hamburger-1 "& gt; / span & gt;
& lt; span class = "χάμπουργκερ
hamburger-2 "& gt; / span & gt;
& lt; span class = "χάμπουργκερ
hamburger-3 "& gt; / span & gt;
& lt; / label & gt; 

14. Τελειώστε την πλοήγηση

Τώρα μπορούν να προστεθούν τα υπόλοιπα στοιχεία πλοήγησης. Αυτό χρησιμοποιεί επίσης τη βιβλιοθήκη εικονιδίων ανοιχτού ανοικτού πηγής γραμματοσειράς, η οποία έχει προστεθεί στο τμήμα κεφαλής για να συνδεθεί από το CDN αυτής της βιβλιοθήκης. Κάθε κυκλικό στοιχείο μενού θα έχει ένα εικονίδιο μέσα του.

 & lt; a href = "#" class = "στοιχείο μενού" & gt; & lt; i class = "fa
FA-CAR "& GT; / I & GT; / A & GT;
& lt; ένα href = "#" class = "μενού-στοιχείο" & gt; & lt; i
class = "fa fa-ship" & gt; / i & gt; & lt; / a & gt;
& lt; ένα href = "#" class = "μενού-στοιχείο" & gt; & lt; i
class = "fa fa-map" & gt; / i & gt; & lt; / a & gt;
& lt; ένα href = "#" class = "μενού-στοιχείο" & gt; & lt; i
class = "fa fa-βαλίτσα" & gt; / i & gt; & lt; / a & gt;
& lt; / nav & gt; 

15. Προσθέστε το νέο φίλτρο

Ένα άλλο φίλτρο πρόκειται να προστεθεί για αυτό το αποτέλεσμα. Στο SVG, προσθέστε αυτόν τον κώδικα μετά την προστιθέμενη ετικέτα φίλτρου κλεισίματος του κωδικού. Εδώ τα αποτελέσματα είναι χτισμένα με πολύ παρόμοιο τρόπο με τον προηγούμενο. Αυτό θα επιτρέψει το μενού να μοιάζει με κολλώδη blobs του υγρού που κινείται μακριά.

 & lt; ID φίλτρου = "σκιασμένο-blob" & gt;
& lt; fegaussianblur in = "sourcegraphic"
Αποτέλεσμα = "Blur" Stddeviation = "20" / & GT;
& lt; fecolormatrix in = "blur" λειτουργία =
"Matrix" τιμές = "1 0 0 0 0 0 1 0 0
0 0 0 1 0 0 0 0 0 18 -7 "
Αποτέλεσμα = "Blob" / & GT;
& lt; fegaussianblur in = "blob"
stddeviation = "3" αποτέλεσμα = "σκιά" / & gt;
& lt; fecolormatrix in = "σκιά" λειτουργία =
"Matrix" τιμές = "0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 1 -0.2 "
Αποτέλεσμα = "σκιά" / & gt; 

16. Τελειώστε το φίλτρο

Το υπόλοιπο του φίλτρου προστίθεται εδώ, το οποίο συμπληρώνει το αποτέλεσμα που θα τοποθετηθεί σε κάθε κύκλο των στοιχείων του μενού. Αυτό θα προκαλέσει τα στοιχεία να έχουν προστεθεί το φαινόμενο υγρού blob. Αποθηκεύστε αυτή τη σελίδα και στη συνέχεια μεταβείτε στο αρχείο 'Design.css'.

 & lt; feoffset in = "σκιά" dx = "0" dy = "2"
Αποτέλεσμα = "σκιά" / & gt;
& lt; fecomposite in2 = "σκιά" in = "blob"
Αποτέλεσμα = "Blob" / & GT;
& lt; fecomposite in2 = "blob"
in = "ΠηγόΓΑΡΙΑ" αποτέλεσμα = "MIX" / & GT;
& lt; / φίλτρο & gt; 

17. Εφαρμόστε το φίλτρο

Ο κώδικας CSS μπορεί τώρα να προστεθεί στα διαφορετικά design.css , απλά για να διατηρήσετε όλη την πλοήγηση CSS μαζί στον ίδιο τόπο. Ορισμένος κώδικας έχει προστεθεί, αλλά εδώ το φίλτρο εφαρμόζεται στο μενού, το οποίο θα είναι ένα σταθερό μενού έτσι ώστε να υπάρχει ανά πάσα στιγμή στην οθόνη.

 .menu {
Φίλτρο: URL ("# σκιασμένο-blob");
Θέση: Σταθερή.
padding-top: 20px;
padding-αριστερά: 80px;
Πλάτος: 650px;
Ύψος: 150px;
Κουτί-μέγεθος: Σύνορα.
Μέγεθος γραμματοσειράς: 20px;
Κείμενο-Ευθυγράμμιση: Αριστερά.
} 

18. Κάντε το μενού

Το μενού έχει οριστεί για να μετατρέψει αόρατο όταν το μενού είναι ανοιχτό. Το στοιχείο του hover του καθενός από τα στοιχεία μενού δημιουργείται έτσι ώστε να υπάρχει αλλαγή όταν ο χρήστης κινείται πάνω από αυτό. Κάθε παιδί του μενού δίνεται μια μετάβαση 0,4 δευτερολέπτων όταν τα στοιχεία του μενού επιστρέφουν στην αρχική τους θέση.

. Μενού-ανοιχτό {
Εμφάνιση: Κανένα;
}
.Menu-Στοιχείο: Τοποθέτηση {
Ιστορικό: # 47959F;
Χρώμα: # B2F0F8;
}
.Menu-στοιχείο: nth-παιδί (3), .menu-στοιχείο: nth-
Παιδί (4),. Μενού-Στοιχείο: NTH-ΠΑΙΔΙ (5), .Μενου-
Στοιχείο: Ντό-παιδί (6) {
Διάρκεια μετάβασης: 400ms;
} 

19. Προσθέστε ένα χάμπουργκερ

Το εικονίδιο Burger είναι αυξημένο πάνω από τα άλλα στοιχεία αλλάζοντας το z-ευρετήριο . Το μενού αναπτύσσεται όταν ο χρήστης κινείται πάνω από αυτό και κάνει κλικ στο μενού και θα πάρετε τώρα το μπιφτέκι για να ζωντανέψει από τρεις γραμμές ενός μπιφτέκι σε ένα «x», υποδεικνύοντας την επιλογή κατάργησης του μενού.

. Μενού-ανοιχτό κουμπί {
Ζ-δείκτη: 2;
Λειτουργία χρονισμού μετάβασης: Cubic-
Bezier (0.175, 0.885, 0.32, 1.275).
Διάρκεια μετάβασης: 400ms;
Μετατροπή: Κλίμακα (1.1, 1.1) Translate3D
(0, 0, 0);
Δρομέας: δείκτης?
}
.Menu-Open-Button: Τοποθετήστε το {
Μετασχηματισμός: Κλίμακα (1.2, 1.2) Translate3D
(0, 0, 0);
}

20. Μετακινήστε τα στοιχεία

Το πρώτο στοιχείο μενού είναι στην πραγματικότητα το τρίτο παιδί του μενού, καθώς υπάρχει ένα πλαίσιο ελέγχου και το χάμπουργκερ πριν από αυτό. Η προσθήκη αυτού του επιτρέπει το πρώτο στοιχείο του μενού να μετακινηθεί στη θέση του μόλις το μενού είναι κλικ από τον χρήστη. Κάθε στοιχείο μενού θα μετακινηθεί με ελαφρώς μεγαλύτερο χρόνο.

.Menu-Open: Ελέγξτε +. Μενού-ανοιχτό κουμπί {
Λειτουργία χρονισμού μετάβασης: γραμμική.
Διάρκεια μετάβασης: 400ms;
Μετατροπή: Κλίμακα (0,8, 0,8) Translate3D
(0, 0, 0);
}
.Menu-Open: Ελέγξτε το ~.
Λειτουργία χρονισμού μετάβασης: Cubic-
Bezier (0,165, 0,84, 0,44, 1).
}
.Menu-Open: Ελέγξαμε ~ .Μενό-στοιχείο: nth-παιδί (3) {
Διάρκεια μετάπτωσης: 390ms;
Μετασχηματισμός: Translate3d (110px, 0, 0).
} 

21. Αντιμετωπίστε την υπόλοιπη κίνηση

Τα υπόλοιπα στοιχεία μενού μεταφέρονται με διαφορετικές ταχύτητες. Αυτό επιτρέπει στα στοιχεία να κολλήσουν μαζί στα αρχικά στάδια της κινούμενης εικόνας, οι οποίες θα δώσουν το blobby υγρό βλέμμα, χρησιμοποιώντας το φίλτρο SVG. Αποθηκεύστε τα έγγραφα και δείτε τα τελικά αποτελέσματα στο πρόγραμμα περιήγησης.

. Minu-Open: Ελέγξτε ~ .Μενό-Στοιχείο: nth-παιδί (4) {
Διάρκεια μετάπτωσης: 490ms;
Μετασχηματισμός: translate3d (220px, 0, 0);
}
.Menu-Open: Ελέγξαμε ~ .Μεμημένο αντικείμενο: nth-παιδί (5) {
Διάρκεια μετάβασης: 590ms.
Μετασχηματισμός: Translate3d (330px, 0, 0).
}
.Menu-Open: Ελέγξαμε ~ .Μενό-Στοιχείο: nth-παιδί (6) {
Μετάβαση διάρκειας: 690ms;
Μετασχηματισμός: Translate3d (440px, 0, 0).
} 

Αυτό το άρθρο δημοσιεύθηκε αρχικά στο Creative Web Design Magazine Σχεδιαστής ιστοσελίδων . Αγοράστε τεύχος 283 εδώ ή Εγγραφείτε στο Web Designer εδώ .

Σχετικά Άρθρα:

• Animate SVG με JavaScript
• Ο πλήρης οδηγός για το SVG
• Supercharge SVG Animations με GSAP