Πρόσφατα ανανέωσα τα κινούμενα γραφικά στον ιστότοπό μου με ένα νέο θέμα και μια ομάδα πρωτοποριακών χαρακτήρων, κάνοντας πράξη πολλές από τις τεχνικές που μοιράστηκα σε αυτήν τη σειρά. Μερικά από τα κινούμενα σχέδια μου αλλάζουν εμφάνιση όταν κάποιος αλληλεπιδρά μαζί τους ή σε διαφορετικές ώρες της ημέρας.
Τα χρώματα στο γραφικό πάνω από τις σελίδες του blog μου αλλάζουν από το πρωί μέχρι το βράδυ κάθε μέρα. Στη συνέχεια, υπάρχει η λειτουργία χιονιού, η οποία προσθέτει ψυχρά χρώματα και ένα χειμωνιάτικο θέμα, χάρη σε ένα στρώμα επικάλυψης και μια λειτουργία ανάμειξης.
Ενώ εργαζόμουν σε αυτό, άρχισα να αναρωτιέμαι εάν οι σχετικές τιμές χρωμάτων CSS θα μπορούσαν να μου δώσουν περισσότερο έλεγχο, ενώ παράλληλα απλοποιούσαν τη διαδικασία. Σημείωση: Σε αυτό το σεμινάριο, θα εστιάσω στις σχετικές τιμές χρώματος και στον χρωματικό χώρο OKLCH για γραφικά και κινούμενα σχέδια με θέμα. Αν θέλετε να βουτήξετε βαθιά στο σχετικό χρώμα, ο Ahmad Shadeed δημιούργησε έναν υπέροχο διαδραστικό οδηγό. Όσο για χρωματικούς χώρους, γκάμα και OKLCH, ο δικός μας Geoff Graham έγραψε γι' αυτά.
Η επαναλαμβανόμενη χρήση στοιχείων ήταν το κλειδί. Τα φόντο επαναχρησιμοποιήθηκαν όποτε ήταν δυνατόν, με ζουμ και επικαλύψεις που βοηθούν στη δημιουργία νέων σκηνών από το ίδιο έργο τέχνης. Γεννήθηκε από ανάγκη, αλλά ενθάρρυνε επίσης τη σκέψη με όρους σειράς και όχι μεμονωμένων σκηνών. Το πρόβλημα με τη μη αυτόματη ενημέρωση παλετών χρωμάτων Πάμε κατευθείαν στην πρόκλησή μου. Στους τίτλους Toon όπως αυτός - βασισμένος στο επεισόδιο του Yogi Bear Show του 1959 "Lullabye-Bye Bear" - και στη δουλειά μου γενικά, οι παλέτες περιορίζονται σε μερικά επιλεγμένα χρώματα.
Δημιουργώ αποχρώσεις και αποχρώσεις από αυτό που ονομάζω το «βασικό» μου χρώμα για να επεκτείνω την παλέτα χωρίς να προσθέτω περισσότερες αποχρώσεις.
Στο Sketch, εργάζομαι στον χρωματικό χώρο HSL, επομένως αυτή η διαδικασία περιλαμβάνει αύξηση ή μείωση της τιμής ελαφρότητας του χρώματος της βάσης μου. Ειλικρινά, δεν είναι μια επίπονη εργασία - αλλά η επιλογή ενός διαφορετικού χρώματος βάσης απαιτεί τη δημιουργία ενός εντελώς νέου συνόλου αποχρώσεων και αποχρώσεων. Το να το κάνεις αυτό με το χέρι, ξανά και ξανά, γίνεται γρήγορα επίπονο.
Ανέφερα τον χρωματικό χώρο HSL — H (απόχρωση), S (κορεσμός) και L (ελαφρότητα), αλλά αυτός είναι μόνο ένας από τους πολλούς τρόπους περιγραφής του χρώματος. Το RGB — R (κόκκινο), G (πράσινο), B (μπλε) — είναι ίσως το πιο οικείο, τουλάχιστον στη Hex μορφή του. Υπάρχει επίσης το LAB — L (ελαφρύτητα), A (πράσινο-κόκκινο), B (μπλε-κίτρινο) — και το νεότερο, αλλά τώρα ευρέως υποστηριζόμενο μοντέλο LCH — L (ελαφρότητα), C (χρωμα), H (απόχρωση) — στη μορφή του OKLCH. Με το LCH — ειδικά το OKLCH στο CSS — μπορώ να προσαρμόσω την τιμή ελαφρότητας του χρώματος του θεμελίου μου.
Ή μπορώ να αλλάξω το χρώμα του. Το χρώμα LCH και ο κορεσμός HSL περιγράφουν και τα δύο την ένταση ή τον πλούτο ενός χρώματος, αλλά το κάνουν με διαφορετικούς τρόπους. Το LCH μου δίνει ένα ευρύτερο φάσμα και πιο προβλέψιμη ανάμειξη μεταξύ των χρωμάτων.
Μπορώ επίσης να αλλάξω την απόχρωση για να δημιουργήσω μια παλέτα χρωμάτων που μοιράζονται τις ίδιες τιμές φωτεινότητας και χρώματος. Τόσο στο HSL όσο και στο LCH, το φάσμα αποχρώσεων ξεκινά από το κόκκινο, κινείται στο πράσινο και το μπλε και επιστρέφει στο κόκκινο.
Γιατί το OKLCH άλλαξε πώς σκέφτομαι το χρώμα Η υποστήριξη του προγράμματος περιήγησης για τον χρωματικό χώρο OKLCH είναι πλέον ευρέως διαδεδομένη, ακόμα κι αν τα εργαλεία σχεδίασης - συμπεριλαμβανομένου του Sketch - δεν έχουν βρει τη διαφορά. Ευτυχώς, αυτό δεν πρέπει να σας εμποδίσει να χρησιμοποιήσετε το OKLCH. Τα προγράμματα περιήγησης θα μετατρέψουν ευχαρίστως τις τιμές Hex, HSL, LAB και RGB σε OKLCH για εσάς. Μπορείτε να ορίσετε μια προσαρμοσμένη ιδιότητα CSS με χρώμα βάσης σε οποιοδήποτε χώρο, συμπεριλαμβανομένου του Hex: /* Χρώμα βάσης */ -- θεμέλιο: #5accd6;
Οποιαδήποτε χρώματα προέρχονται από αυτό θα μετατραπούν αυτόματα σε OKLCH: --foundation-light: oklch(από var(--foundation) [...]; } --foundation-mid: oklch(από var(--foundation) [...]; } --foundation-dark: oklch(από var(--foundation) [...]; }
Σχετικό χρώμα ως σύστημα σχεδίασης Σκεφτείτε ότι το σχετικό χρώμα λέει: «Πάρτε αυτό το χρώμα, τροποποιήστε το και μετά δώστε μου το αποτέλεσμα». Υπάρχουν δύο τρόποι προσαρμογής ενός χρώματος: απόλυτες αλλαγές και αναλογικές αλλαγές. Μοιάζουν σε κώδικα, αλλά συμπεριφέρονται πολύ διαφορετικά μόλις αρχίσετε να εναλλάσσετε τα χρώματα της βάσης. Η κατανόηση αυτής της διαφοράς είναι αυτό που μπορεί να μετατραπεί χρησιμοποιώντας το σχετικό χρώμα σε σύστημα. /* Χρώμα βάσης */ -- θεμέλιο: #5accd6;
Για παράδειγμα, η τιμή φωτεινότητας του χρώματος βάσης μου είναι 0,7837, ενώ μια πιο σκούρα έκδοση έχει τιμή 0,5837. Για να υπολογίσω τη διαφορά, αφαιρώ τη χαμηλότερη τιμή από την υψηλότερη και εφαρμόζω το αποτέλεσμα χρησιμοποιώντας μια συνάρτηση calc(): -- θεμέλιο-σκοτεινό: oklch(από var(--foundation) υπολογισμός (l - 0,20) c h);
Για να πετύχω πιο ανοιχτό χρώμα, προσθέτω τη διαφορά: -- θεμέλιο-φως: oklch(από var(--foundation) υπολ.(l + 0,10) c h);
ΧρώμαΟι προσαρμογές ακολουθούν την ίδια διαδικασία. Για να μειώσω την ένταση του χρώματος της βάσης μου από 0,1035 σε 0,0035, αφαιρώ τη μία τιμή από την άλλη: oklch(από var(--foundation) l υπολογ.(c - 0,10) h);
Για να δημιουργήσω μια παλέτα αποχρώσεων, υπολογίζω τη διαφορά μεταξύ της τιμής απόχρωσης του χρώματος βάσης (200) και της νέας μου απόχρωσης (260): oklch(από var(--foundation) l c υπολ.(h + 60));
Αυτοί οι υπολογισμοί είναι απόλυτοι. Όταν αφαιρώ ένα σταθερό ποσό, ουσιαστικά λέω, «Πάντα να αφαιρείς τόσο πολύ». Το ίδιο ισχύει όταν προσθέτουμε σταθερές τιμές: υπολογισμός (c - 0,10) υπολογισμός (c + 0,10)
Έμαθα τα όρια αυτής της προσέγγισης με τον δύσκολο τρόπο. Όταν βασίστηκα στην αφαίρεση σταθερών τιμών χρώματος, τα χρώματα κατέρρευσαν προς το γκρι μόλις άλλαξα το θεμέλιο. Μια παλέτα που λειτουργούσε για ένα χρώμα διαλύθηκε για ένα άλλο. Ο πολλαπλασιασμός συμπεριφέρεται διαφορετικά. Όταν πολλαπλασιάζω το χρώμα, λέω στο πρόγραμμα περιήγησης: «Μειώστε την ένταση αυτού του χρώματος κατά μια αναλογία». Η σχέση μεταξύ των χρωμάτων παραμένει άθικτη, ακόμη και όταν αλλάζει το θεμέλιο: υπολογισμός (c * 0,10)
Κανόνες My Move It, Scale It, Rotate It
Μετακίνηση ελαφρότητας (προσθήκη ή αφαίρεση), Κλίμακα χρώματος (πολλαπλασιασμός), Περιστρέψτε την απόχρωση (προσθέστε ή αφαιρέστε μοίρες).
Κλιμακώνω το χρώμα γιατί θέλω οι αλλαγές έντασης να παραμένουν ανάλογες με το βασικό χρώμα. Οι σχέσεις αποχρώσεων είναι περιστροφικές, επομένως ο πολλαπλασιασμός της απόχρωσης δεν έχει νόημα. Η ελαφρότητα είναι αντιληπτική και απόλυτη — ο πολλαπλασιασμός της παράγει συχνά περίεργα αποτελέσματα.
Από ένα χρώμα σε ένα ολόκληρο θέμα Το σχετικό χρώμα μου επιτρέπει να ορίσω ένα χρώμα βάσης και να δημιουργήσω από αυτό κάθε άλλο χρώμα που χρειάζομαι — γεμίσματα, πινελιές, διαβαθμίσεις, σκιές. Σε εκείνο το σημείο, το χρώμα παύει να είναι μια παλέτα και αρχίζει να είναι ένα σύστημα. Οι εικόνες SVG τείνουν να επαναχρησιμοποιούν τα ίδια λίγα χρώματα σε γεμίσματα, πινελιές και διαβαθμίσεις. Το σχετικό χρώμα σάς επιτρέπει να ορίσετε αυτές τις σχέσεις μία φορά και να τις επαναχρησιμοποιήσετε παντού — όπως οι εμψυχωτές επαναχρησιμοποίησαν φόντο για να δημιουργήσουν νέες σκηνές.
Αλλάξτε το χρώμα θεμελίωσης μία φορά και κάθε προκύπτον χρώμα ενημερώνεται αυτόματα, χωρίς να υπολογίσετε ξανά τίποτα με το χέρι. Εκτός από τα κινούμενα γραφικά, θα μπορούσα να χρησιμοποιήσω την ίδια προσέγγιση για να ορίσω χρώματα για τις καταστάσεις διαδραστικών στοιχείων, όπως κουμπιά και συνδέσμους. Το χρώμα βάσης που χρησιμοποίησα στον τίτλο μου "Lullabye-Bye Bear" είναι ένα μπλε που μοιάζει με κυανό. Το φόντο είναι μια ακτινωτή κλίση μεταξύ της βάσης μου και μιας πιο σκούρας εκδοχής.
Για να δημιουργήσω εναλλακτικές εκδόσεις με εντελώς διαφορετικές διαθέσεις, χρειάζεται μόνο να αλλάξω το χρώμα της βάσης: -- θεμέλιο: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(από var(--foundation) υπολ.(l-0,2357) υπολ.(c*0,833) h);
Για να συνδέσω αυτές τις προσαρμοσμένες ιδιότητες στη διαβάθμιση SVG μου χωρίς να αντιγράψω τις τιμές χρώματος, αντικατέστησα τις σκληρά κωδικοποιημένες τιμές stop-color με ενσωματωμένα στυλ:
Στη συνέχεια, έπρεπε να διασφαλίσω ότι το Toon Text μου έρχεται πάντα σε αντίθεση με οποιοδήποτε χρώμα βάσης επιλέγω. Μια περιστροφή απόχρωσης 180 μοιρών παράγει ένα συμπληρωματικό χρώμα που σίγουρα αναδύεται — αλλά μπορεί να δονείται άβολα: .text-light { fill: oklch(από var(--foundation) l c υπολ.(h + 180)); }
Μια μετατόπιση 90° παράγει ένα ζωηρό δευτερεύον χρώμα χωρίς να είναι πλήρως συμπληρωματικό: .text-light { fill: oklch(από var(--foundation) l c υπολ.(h - 90)); }
Η αναπαράσταση του Quick Draw McGraw's Toon Title "El Kabong" του 1959 χρησιμοποιεί τις ίδιες τεχνικές αλλά με μια πιο ποικίλη παλέτα. Για παράδειγμα, υπάρχει μια άλλη ακτινωτή κλίση μεταξύ του χρώματος του θεμελίου και μιας πιο σκούρας απόχρωσης.
Το κτίριο και το δέντρο στο φόντο είναι απλά διαφορετικές αποχρώσεις του ίδιου χρώματος θεμελίωσης. Για αυτές τις διαδρομές, χρειαζόμουν δύο επιπλέον χρώματα γεμίσματος: .bg-mid { fill: oklch(από var(--foundation) calc(l - 0,04) calc(c * 0,91) h); }
.bg-dark { fill: oklch(από var(--foundation) calc(l - 0,12) calc(c * 0,64) h); }
Όταν τα θεμέλια αρχίζουν να κινούνται Μέχρι στιγμής, όλα όσα έχω δείξει ήταν στατικά. Ακόμη και όταν κάποιος χρησιμοποιεί έναν επιλογέα χρώματος για να αλλάξει το χρώμα της βάσης, αυτή η αλλαγή συμβαίνει αμέσως. Αλλά τα κινούμενα γραφικά σπάνια παραμένουν ακίνητα - η ιδέα είναι στο όνομα. Έτσι, εάν το χρώμα είναι μέρος του συστήματος, δεν υπάρχει λόγος να μην μπορεί να ζωντανέψει επίσης. Για να ζωντανέψω το χρώμα της βάσης, πρέπει πρώτα να το χωρίσω στα κανάλια OKLCH του— ελαφρότητα, χρώμα και απόχρωση. Αλλά υπάρχει ένα σημαντικό επιπλέον βήμα: Πρέπει να καταχωρήσω αυτές τις τιμές ως πληκτρολογημένες προσαρμοσμένες ιδιότητες. Τι σημαίνει όμως αυτό; Από προεπιλογή, ένα πρόγραμμα περιήγησης δεν γνωρίζει εάν μια προσαρμοσμένη τιμή ιδιότητας CSS αντιπροσωπεύει ένα χρώμα, μήκος, αριθμό ή κάτι εντελώς άλλο. Αυτό συχνά σημαίνει ότι δεν μπορούν να παρεμβληθούν ομαλά κατά τη διάρκεια της κινούμενης εικόνας και να μεταπηδήσουν από τη μια τιμή στην άλλη. Η καταχώριση μιας προσαρμοσμένης ιδιότητας λέει στο πρόγραμμα περιήγησης τον τύπο της τιμής που αντιπροσωπεύει και πώς θα πρέπει να συμπεριφέρεται με την πάροδο του χρόνου. Σε αυτήν την περίπτωση, θέλω το πρόγραμμα περιήγησης να αντιμετωπίζει τα έγχρωμα κανάλια μου ως αριθμούς, ώστε να μπορούν να κινούνται ομαλά. @property --f-l { σύνταξη: "<αριθμός>"; κληρονομεί: αληθινό; αρχική τιμή: 0,40; }
@property --f-c { σύνταξη: "<αριθμός>"; κληρονομεί: αληθινό; αρχική τιμή: 0,11; }
@property --f-h { σύνταξη: "<αριθμός>"; κληρονομεί: αληθινό; αρχική τιμή: 305; }
Μόλις εγγραφούν, αυτές οι προσαρμοσμένες ιδιότητες συμπεριφέρονται σαν εγγενές CSS. Το πρόγραμμα περιήγησης μπορεί να τα παρεμβάλλει καρέ-καρέ. Στη συνέχεια ξαναφτιάχνω το χρώμα θεμελίωσης από αυτά τα κανάλια: -- θεμέλιο: oklch(var(--f-l) var(--f-c) var(--f-h));
Αυτό κάνει το χρώμα του θεμελίου να γίνεται ζωντανό, όπως και κάθε άλλη αριθμητική τιμή. Ακολουθεί ένα απλό κινούμενο σχέδιο "αναπνοής" που αλλάζει απαλά τη φωτεινότητα με την πάροδο του χρόνου: @keyframes breathe { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-title { κινούμενα σχέδια: αναπνεύστε 10s ease-in-out infinite. }
Επειδή κάθε άλλο χρώμα σε γεμίσματα, διαβαθμίσεις και πινελιές προέρχεται από το --foundation, ζωντανεύουν όλα μαζί και τίποτα δεν χρειάζεται να ενημερωθεί χειροκίνητα. Ένα κινούμενο χρώμα, πολλά εφέ Στην αρχή αυτής της διαδικασίας, αναρωτήθηκα εάν οι σχετικές τιμές χρωμάτων CSS θα μπορούσαν να προσφέρουν περισσότερες δυνατότητες, καθιστώντας ταυτόχρονα πιο απλές στην εφαρμογή τους. Πρόσφατα πρόσθεσα ένα νέο φόντο χρυσωρυχείου στη σελίδα επικοινωνίας του ιστότοπού μου και η πρώτη επανάληψη περιελάμβανε λάμπες λαδιού που λάμπουν και αιωρούνται.
Ήθελα να εξερευνήσω πώς η ζωντανή κίνηση των σχετικών χρωμάτων CSS θα μπορούσε να κάνει το εσωτερικό του ορυχείου πιο ρεαλιστικό χρωματίζοντάς το με χρώματα από τις λάμπες. Ήθελα να επηρεάσουν τον κόσμο γύρω τους, όπως το πραγματικό φως. Έτσι, αντί να ζωοποιώ πολλαπλά χρώματα, έφτιαξα ένα μικροσκοπικό σύστημα φωτισμού που ζωντανεύει μόνο ένα χρώμα.
Η πρώτη μου εργασία ήταν να τοποθετήσω ένα στρώμα επικάλυψης μεταξύ του φόντου και των λαμπτήρων μου: <μονοπάτι id = "επικάλυψη" fill="var(--overlay-tint)" [...] style="mix-blend-mode: color" />
Χρησιμοποίησα τη λειτουργία mix-blend-mode: χρώμα γιατί χρωματίζει ό,τι βρίσκεται από κάτω, διατηρώντας παράλληλα την υποκείμενη φωτεινότητα. Καθώς θέλω η επικάλυψη να είναι ορατή μόνο όταν είναι ενεργοποιημένες οι κινούμενες εικόνες, έκανα τη συμμετοχή της επικάλυψης: .svg-mine #overlay { οθόνη: καμία; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { οθόνη: μπλοκ; αδιαφάνεια: 0,5; } }
Η επικάλυψη ήταν στη θέση της, αλλά δεν είχε συνδεθεί ακόμη με τους λαμπτήρες. Χρειαζόμουν μια πηγή φωτός. Οι λάμπες μου είναι απλές και κάθε μία περιέχει ένα στοιχείο κύκλου που θάμπωσα με ένα φίλτρο. Το φίλτρο δημιουργεί ένα πολύ απαλό θάμπωμα σε ολόκληρο τον κύκλο.
Αντί να ζωοποιώ την επικάλυψη και τις λάμπες ξεχωριστά, ζωοποιώ ένα μόνο διακριτικό χρώματος "φλόγας" και αντλώ οτιδήποτε άλλο από αυτό. Αρχικά, καταχωρίζω τρεις προσαρμοσμένες ιδιότητες για κανάλια OKLCH: @property --fl-l { σύνταξη: "<αριθμός>"; κληρονομεί: αληθινό; αρχική τιμή: 0,86; } @property --fl-c { σύνταξη: "<αριθμός>"; κληρονομεί: αληθινό; αρχική τιμή: 0,12; } @property --fl-h { σύνταξη: "<αριθμός>"; κληρονομεί: αληθινό; αρχική τιμή: 95; }
Έκανα κίνηση σε αυτά τα κανάλια, σπρώχνοντας σκόπιμα μερικά καρέ προς το πορτοκαλί χρώμα, έτσι ώστε το τρεμόπαιγμα να φαίνεται καθαρά ως φωτιά:
@keyframes φλόγα { 0%, 100% { --fl-l: 0,86; --fl-c: 0,12; --fl-h: 95; } 6% { --fl-l: 0,91; --fl-c: 0,10; --fl-h: 92; } 12% { --fl-l: 0,83; --fl-c: 0,14; --fl-h: 100; } 18% { --fl-l: 0,88; --fl-c: 0,11; --fl-h: 94; } 24% { --fl-l: 0,82; --fl-c: 0,16; --fl-h: 82; } 30% { --fl-l: 0,90; --fl-c: 0,12; --fl-h: 90; } 36% { --fl-l: 0,79; --fl-c: 0,17; --fl-h: 76; } 44% { --fl-l: 0,87; --fl-c: 0,12; --fl-h: 96; } 52% { --fl-l: 0,81; --fl-c: 0,15; --fl-h: 102; } 60% { --fl-l: 0,89; --fl-c: 0,11; --fl-h: 93; } 68% { --fl-l: 0,83; --fl-c: 0,16; --fl-h: 85; } 76% { --fl-l: 0,91; --fl-c: 0,10; --fl-h: 91; } 84% { --fl-l: 0,85; --fl-c: 0,14; --fl-h: 98; } 92% {--fl-l: 0,80; --fl-c: 0,17; --fl-h: 74; } }
Στη συνέχεια, επέκτεισα αυτήν την κίνηση στο SVG, έτσι ώστε οι κοινόχρηστες μεταβλητές να είναι διαθέσιμες τόσο στις λάμπες όσο και στην επικάλυψη μου:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { animation: flame 3.6s infinite linear? απομόνωση: απομόνωση;
/* Δημιουργία χρώματος φλόγας από κινούμενα κανάλια */ --φλόγα: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Χρώμα λαμπτήρα που προέρχεται από φλόγα */ --πυρήνας λαμπτήρα: oklch(από var(--φλόγα) calc(l + 0,05) calc(c * 0,70) h);
/* Απόχρωση επικάλυψης που προέρχεται από την ίδια φλόγα */ --επικάλυψη-απόχρωση: oklch(από var(--φλόγα) calc(l + 0,06) calc(c * 0,65) calc(h - 10)); } }
Τέλος, εφάρμοσα αυτά τα παράγωγα χρώματα στους λαμπερούς λαμπτήρες και στην επικάλυψη που επηρεάζουν: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > κύκλος, .svg-mine[data-animations=on] #mine-lamp-2 > κύκλος { fill: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { οθόνη: μπλοκ; fill: var(--overlay-tint); αδιαφάνεια: 0,5; } }
Όταν η φλόγα μετατοπίζεται προς το πορτοκαλί, οι λάμπες ζεσταίνονται και η σκηνή ζεσταίνεται μαζί τους. Όταν η φλόγα κρυώσει, όλα τακτοποιούνται μαζί. Το καλύτερο μέρος είναι ότι τίποτα δεν γράφεται με το χέρι. Εάν αλλάξω το χρώμα της βάσης ή τροποποιήσω τις περιοχές κινούμενων εικόνων φλόγας, ολόκληρο το σύστημα φωτισμού ενημερώνεται ταυτόχρονα. Μπορείτε να δείτε το τελικό αποτέλεσμα στην ιστοσελίδα μου. Επαναχρησιμοποίηση, Επαναχρησιμοποίηση, Επανεξέταση Αυτοί οι εμψυχωτές Hanna-Barbera αναγκάστηκαν να επανατοποθετήσουν στοιχεία από ανάγκη, αλλά επαναχρησιμοποιώ τα χρώματα γιατί κάνει τη δουλειά μου πιο συνεπή και ευκολότερη στη συντήρηση. Οι σχετικές χρωματικές τιμές CSS μου επιτρέπουν:
Ορίστε ένα μόνο χρώμα βάσης, Περιγράψτε πώς σχετίζονται άλλα χρώματα με αυτό, Χρησιμοποιήστε ξανά αυτές τις σχέσεις παντού, και Κινητοποιήστε το σύστημα αλλάζοντας μία τιμή.
Το σχετικό χρώμα δεν διευκολύνει απλώς το θέμα. Ενθαρρύνει έναν τρόπο σκέψης όπου το χρώμα, όπως η κίνηση, είναι σκόπιμα — και όπου η αλλαγή μιας τιμής μπορεί να μεταμορφώσει μια ολόκληρη σκηνή χωρίς να ξαναγράψει το έργο από κάτω.
