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

CSS art
(Πιστωτική εικόνα: Tiffany Choong)

Η δημιουργία εικόνων CSS είναι ένας διασκεδαστικός τρόπος για να εξασκηθείτε στις δεξιότητές σας και να δημιουργήσετε ένα τακτοποιημένο έργο τέχνης. Είναι ένα ωραίο διάλειμμα από το συνηθισμένο καθημερινό στιλ των στοιχείων ιστού. Το μόνο που χρειάζεται να ξεκινήσετε είναι ένα κενό έγγραφο και ένα αρχείο CSS. σας προτείνουμε να χρησιμοποιήσετε το Sass, το οποίο θα σας επιτρέψει να επαναχρησιμοποιήσετε τα στυλ σας και να γράψετε απλούστερους επιλογείς (ανατρέξτε στον οδηγό μας για τι είναι το Sass; για να μάθετε περισσότερα σχετικά με αυτόν τον προεπεξεργαστή).

Θα ξεκινήσουμε με μερικές κορυφαίες συμβουλές για την εξειδίκευση του CSS art και, στη συνέχεια, θα σας δείξουμε πώς να δημιουργήσετε ξανά αυτό το κινούμενο μπαλόνι Pikachu χρησιμοποιώντας μόνο CSS (βεβαιωθείτε ότι διατηρείτε τα αρχεία σας ασφαλή σε αξιοπρεπή αποθήκευση στο cloud ).

Για περισσότερη έμπνευση, εξερευνήστε την εκπληκτική μας συλλογή Παραδείγματα κινουμένων σχεδίων CSS . Μετά από κάτι πιο βασικό; Ξεκινήστε μαθαίνοντας πώς να δημιουργήσετε ένα ice lolly χρησιμοποιώντας CSS .



Ή, εάν ξεκινάτε έναν νέο ιστότοπο, ξεφορτωθείτε την πολυπλοκότητα με μια εξαιρετική οικοδόμος ιστότοπου και βεβαιωθείτε ότι έχετε το δικό σας φιλοξενία ιστοσελίδων επιτόπου.

Μειώστε το σχεδιασμό σε απλά σχήματα

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

Χρησιμοποιήστε ένα φωτεινό φόντο για να βοηθήσετε στην τοποθέτηση

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

Χρησιμοποιήστε μεγέθη υγρών

Όσον αφορά τον ορισμό μιας τιμής px για ιδιότητες, θα συνιστούσαμε να χρησιμοποιήσετε τη μονάδα rem. Σε περίπτωση που αποφασίσετε ότι θέλετε το συνολικό σας κομμάτι να είναι μεγαλύτερο ή μικρότερο, χρησιμοποιώντας μονάδες rem, πρέπει μόνο να αλλάξετε τη βάση html {font-size:… px} στο Sass σας για να κλιμακώσετε όλο το έργο τέχνης προς τα πάνω ή προς τα κάτω.

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

Δημιουργία CSS

Το Generate CSS είναι ένα συνέδριο κατά παραγγελία που σας έφερε ο Creative Bloq, net και Web Designer. Κάντε κλικ για να κλείσετε το εισιτήριο Early Bird!(Πιστωτική εικόνα: Getty / Future)

01. Ξεκινήστε με δοχεία

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

wacom intuos pro pen και touch small tablet (pth451)

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

Στα στυλ σας, προσθέστε τα βασικά σας χρώματα ως μεταβλητές Sass για επαναχρησιμοποίηση. Το Sass φωτίζω() και αμαυρώνω() Οι λειτουργίες θα δημιουργήσουν αποχρώσεις και αποχρώσεις των χρωμάτων σας, οι οποίες μπορούν να χρησιμοποιηθούν ως επισημάνσεις ή σκιές για τον χαρακτήρα σας.

02. Στυλ στο κεφάλι

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

