Το κύμα είναι ίσως ένα από τα πιο δύσκολα σχήματα στο CSS. Προσπαθούμε πάντα να το προσεγγίζουμε με ιδιότητες όπως border-radius και πολλούς μαγικούς αριθμούς μέχρι να πάρουμε κάτι που μοιάζει κάπως κοντά. Και αυτό πριν καν μπούμε σε κυματιστά μοτίβα, που είναι πιο δύσκολα.
“SVG it!” μπορεί να πεις, και μάλλον έχεις δίκιο ότι είναι καλύτερος τρόπος. Αλλά θα δούμε ότι το CSS μπορεί να κάνει ωραία κύματα και ο κώδικας για αυτό δεν χρειάζεται να είναι εντελώς τρελός. Και μάντεψε τι? έχω μια διαδικτυακή γεννήτρια για να το κάνουμε ακόμα πιο τετριμμένο!
Εάν παίζετε με τη γεννήτρια, μπορείτε να δείτε ότι το CSS που φτύνει είναι μόνο δύο διαβαθμίσεις και μια ιδιότητα μάσκας CSS — αυτά τα δύο πράγματα και μπορούμε να δημιουργήσουμε οποιοδήποτε σχήμα ή μοτίβο κύματος. Για να μην αναφέρουμε ότι μπορούμε εύκολα να ελέγξουμε το μέγεθος και την καμπυλότητα των κυμάτων ενώ βρισκόμαστε σε αυτό.
Μερικές από τις τιμές μπορεί να μοιάζουν με "μαγικοί αριθμοίΑλλά στην πραγματικότητα υπάρχει λογική πίσω από αυτά και θα αναλύσουμε τον κώδικα και θα ανακαλύψουμε όλα τα μυστικά πίσω από τη δημιουργία κυμάτων.
Αυτό το άρθρο αποτελεί συνέχεια του ένα προηγούμενο όπου έχτισα όλα τα είδη διαφορετικών ζιγκ-ζαγκ, πλαισίων, χτενισμένων και ναι, κυματιστών περιγραμμάτων. Συνιστώ ανεπιφύλακτα να ελέγξετε αυτό το άρθρο καθώς χρησιμοποιεί την ίδια τεχνική που θα καλύψουμε εδώ, αλλά με περισσότερες λεπτομέρειες.
Τα μαθηματικά πίσω από τα κύματα
Αυστηρά μιλώντας, δεν υπάρχει μια μαγική φόρμουλα πίσω από κυματιστά σχήματα. Οποιοδήποτε σχήμα με καμπύλες που ανεβαίνουν και κατεβαίνουν μπορεί να ονομαστεί κύμα, επομένως δεν πρόκειται να περιοριστούμε σε πολύπλοκα μαθηματικά. Αντίθετα, θα αναπαράγουμε ένα κύμα χρησιμοποιώντας τα βασικά της γεωμετρίας.
Ας ξεκινήσουμε με ένα απλό παράδειγμα χρησιμοποιώντας δύο σχήματα κύκλων:
Έχουμε δύο κύκλους με την ίδια ακτίνα ο ένας δίπλα στον άλλο. Βλέπεις αυτή την κόκκινη γραμμή; Καλύπτει το πάνω μισό του πρώτου κύκλου και το κάτω μισό του δεύτερου. Τώρα φανταστείτε ότι παίρνετε αυτή τη γραμμή και την επαναλαμβάνετε.
Βλέπουμε ήδη το κύμα. Τώρα ας γεμίσουμε το κάτω μέρος (ή το πάνω) για να λάβουμε τα εξής:
Τάντα! Έχουμε ένα κυματιστό σχήμα και ένα που μπορούμε να ελέγξουμε χρησιμοποιώντας μία μεταβλητή για τις ακτίνες του κύκλου. Αυτό είναι ένα από τα πιο εύκολα κύματα που μπορούμε να κάνουμε και είναι αυτό στο οποίο έδειξα this προηγούμενο άρθρο
Ας προσθέσουμε λίγη πολυπλοκότητα παίρνοντας την πρώτη εικόνα και μετακινώντας λίγο τους κύκλους:
Έχουμε ακόμα δύο κύκλους με τις ίδιες ακτίνες αλλά δεν είναι πλέον οριζόντια ευθυγραμμισμένοι. Σε αυτήν την περίπτωση, η κόκκινη γραμμή δεν καλύπτει πλέον τη μισή περιοχή κάθε κύκλου, αλλά μια μικρότερη περιοχή. Αυτή η περιοχή περιορίζεται από τη διακεκομμένη κόκκινη γραμμή. Αυτή η γραμμή διασχίζει το σημείο όπου συναντώνται και οι δύο κύκλοι.
Τώρα πάρτε αυτή τη γραμμή και επαναλάβετε την και θα έχετε ένα άλλο κύμα, πιο ομαλό.
Νομίζω ότι κατάλαβες την ιδέα. Ελέγχοντας τη θέση και το μέγεθος των κύκλων, μπορούμε να δημιουργήσουμε όποιο κύμα θέλουμε. Μπορούμε ακόμη και να δημιουργήσουμε μεταβλητές για αυτούς, τις οποίες θα καλέσω P και S, Αντίστοιχα.
Πιθανότατα έχετε παρατηρήσει ότι, στη διαδικτυακή γεννήτρια, ελέγχουμε το κύμα χρησιμοποιώντας δύο εισόδους. Αντιστοιχίζονται στις παραπάνω μεταβλητές. S είναι το «Μέγεθος του κύματος» και P είναι η «καμπυλότητα του κύματος».
ορίζω P as P = m*S όπου m είναι η μεταβλητή που προσαρμόζετε κατά την ενημέρωση της καμπυλότητας του κύματος. Αυτό μας επιτρέπει να έχουμε πάντα την ίδια καμπυλότητα, ακόμα κι αν ενημερώνουμε το S.
m μπορεί να είναι οποιαδήποτε τιμή μεταξύ 0 και 2. 0 θα μας δώσει την πρώτη συγκεκριμένη περίπτωση όπου και οι δύο κύκλοι ευθυγραμμίζονται οριζόντια. 2 είναι ένα είδος μέγιστης τιμής. Μπορούμε να πάμε μεγαλύτερα, αλλά μετά από μερικές δοκιμές βρήκα οτιδήποτε παραπάνω 2 παράγει άσχημα, επίπεδα σχήματα.
Ας μην ξεχνάμε την ακτίνα του κύκλου μας! Αυτό μπορεί επίσης να οριστεί χρησιμοποιώντας S και P σαν αυτό:
R = sqrt(P² + S²)/2Όταν P είναι ίσο με 0, θα έχουμε R = S/2.
Έχουμε τα πάντα για να αρχίσουμε να μετατρέπουμε όλα αυτά σε διαβαθμίσεις στο CSS!
Δημιουργία κλίσεων
Τα κύματα μας χρησιμοποιούν κύκλους και όταν μιλάμε για κύκλους μιλάμε για ακτινικές διαβαθμίσεις. Και επειδή δύο κύκλοι ορίζουν το κύμα μας, λογικά θα χρησιμοποιούμε δύο ακτινικές διαβαθμίσεις.
Θα ξεκινήσουμε με τη συγκεκριμένη περίπτωση όπου P είναι ίσο με 0. Εδώ είναι η απεικόνιση της πρώτης κλίσης:
Αυτή η κλίση δημιουργεί την πρώτη καμπυλότητα ενώ γεμίζει ολόκληρη την κάτω περιοχή—το «νερό» του κύματος θα λέγαμε.
.wave {
--size: 50px;
mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}Η --size μεταβλητή ορίζει την ακτίνα και το μέγεθος της ακτινικής κλίσης. Αν το συγκρίνουμε με το S μεταβλητή, τότε είναι ίσο με S/2.
Τώρα ας προσθέσουμε τη δεύτερη κλίση:
Η δεύτερη κλίση δεν είναι παρά ένας κύκλος για να ολοκληρώσουμε το κύμα μας:
radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%Εάν έχετε ελέγξει το προηγούμενο άρθρο θα δείτε ότι απλώς επαναλαμβάνω αυτό που έκανα ήδη εκεί.
Ακολούθησα και τα δύο άρθρα, αλλά οι διαμορφώσεις gradient δεν είναι ίδιες.
Αυτό συμβαίνει επειδή μπορούμε να φτάσουμε στο ίδιο αποτέλεσμα χρησιμοποιώντας διαφορετικές διαμορφώσεις κλίσης. Θα παρατηρήσετε μια μικρή διαφορά στην ευθυγράμμιση εάν συγκρίνετε και τις δύο διαμορφώσεις, αλλά το κόλπο είναι το ίδιο. Αυτό μπορεί να προκαλέσει σύγχυση εάν δεν είστε εξοικειωμένοι με τις κλίσεις, αλλά μην ανησυχείτε. Με λίγη εξάσκηση, τα συνηθίζεις και θα διαπιστώσεις μόνος σου ότι διαφορετική σύνταξη μπορεί να οδηγήσει στο ίδιο αποτέλεσμα.
Εδώ είναι ο πλήρης κώδικας για το πρώτο μας κύμα:
.wave {
--size: 50px;
mask:
radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}Τώρα ας πάρουμε αυτόν τον κώδικα και ας τον προσαρμόσουμε στο σημείο όπου εισάγουμε μια μεταβλητή που το κάνει πλήρως επαναχρησιμοποιήσιμο για τη δημιουργία οποιουδήποτε κύματος θέλουμε. Όπως είδαμε στην προηγούμενη ενότητα, το κύριο κόλπο είναι να μετακινήσετε τους κύκλους έτσι ώστε να μην είναι πλέον ευθυγραμμισμένοι, οπότε ας ενημερώσουμε τη θέση του καθενός. Θα μετακινήσουμε το πρώτο προς τα πάνω και το δεύτερο προς τα κάτω.
Ο κωδικός μας θα έχει την εξής μορφή:
.wave {
--size: 50px;
--p: 25px;
mask:
radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%)
50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}Έχω εισαγάγει ένα νέο --p μεταβλητή που την χρησιμοποιεί για να ορίσει την κεντρική θέση κάθε κύκλου. Η πρώτη κλίση χρησιμοποιείται 50% calc(-1*var(--p)), οπότε το κέντρο του κινείται προς τα πάνω ενώ το δεύτερο χρησιμοποιεί calc(var(--size) + var(--p)) για να το μετακινήσετε προς τα κάτω.
Ένα demo αξίζει όσο χίλιες λέξεις:
Οι κύκλοι δεν είναι ούτε ευθυγραμμισμένοι ούτε αγγίζουν ο ένας τον άλλο. Τα τοποθετήσαμε σε απόσταση μεταξύ τους χωρίς να αλλάξουμε την ακτίνα τους, οπότε χάσαμε το κύμα μας. Αλλά μπορούμε να διορθώσουμε τα πράγματα χρησιμοποιώντας τα ίδια μαθηματικά που χρησιμοποιήσαμε νωρίτερα για να υπολογίσουμε τη νέα ακτίνα. Να θυμάστε ότι R = sqrt(P² + S²)/2. Στην περίπτωσή μας, --size είναι ίσο με S/2; το ίδιο για --p που ισούται επίσης με P/2 αφού κινούμε και τους δύο κύκλους. Έτσι, η απόσταση μεταξύ των κεντρικών σημείων τους είναι διπλάσια από την τιμή του --p για αυτό:
R = sqrt(var(--size) * var(--size) + var(--p) * var(--p))Αυτό μας δίνει ένα αποτέλεσμα 55.9px.
Το κύμα μας επέστρεψε! Ας συνδέσουμε αυτήν την εξίσωση στο CSS μας:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p) * var(--p) + var(--size)*var(--size));
mask:
radial-gradient(var(--R) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0 / calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(-1*var(--p)), #0000 99%, #000 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}Αυτός είναι έγκυρος κωδικός CSS. sqrt() αποτελεί μέρος της προδιαγραφής, αλλά τη στιγμή που το γράφω, δεν υπάρχει υποστήριξη του προγράμματος περιήγησης για αυτό. Αυτό σημαίνει ότι χρειαζόμαστε ένα πασπαλισμένο JavaScript ή Sass για να υπολογίσουμε αυτήν την τιμή μέχρι να διευρυνθούμε sqrt() Υποστήριξη.
Αυτό είναι πολύ ωραίο: το μόνο που χρειάζεται είναι δύο κλίσεις για να λάβετε ένα δροσερό κύμα που μπορείτε να εφαρμόσετε σε οποιοδήποτε στοιχείο χρησιμοποιώντας το mask ιδιοκτησία. Όχι άλλες δοκιμές και σφάλματα — το μόνο που χρειάζεστε είναι να ενημερώσετε δύο μεταβλητές και είστε έτοιμοι!
Αντιστροφή του κύματος
Τι γίνεται αν θέλουμε τα κύματα να πηγαίνουν προς την άλλη κατεύθυνση, όπου γεμίζουμε τον «ουρανό» αντί για το «νερό». Είτε το πιστεύετε είτε όχι, το μόνο που έχουμε να κάνουμε είναι να ενημερώσουμε δύο τιμές:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p) * var(--p) + var(--size) * var(--size));
mask:
radial-gradient(var(--R) at 50% calc(100% - (var(--size) + var(--p))), #000 99%, #0000 101%)
calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(100% + var(--p)), #0000 99%, #000 101%)
50% calc(100% - var(--size)) / calc(4 * var(--size)) 100% repeat-x;
}Το μόνο που έκανα εκεί είναι να προσθέσω μια μετατόπιση ίση με 100%, τονίστηκε παραπάνω. Ιδού το αποτέλεσμα:
Μπορούμε να εξετάσουμε μια πιο φιλική σύνταξη χρησιμοποιώντας τιμές λέξεων-κλειδιών για να το κάνουμε ακόμα πιο εύκολο:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size) * var(--size));
mask:
radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%)
calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%)
left 50% bottom var(--size) / calc(4 * var(--size)) 100% repeat-x;
}Χρησιμοποιούμε το left και bottom λέξεις-κλειδιά για να καθορίσετε τις πλευρές και τη μετατόπιση. Από προεπιλογή, το πρόγραμμα περιήγησης έχει οριστεί ως προεπιλογή left και top — γι' αυτό χρησιμοποιούμε 100% για να μετακινήσετε το στοιχείο προς τα κάτω. Στην πραγματικότητα, το μετακινούμε από το top by 100%, οπότε είναι πραγματικά το ίδιο με το να λες bottom. Πολύ πιο εύκολο στην ανάγνωση από τα μαθηματικά!
Με αυτήν την ενημερωμένη σύνταξη, το μόνο που έχουμε να κάνουμε είναι να αλλάξουμε bottom for top — ή το αντίστροφο — για να αλλάξετε την κατεύθυνση του κύματος.
Και αν θέλετε να λάβετε και τα πάνω και τα κάτω κύματα, συνδυάζουμε όλες τις διαβαθμίσεις σε μια ενιαία δήλωση:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));
mask:
/* Gradient 1 */
radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%)
left calc(50% - 2*var(--size)) bottom 0 / calc(4 * var(--size)) 51% repeat-x,
/* Gradient 2 */
radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%)
left 50% bottom var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x,
/* Gradient 3 */
radial-gradient(var(--R) at left 50% top calc(var(--size) + var(--p)), #000 99%, #0000 101%)
left calc(50% - 2 * var(--size)) top 0 / calc(4 * var(--size)) 51% repeat-x,
/* Gradient 4 */
radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), #0000 99%, #000 101%)
left 50% top var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x;
}Αν ελέγξετε τον κωδικό, θα δείτε ότι εκτός από το ότι συνδυάζω όλες τις κλίσεις, έχω μειώσει και το ύψος τους από 100% προς την 51% ώστε να καλύπτουν και τα δύο το μισό στοιχείο. Ναί, 51%. Χρειαζόμαστε αυτό το μικρό επιπλέον ποσοστό για μια μικρή επικάλυψη που αποφεύγει τα κενά.
Τι γίνεται με την αριστερή και τη δεξιά πλευρά;
Είναι η εργασία σου! Πάρτε αυτό που κάναμε με την επάνω και την κάτω πλευρά και προσπαθήστε να ενημερώσετε τις τιμές για να λάβετε τη δεξιά και την αριστερή τιμή. Μην ανησυχείτε, είναι εύκολο και το μόνο που χρειάζεται να κάνετε είναι να ανταλλάξετε τιμές.
Εάν έχετε πρόβλημα, μπορείτε πάντα να χρησιμοποιήσετε τη διαδικτυακή γεννήτρια για να ελέγξετε τον κωδικό και να οπτικοποιήσετε το αποτέλεσμα.
Κυματιστές γραμμές
Νωρίτερα, κάναμε το πρώτο μας κύμα χρησιμοποιώντας μια κόκκινη γραμμή και στη συνέχεια γεμίσαμε το κάτω μέρος του στοιχείου. Τι θα λέγατε για αυτή την κυματιστή γραμμή; Κύμα είναι κι αυτό! Ακόμα καλύτερο είναι αν μπορούμε να ελέγξουμε το πάχος του με μια μεταβλητή ώστε να μπορούμε να το χρησιμοποιήσουμε ξανά. Ας το κάνουμε!
Δεν πρόκειται να ξεκινήσουμε από το μηδέν, αλλά μάλλον θα πάρουμε τον προηγούμενο κωδικό και θα τον ενημερώσουμε. Το πρώτο πράγμα που πρέπει να κάνετε είναι να ενημερώσετε τις χρωματικές στάσεις των διαβαθμίσεων. Και οι δύο διαβαθμίσεις ξεκινούν από ένα διαφανές χρώμα σε ένα αδιαφανές ή το αντίστροφο. Για να προσομοιώσουμε μια γραμμή ή ένα περίγραμμα, πρέπει να ξεκινήσουμε από το διαφανές, να πάμε στο αδιαφανές και μετά να επιστρέψουμε ξανά στο διαφανές:
#0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%Νομίζω ότι έχετε ήδη μαντέψει ότι το --b μεταβλητή είναι αυτό που χρησιμοποιούμε για να ελέγξουμε το πάχος της γραμμής. Ας το εφαρμόσουμε αυτό στις διαβαθμίσεις μας:
Ναι, το αποτέλεσμα απέχει πολύ από μια κυματιστή γραμμή. Αλλά κοιτάζοντας προσεκτικά, μπορούμε να δούμε ότι μια κλίση δημιουργεί σωστά την κάτω καμπυλότητα. Έτσι, το μόνο που πραγματικά χρειάζεται να κάνουμε είναι να διορθώσουμε τη δεύτερη κλίση. Αντί να κρατάμε έναν πλήρη κύκλο, ας κάνουμε μερικό ένα όπως το άλλο ντεγκραντέ.
Ακόμα μακριά, αλλά έχουμε και τις δύο καμπυλότητες που χρειαζόμαστε! Εάν ελέγξετε τον κωδικό, θα δείτε ότι έχουμε δύο πανομοιότυπες διαβαθμίσεις. Η μόνη διαφορά είναι η θέση τους:
.wave {
--size: 50px;
--b: 10px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));
--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
mask:
radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g))
calc(50% - 2*var(--size)) 0/calc(4*var(--size)) 100%,
radial-gradient(var(--R) at left 50% top calc(-1*var(--p)), var(--_g))
50% var(--size)/calc(4*var(--size)) 100%;
}Τώρα πρέπει να προσαρμόσουμε το μέγεθος και τη θέση για το τελικό σχήμα. Δεν χρειάζεται πλέον η κλίση να είναι σε όλο το ύψος, ώστε να μπορούμε να την αντικαταστήσουμε 100% με αυτό:
/* Size plus thickness */
calc(var(--size) + var(--b))Δεν υπάρχει μαθηματική λογική πίσω από αυτή την τιμή. Χρειάζεται μόνο να είναι αρκετά μεγάλο για την καμπυλότητα. Θα δούμε την επίδρασή του στο μοτίβο σε λίγο. Στο μεταξύ, ας ενημερώσουμε επίσης τη θέση για να κεντράρουμε κάθετα τις διαβαθμίσεις:
.wave {
--size: 50px;
--b: 10px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));
--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
mask:
radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g))
calc(50% - 2*var(--size)) 50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat,
radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), var(--_g)) 50%
50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat;
}Δεν υπάρχει ακόμα:
Η μία κλίση πρέπει να μετακινηθεί λίγο προς τα κάτω και η άλλη λίγο προς τα πάνω. Και οι δύο πρέπει να κινούνται κατά το ήμισυ του ύψους τους.
Είμαστε σχεδόν εκεί! Χρειαζόμαστε μια μικρή επιδιόρθωση για να έχει τέλεια επικάλυψη η ακτίνα. Και οι δύο γραμμές πρέπει να μετατοπίζονται κατά το ήμισυ του περιγράμματος (--b) πάχος:
Το έχουμε! Μια τέλεια κυματιστή γραμμή που μπορούμε εύκολα να προσαρμόσουμε ελέγχοντας μερικές μεταβλητές:
.wave {
--size: 50px;
--b: 10px;
--p: 25px;
--R: calc(sqrt(var(--p) * var(--p) + var(--size) * var(--size)) + var(--b) / 2);
--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
mask:
radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), var(--_g))
calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x,
radial-gradient(var(--R) at left 50% top calc(-1*var(--p)),var(--_g))
50% calc(50% + var(--size)/2 + var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x;
}Ξέρω ότι η λογική θέλει λίγο για να καταλάβεις. Αυτό είναι εντάξει και όπως είπα, η δημιουργία ενός κυματιστού σχήματος στο CSS δεν είναι εύκολη, για να μην αναφέρουμε τα δύσκολα μαθηματικά πίσω από αυτό. Γι' αυτό το διαδικτυακή γεννήτρια είναι σωτήριο — μπορείτε εύκολα να λάβετε τον τελικό κωδικό ακόμα κι αν δεν κατανοείτε πλήρως τη λογική πίσω από αυτόν.
Κυματιστά σχέδια
Μπορούμε να φτιάξουμε ένα σχέδιο από την κυματιστή γραμμή που μόλις δημιουργήσαμε!
Ω, όχι, ο κώδικας του μοτίβου θα είναι ακόμα πιο δύσκολο να κατανοηθεί!
Καθόλου! Έχουμε ήδη τον κωδικό. Το μόνο που χρειάζεται να κάνουμε είναι να αφαιρέσουμε repeat-x από αυτά που έχουμε ήδη, και tada. 🎉
Ένα ωραίο κυματιστό σχέδιο. Θυμάστε την εξίσωση που είπα ότι θα ξαναδούμε;
/* Size plus thickness */
calc(var(--size) + var(--b))Λοιπόν, αυτό είναι που ελέγχει την απόσταση μεταξύ των γραμμών στο σχέδιο. Μπορούμε να δημιουργήσουμε μια μεταβλητή από αυτό, αλλά δεν χρειάζεται περισσότερη πολυπλοκότητα. Δεν χρησιμοποιώ καν μια μεταβλητή για αυτό στη γεννήτρια. Ίσως το αλλάξω αργότερα.
Εδώ είναι το ίδιο μοτίβο που πηγαίνει σε διαφορετική κατεύθυνση:
Σας παρέχω τον κώδικα σε αυτό το demo, αλλά θα ήθελα να τον αναλύσετε και να καταλάβετε ποιες αλλαγές έκανα για να συμβεί αυτό.
Απλοποίηση του κώδικα
Σε όλα τα προηγούμενα demos, ορίζουμε πάντα το --size και --p ανεξάρτητα. Αλλά θυμάστε πώς ανέφερα νωρίτερα ότι η ηλεκτρονική γεννήτρια αξιολογεί P ως ίσο με m*S, Όπου m ελέγχει την καμπυλότητα του κύματος; Ορίζοντας έναν σταθερό πολλαπλασιαστή, μπορούμε να εργαστούμε με ένα συγκεκριμένο κύμα και ο κώδικας μπορεί να γίνει ευκολότερος. Αυτό είναι που θα χρειαστούμε στις περισσότερες περιπτώσεις: ένα συγκεκριμένο κυματιστό σχήμα και μια μεταβλητή για τον έλεγχο του μεγέθους του.
Ας ενημερώσουμε τον κώδικά μας και ας εισαγάγουμε το m μεταβλητή:
.wave {
--size: 50px;
--R: calc(var(--size) * sqrt(var(--m) * var(--m) + 1));
mask:
radial-gradient(var(--R) at 50% calc(var(--size) * (1 + var(--m))), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(-1 * var(--size) * var(--m)), #0000 99%, #000 101%)
50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}Όπως μπορείτε να δείτε, δεν χρειαζόμαστε πλέον το --p μεταβλητός. Το αντικατέστησα με var(--m)*var(--size), και βελτιστοποίησε ορισμένα από τα μαθηματικά ανάλογα. Τώρα, εάν θέλουμε να δουλέψουμε με ένα συγκεκριμένο κυματιστό σχήμα, μπορούμε να παραλείψουμε το --m μεταβλητή και αντικαταστήστε την με μια σταθερή τιμή. Ας δοκιμάσουμε .8 για παράδειγμα.
--size: 50px;
--R: calc(var(--size) * 1.28);
mask:
radial-gradient(var(--R) at 50% calc(1.8 * var(--size)), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(-.8 * var(--size)), #0000 99%, #000 101%)
50% var(--size) / calc(4 * var(--size)) 100% repeat-x;Βλέπετε πώς ο κώδικας είναι πιο εύκολος τώρα; Μόνο μια μεταβλητή για τον έλεγχο του κύματός σας, συν δεν χρειάζεται πλέον να βασίζεστε sqrt() που δεν έχει υποστήριξη προγράμματος περιήγησης!
Μπορείτε να εφαρμόσετε την ίδια λογική σε όλα τα demo που είδαμε ακόμα και για τις κυματιστές γραμμές και το μοτίβο. Ξεκίνησα με μια λεπτομερή μαθηματική εξήγηση και έδωσα τον γενικό κώδικα, αλλά μπορεί να βρείτε τον ευκολότερο κώδικα σε μια πραγματική περίπτωση χρήσης. Αυτό κάνω όλη την ώρα. Χρησιμοποιώ σπάνια τον γενικό κώδικα, αλλά πάντα θεωρώ μια απλοποιημένη έκδοση, ειδικά ότι, στις περισσότερες περιπτώσεις, χρησιμοποιώ κάποιες γνωστές τιμές που δεν χρειάζεται να αποθηκευτούν ως μεταβλητές. (Spoiler Alert: Θα μοιραστώ μερικά παραδείγματα στο τέλος!)
Περιορισμοί σε αυτή την προσέγγιση
Μαθηματικά, ο κώδικας που φτιάξαμε θα πρέπει να μας δίνει τέλεια κυματιστά σχήματα και σχέδια, αλλά στην πραγματικότητα, θα αντιμετωπίσουμε μερικά περίεργα αποτελέσματα. Οπότε, ναι, αυτή η μέθοδος έχει τους περιορισμούς της. Για παράδειγμα, η ηλεκτρονική γεννήτρια είναι ικανή να παράγει κακά αποτελέσματα, ειδικά με κυματιστές γραμμές. Μέρος του προβλήματος οφείλεται σε έναν συγκεκριμένο συνδυασμό τιμών όπου το αποτέλεσμα ανακατεύεται, όπως η χρήση μιας μεγάλης τιμής για το πάχος του περιγράμματος σε σύγκριση με το μέγεθος:
Για τις άλλες περιπτώσεις, είναι το ζήτημα που σχετίζεται με κάποια στρογγυλοποίηση που θα οδηγήσει σε κακή ευθυγράμμιση και κενά μεταξύ των κυμάτων:
Τούτου λεχθέντος, εξακολουθώ να πιστεύω ότι η μέθοδος που καλύψαμε παραμένει καλή, επειδή παράγει ομαλά κύματα στις περισσότερες περιπτώσεις και μπορούμε εύκολα να αποφύγουμε τα άσχημα αποτελέσματα παίζοντας με διαφορετικές τιμές μέχρι να την πετύχουμε τέλεια.
Ολοκληρώνοντας
Ελπίζω ότι μετά από αυτό το άρθρο, δεν θα ασχολείστε πια με τη δοκιμή και το λάθος για να δημιουργήσετε ένα κυματιστό σχήμα ή σχέδιο. Επιπλέον στη διαδικτυακή γεννήτρια, έχετε όλα τα μαθηματικά μυστικά πίσω από τη δημιουργία όποιου είδους κύματος θέλετε!
Το άρθρο τελειώνει εδώ, αλλά τώρα έχετε ένα ισχυρό εργαλείο για να δημιουργήσετε φανταχτερά σχέδια που χρησιμοποιούν κυματιστά σχήματα. Εδώ είναι η έμπνευση για να ξεκινήσετε…
Τι γίνεται με εσάς; Χρησιμοποιήστε τη διαδικτυακή μου γεννήτρια (ή γράψτε τον κωδικό με μη αυτόματο τρόπο, αν έχετε ήδη μάθει όλα τα μαθηματικά από έξω) και δείξτε μου τις δημιουργίες σας! Ας έχουμε μια καλή συλλογή στην ενότητα σχολίων.
