Ανακύκλωση και κινούμενα εικονίδια με CSS
Στο όχι τόσο μακρινό παρελθόν, μαθαίναμε επαναστατικές τεχνικές για να αποθηκεύσουμε το αίτημα HTTP και τα ΚΒ μέσω της χρήσης εικόνων. Αυτά τα sprites αποτελούνται από δεκάδες ή ακόμα και εκατοντάδες εικονίδια που είναι διατεταγμένα σε ένα αρχείο εικόνας που αργότερα μαζεύτηκε και εξυπηρετήθηκε με διάφορους τρόπους σε ολόκληρη την ιστοσελίδα.
Έχουμε κάνει καλή χρήση της τεχνικής και σχεδόν κάθε site που ασχολείται με την κλιμάκωση το χρησιμοποιεί.
Χάρη στην εμφάνιση των ιδιοτήτων μετασχηματισμού και μετάβασης του CSS3, μπορούμε να το κάνουμε αυτό ένα βήμα παραπέρα και χρησιμοποιώντας μερικές συνοπτικές γραμμές κώδικα, μετατρέπουμε τα πρότυπα εικονιδίων βάσης σε νέα εικονίδια για μελλοντική χρήση - και ακόμη και να ρίξουμε κινούμενα σχέδια στο μείγμα για ένα πρόσθετο μπόνους !
Η τεχνική είναι τόσο απλή και διαισθητική όσο και οι εικόνες sprites, και επιτρέπει τη χρήση για την ταχεία ανάπτυξη νέων εικονιδίων χωρίς να χρειαστεί ποτέ να αλλάξετε τα sprites της εικόνας.
Εικονίδια ανακύκλωσης με CSS
Ρίξτε μια ματιά σε αυτό το sprite που τραβήξατε από τη βιβλιοθήκη του jQuery UI. Κατά την περιήγησή σας, θα παρατηρήσετε ότι πολλά από τα εικονίδια που παρατίθενται εδώ είναι στην πραγματικότητα παραλλαγές στα βασικά πρότυπα. Ένα ενιαίο εικονίδιο θα μπορούσε να εκπροσωπείται με δώδεκα διαφορετικούς τρόπους και να τοποθετείται στο ίδιο αρχείο. Πολλά εικονίδια είναι κυριολεκτικά περιστρεφόμενες εκδόσεις των γονέων τους. Τα καλά νέα είναι ότι χρησιμοποιώντας το CSS μπορούμε να χρησιμοποιήσουμε την ίδια ακριβώς τεχνική χωρίς να χρειάζεται να συμπεριλάβουμε τις παραλλαγές στην εικόνα.
Από το παραπάνω παράδειγμα, μπορούμε να πάρουμε ένα μόνο εικονίδιο και να το αναδημιουργήσουμε για δικούς μας σκοπούς, για παράδειγμα ένα απλό καμβά από τη δεύτερη σειρά κάτω. Με την ιδιότητα μετασχηματισμού, είμαστε σε θέση να περιστρέψουμε αυτήν την καμπύλη 45deg, 90deg, 180deg, προφανώς και απεριόριστα, για να δημιουργήσουμε πολλές διαφορετικές μορφές από το ίδιο πρότυπο.
Πρότυπο βάσης (επάνω βέλος):
Ο παρακάτω κώδικας θα τραβήξει το βέλος στραμμένο προς τα πάνω από το σπρέι εικόνας και θα χρησιμεύσει ως πρότυπο βάσης μας.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat -20px 0;}
Δημιουργήστε το σωστό arr ow
Μεταμορφώνοντας το βέλος μας 90deg θα δείξει το βέλος προς τα δεξιά, όπως φαίνεται παρακάτω:
-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);
Δημιουργήστε το επάνω δεξιά βέλος
Περιστρέψτε το μόλις 45deg και μπορείτε να πάρετε ένα ωραίο λίγο πάνω δεξιά γωνία βέλος:
-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
Είναι τόσο απλό. Χρησιμοποιώντας αυτή τη μέθοδο, μπορούμε να ξεκινήσουμε με ένα απλό εικονίδιο δύο εικονιδίων και με πολύ λίγη προσπάθεια δημιουργούμε έξι φορές περισσότερα εικονίδια για χρήση στη διασύνδεσή μας, γεγονός που φυσικά είναι μόνο η αρχή του τι μπορεί να γίνει.
Μερικοί μετασχηματισμοί, κάποια φανταχτερή τοποθέτηση και η οικογένεια εικονιδίων μας έχει αυξηθεί αρκετά!
Προσθήκη κινούμενης εικόνας στο μείγμα
Για μια εμπειρία δολοφόνων, μπορούμε να προσθέσουμε animation στο mix. Όχι μόνο θα μετασχηματίζουμε τα εικονίδια, θα τα μεταβαίνουμε για να κάνουμε τον μετασχηματισμό ορατό στον χρήστη. Ας ρίξουμε μια ματιά σε ένα άλλο παράδειγμα, ξεκινώντας με το σύμβολο συν παραπάνω.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;}
Μια εύκολη περιστροφή 45 μοίρες θα μετατρέψει το σύμβολο συν σε ένα εύχρηστο εικονίδιο.
.icon {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
Τώρα που ο μετασχηματισμός μας λειτουργεί σωστά, μπορούμε να προσθέσουμε μια μετάβαση στο μίγμα. Φανταστείτε ότι έχετε μια λειτουργία στον ιστότοπό σας για να μοιραστείτε την τρέχουσα σελίδα μέσω μιας ποικιλίας κοινωνικών δικτύων. Κάνοντας κλικ στο εικονίδιο συν θα ανοίξει η λίστα των επιλογών κοινής χρήσης και ενώ η λίστα ανοίγει, το συν μεταβαίνει σε ένα κοντινό εικονίδιο μέσα από μια λεπτή κινούμενη εικόνα. Η καλύτερη εφαρμογή που έχω βρει για αυτό είναι στην εφαρμογή iPad του FontBook. Ελέγξτε την εφαρμογή τους:
Είναι αστρικό. Ας ρίξουμε μια ματιά στο πώς να κάνει αυτή την ομορφιά ζωντανεύει. Ξεκινήστε χρησιμοποιώντας το εικονίδιο συν μας που δημιουργήθηκε παραπάνω. Για να το ζωντανέψετε, απλώς προσθέστε την ιδιότητα μετάβασης στο εικονίδιο σας. Κατά τη μετάβασή μας, προσδιορίζουμε την ιδιότητα (μετασχηματισμός), τη διάρκεια (0.2s) και τελικά ποια χρονική λειτουργία θέλουμε να χρησιμοποιήσουμε (γραμμική).
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;-webkit-transition: -webkit-transform 0.2s linear;-moz-transition: -moz-transform 0.2s linear;transition: transform 0.2s linear;cursor: pointer;}Και πάλι, είναι τόσο απλό. Όχι μόνο μπορούμε να δημιουργήσουμε νέα εικονίδια για τη βιβλιοθήκη μας μόνο με CSS, μπορούμε να ζωντανέψουμε και να δώσουμε ζωή σε οποιοδήποτε συγκεκριμένο στοιχείο!
Χρησιμοποιώντας αδιαφάνεια για περισσότερη ποικιλία
Το τελικό κομμάτι της ανακύκλωσης εικονιδίων έρχεται να παίξει με τη μορφή της ιδιότητας αδιαφάνειας. Η αντιγραφή των βασικών σας εικονιδίων για ασπρόμαυρα θα σας επιτρέψει να δημιουργήσετε έναν απεριόριστο αριθμό αποχρώσεων / παραλλαγών για χρήση σε όλο τον ιστότοπο ή την εφαρμογή σας.
Μια παραλλαγή τεσσάρων εικόνων (όπως φαίνεται παρακάτω) του παραπάνω σπάτουτ θα μπορούσε εύκολα να χρησιμοποιηθεί για να δημιουργήσει μια δωδεκάδα φορές περισσότερα εικονίδια και με την αύξηση ή τη μείωση της αδιαφάνειας μπορείτε να τα τοποθετήσετε όποτε χρειαστεί και να τα έχετε ακόμα ωραία.
Ήρθε η ώρα να γίνει πράσινο: ανακυκλώστε με το CSS
Καθώς το CSS3 έχει κερδίσει την έλξη, το αντίγραφο του Photoshop CS5 έχει αρχίσει να συγκεντρώνει σκόνη και για καλό λόγο! Αυτή η τεχνική ανακύκλωσης των εικονιδίων σας επιτρέπει να αναπτύξετε συνεχώς νέες εκδόσεις και παραλλαγές στις διεπαφές σας χωρίς να χρειαστεί να ανοίξετε αρχεία προέλευσης και να προσθέσετε δυσκίνητα εικονίδια σε διαρκώς επεκτάσεις.
Ο χρόνος συντήρησης μειώνεται και ο χρόνος που περνάτε στην ανάγνωση βιβλίων όπως η Εβδομάδα Εργασίας 4 ωρών ανεβαίνει! Όλα είναι χρυσά.
Φυσικά, το πιο προφανές μειονέκτημα σε όλα αυτά είναι η υποστήριξη του προγράμματος περιήγησης, ωστόσο, με την πρόσφατη ώθηση από το καθένα να χρησιμοποιήσει σύγχρονα προγράμματα περιήγησης, θα μπορέσουμε να επωφεληθούμε από νέες και συναρπαστικές προοδευτικές τεχνικές. Νιώστε ελεύθεροι περιηγηθείτε σε μερικά παραδείγματα της τεχνικής αυτής.
Ποιοι είναι άλλοι τρόποι με τους οποίους μπορείτε να ανακυκλώσετε τα στοιχεία του ιστότοπού σας;