Τα χαρακτηριστικά του προσώπου θα χρειαστούν ένα δοχείο για τοποθέτηση, οπότε δημιουργήστε ένα μέσα στο δοχείο κεφαλής για το κίτρινο σχήμα με πλάτος, ύψος και χρώμα φόντου - τώρα ας κάνουμε αυτό το ορθογώνιο να μοιάζει περισσότερο με σχήμα κεφαλιού. Μία από τις πιο κοινές και χρήσιμες ιδιότητες στο CSS art είναι το ακτίνα περιγράμματος ιδιότητα, η οποία αλλάζει την καμπύλη των X ή Y των γωνιών ενός κουτιού και μπορεί να χρησιμοποιηθεί για τη δημιουργία περισσότερων οργανικών σχημάτων.

Χρησιμοποιώντας αυτήν την τεχνική με ένα σύνθετο rem και ποσοστού, μπορείτε να φτιάξετε σχήματα τύπου blob και όχι απλές ελλείψεις, οι οποίες κλιμακώνονται φυσικά με το html {font-size:… px} :

.face { border-top-left-radius: 50% 4.5rem; border-top-right-radius: 50% 4.5rem; border-bottom-left-radius: 50% 3rem; border-bottom-right-radius: 50% 3rem; ... }

Αφού τελειοποιήσει το κεφάλι ακτίνα περιγράμματος , τοποθετήστε τα υπόλοιπα χαρακτηριστικά του προσώπου ως παιδικά στοιχεία της κεφαλής, όπως τα μάτια, τα μάγουλα, τη μύτη και τα αυτιά. Όπως το κεφάλι, το ακτίνα περιγράμματος το κόλπο θα είναι χρήσιμο από τότε ακτίνα περιγράμματος: 50% μπορεί να μην φαίνεται ελκυστικό.

03. Προχωρήστε στο σώμα

Ένα σώμα μπορεί να τοποθετηθεί μέσα στο δοχείο του σώματος πίσω από το κεφάλι και να διαμορφωθεί με το ίδιο ακτίνα περιγράμματος τεχνική, καθώς και τα χέρια, τα πόδια και την ουρά. Για να επιτραπεί η σωστή επικάλυψη, το πραγματικό σώμα πρέπει να είναι το δικό του στοιχείο, καθώς ορισμένα εσωτερικά στοιχεία όπως οι πίσω λωρίδες θα πρέπει να κοπούν με υπερχείλιση: κρυφό . Για να δώσει στο σώμα περισσότερο βάθος, το μετασχηματισμός: skew () ιδιότητα μπορεί να καθαρίσει ελαφρώς το σώμα.

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

04. Προσθέστε μπαλόνια

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

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

.string { height: 1rem; width: 9rem; border-right: solid 1px $white; border-left: solid 1px $white; border-bottom: solid 1px $white; border-bottom-left-radius: 50% 1rem; border-bottom-right-radius: 50% 1rem; }

05. Ζώστε το CSS

Μπορούμε να δώσουμε ζωή στον χαρακτήρα προσθέτοντας @keyframes κινούμενα σχέδια. Τα χέρια, τα πόδια, τα αυτιά και η ουρά μπορούν να κινούνται με μετασχηματισμός: περιστροφή () . Βεβαιωθείτε ότι το μετασχηματισμός έχει ρυθμιστεί στην «άρθρωση» (δηλαδή πάνω κέντρο για ένα πόδι) και ρυθμίζει την περιστροφή. Αυτός ο τύπος κινούμενης εικόνας μπορεί να χρησιμοποιηθεί πολλές φορές σε μια μίξη Sass:

@mixin animateRotate($name, $start, $end) { @keyframes #{$name} { 0%, 100% { transform: rotate(#{$start}deg) } 50% { transform: rotate(#{$end}deg) } } }

Τέλος, προσθέτοντας ένα αργό 5s μετασχηματισμός: translateY () Το animation του keyframe θα κινήσει τον χαρακτήρα πάνω-κάτω σαν να αιωρείται. Για ένα άγγιγμα του ρεαλισμού, ένα κινούμενο σχέδιο που αναβοσβήνει μετασχηματισμός: κλίμακαY (0.1) ιδιότητα μπορεί να χρησιμοποιηθεί για να την κάνει να φαίνεται σαν να κλείνουν τα μάτια.

Αυτό το άρθρο δημοσιεύτηκε αρχικά στο δημιουργικό περιοδικό web design καθαρά . Αγορά τεύχος 283 ή Εγγραφείτε .

Διαβάστε περισσότερα: