Περιεχόμενο
- 01. Beercamp
- 02. Η ορθογραφία
- 03. Εργαστήρια Envy
- 04. Ωραία προϊόντα
- 05. Μαμούθ Μπάουθ
- 06. Δημοσιεύεται
- 07. Lift Interactive
- 08. Εντυπωσιάστε έναν πιγκουίνο
- 09. Microsoft
- 10. Πράγματα και ανοησίες
- 11. Σφυρί
- 12. Συνεργάτες εργαστηρίου
- 13. Πάντα δημιουργικό
- 14. Χτύπημα χαρτών
- 15. OPower UX
- 16. Διάσκεψη κύκλων
- 17. Δύο Paperdolls
- 18. Ωραία
- 19. Σταθμός 4
- 20. Ενωμένοι Pixelworkers
- Σας άρεσε αυτό; Διαβάστε αυτά!
Το 2012 ήταν μια εντυπωσιακή χρονιά για μοναδικές και εκπληκτικές χρήσεις του CSS! Η επιλογή μιας λίστας με τις καλύτερες χρήσεις του CSS για το έτος είναι μια δύσκολη πρόκληση, καθώς το CSS καλύπτει τα πάντα, από ερωτήματα πολυμέσων και τύπο ιστού έως κινούμενα σχέδια και 3D. Δεν μπορείτε να δημιουργήσετε μεγάλο μέρος ενός ιστότοπου χωρίς CSS! Διάλεξα μια λίστα με τις καλύτερες εμφανίσεις από τον προηγούμενο χρόνο σε όλους τους τρόπους με τους οποίους το CSS μπορεί να δείξει το πρόσωπό του.
Είναι αδύνατο να συγκρίνουμε τη χρήση του τύπου ιστού με το προηγμένο CSS 3D ένα προς ένα, επομένως παρουσιάζω αυτές τις επιλογές σε καμία συγκεκριμένη σειρά. Μου έλειπε; Προσθέστε τα στα παρακάτω σχόλια. Δεν υπάρχει λόγος να σταματήσει αυτή η λίστα στα 20, είναι ένα μεγάλο μεγάλο ίντερνετ εκεί έξω!
01. Beercamp
Δεν ήμουν ποτέ στο Beercamp, αλλά ξέρω ότι έχουν πάντα έναν ιστότοπο που κάνει εντύπωση χάρη στους λαούς του nclud. Ο φετινός ιστότοπος παρουσίασε ένα διαδραστικό αναδυόμενο βιβλίο που υποστηρίζεται από μετασχηματισμούς 3D CSS. Κάθε εικόνα τέρατα επεκτείνεται και περιστρέφεται καθώς γυρίζετε τις σελίδες.
02. Η ορθογραφία
Το Spelltower δεν είναι απλώς ένα τρομερά εθιστικό παιχνίδι, έχει επίσης έναν ιστότοπο γεμάτο διασκέδαση και προσωπικότητα. Η παιχνιδιάρικη χρήση κινούμενων σχεδίων και μεταβάσεων σε κάνει να θέλεις να τραβήξεις ένα iPhone και να πυροβολήσεις ένα παιχνίδι.
03. Εργαστήρια Envy
Μια από τις ετικέτες των Envy Labs είναι "Δημιουργούμε διασκέδαση". Ένα περιστρεφόμενο εικονογραφημένο καρουσέλ με μετασχηματισμούς και μεταβάσεις CSS είναι αρκετά διασκεδαστικό! Ζυγίζει ακόμη και λειτουργεί σωστά, κάτι που έπρεπε να είναι λίγο πρόκληση. Επιπλέον, ο ιστότοπος διαθέτει επίσης έναν επιλεγμένο τύπο ιστού, μεταβάσεις CSS στο hover και σχήματα που βασίζονται σε CSS.
04. Ωραία προϊόντα
Το Fine Goods, από τον Rogie King, είναι μια αγορά προϊόντων μπουτίκ που στοχεύει στην παροχή ποιοτικών εικονιδίων, πόρων και πολλά άλλα στους σχεδιαστές. Ο παιχνιδιάρικος ιστότοπος χρησιμοποιεί μια συλλογή ιδιοτήτων CSS για να δημιουργήσει αυτό το προσαρμοσμένο σχέδιο. Οι ετικέτες τιμών περιέχουν κείμενο HTML, περιστρέφεται με μετασχηματισμούς και τα κινούμενα σχέδια στα συρτάρια πλοήγησης είναι γεμάτα προσωπικότητα και μάλιστα σας εκπλήσσουν λίγο.
05. Μαμούθ Μπάουθ
Οι Photo Booths είναι πολύ διασκεδαστικοί, οπότε ένας ιστότοπος για Photo Booth θα πρέπει να είναι και αυτός! Οι λαοί στο MammothReach το καρφώθηκαν με έναν ιστότοπο για το Mammoth Booth που αντικατοπτρίζει την εμπειρία της φωτογραφικής καμπίνας. Οι λεπτές κινούμενες εικόνες προσθέτουν κάποια διάτρηση στις εικόνες, ενώ μετασχηματισμοί και σκιές κουτιού χρησιμοποιούνται για να δώσουν στις φωτογραφίες το σωστό ποσό πραγματικής αίσθησης φωτογραφίας.
06. Δημοσιεύεται
Ο ιστότοπος Postable, που αναπτύχθηκε από τον Kevin Kneifel, έχει μεγάλη προσωπικότητα για μια εφαρμογή ιστού. Διασκεδαστικές και χρήσιμες εικόνες σε συνδυασμό με έξυπνες αιωρήσεις και μεταβάσεις διατηρούν τον ιστότοπο ελκυστικό και εύκολο να το καταλάβεις. Όταν οι επαφές σας συμπληρώνουν τη φόρμα σας, θα χρησιμοποιούν ένα καθαρό πλαίσιο επιλογής CSS: "Αυτό περιελάμβανε την απόκρυψη των πλαισίων επιλογής στις φόρμες με εξωτερικό div, προσθήκη διαφάνειας και τη χρήση του -webkit-εμφάνιση. Το αποτέλεσμα είναι ένα κουτί που φαίνεται καλό σε όλα τα προγράμματα περιήγησης και υποβαθμίζεται με χαρά ", λέει ο Kneifel.
07. Lift Interactive
Η Lift Interactive έκανε μια δουλειά εξισορρόπησης του καλού σχεδιασμού με διάφορα εφέ και διατηρώντας την τέλεια αριστοκρατική. Ο ιστότοπος είναι γεμάτος από λίγες επιπλέον πινελιές με μεταβάσεις και μετασχηματισμούς, αλλά το αγαπημένο μου είναι οι τρισδιάστατες μεταμορφώσεις στα βιβλία. Ένα θαυμάσιο αποτέλεσμα που προσθέτει μια έκπληξη.
08. Εντυπωσιάστε έναν πιγκουίνο
Η Penguin Press αποφάσισε να δοκιμάσει κάτι διαφορετικό για να βρει διαχειριστή κοινότητας, οπότε δημιούργησαν το Impress a Penguin για να βοηθήσουν στην αναζήτησή τους. Περισσότερο από μια παρουσίαση διαφανειών, ο ιστότοπος χρησιμοποιεί περιγράμματα και σκιές για να σας δώσει πραγματικά την αίσθηση ότι είναι σελίδες σε ένα βιβλίο. Οι εικόνες Penguin σε κάθε σελίδα του Isobel Knowles δημιουργούν μια υπέροχη εμπειρία αφήγησης.
09. Microsoft
Η Paravel σχεδίασε και δημιούργησε μια εντελώς νέα αρχική σελίδα για τη Microsoft. Αυτή η σελίδα έχει συζητηθεί πολύ για την ανταπόκρισή της, αλλά η προσοχή στη λεπτομέρεια δεν σταματά εκεί. Ο τρόπος με τον οποίο οι μεταβάσεις ενορχηστρώνονται στα διάφορα στοιχεία της σελίδας συγκεντρώνει τα πάντα μαζί με ένα στιλβωμένο τρόπο.
10. Πράγματα και ανοησίες
Είναι δύσκολο να μην χαμογελάς όταν βλέπεις τους εικονογραφημένους χαρακτήρες να ανταλλάσσονται σε διαφορετικά σημεία μέσω ερωτημάτων πολυμέσων στην κεφαλίδα αυτού. Οι εικονογραφήσεις, του Josh Cleland, φέρνουν πολλή προσωπικότητα σε αυτόν τον τελευταίο επανασχεδιασμό για το Stuff & Nonsense του Andy Clarke.
11. Σφυρί
Οι λαοί της Riot δημιούργησαν έναν πολύ καλά μελετημένο ιστότοπο για την τελευταία τους προσφορά λογισμικού, το Hammer. Η χρήση των μεταβάσεων στο hover για την περιοχή του ήρωα είναι μια αναζωογονητική εναλλακτική λύση για ένα καρουσέλ. Ο σχεδιασμός για να φαίνεται ότι συμβαίνει στον φορητό υπολογιστή σας είναι επίσης μια ωραία πινελιά.
12. Συνεργάτες εργαστηρίου
Ο ιστότοπος για το κομψό στούντιο τέχνης και σχεδιασμού, το Lab Partners, μεταδίδει ένα δυνατό μήνυμα μέσω της επιλογής των χρωμάτων και της προσοχής στη λεπτομέρεια. Διαθέτει ένα άτυπο καρουζέλ και μια καλά επιμελημένη διάταξη στο τμήμα εργασίας. Το κατάστημά τους λειτουργεί στο Big Cartel αλλά δεν θα το γνωρίζατε, είναι ενσωματωμένο στον ιστότοπο πολύ καλά με προσαρμοσμένο CSS σε όλους τους τομείς.
13. Πάντα δημιουργικό
Η Πάντα Δημιουργική, μια εταιρεία που εδρεύει στο Χιούστον, συγκέντρωσε έναν ιστότοπο που δείχνει πόσο μπορείτε να επιτύχετε με περιορισμένο αριθμό χρωμάτων και γραμματοσειρών. Το Proxima Nova και το FF Tisa Web Pro είναι δύο αγαπημένα σχεδιαστές ιστοσελίδων που χρησιμοποιούνται πολύ καλά εδώ. Έχουν προσθέσει λίγο απροσδόκητο με το ζουμ στα αιωρούμενα τμήματα του χαρτοφυλακίου τους και τη λεπτή κινούμενη εικόνα στην κεφαλίδα επίσης.
14. Χτύπημα χαρτών
Οι λαοί του Chartbeat σας τραβούν με ένα υπέροχα επιλεγμένο χρώμα και τύπο στον ιστότοπό τους για να ξεκινήσετε. Στη συνέχεια, οι λεπτές πινελιές του animation και των μετασχηματισμών θα σας κρατήσουν ενθουσιασμένους καθώς κάνετε κύλιση στην επισκόπηση του προϊόντος.
15. OPower UX
Οι μεταβάσεις παπαρούνας σε αυτήν τη σελίδα ομάδας OPower UX αναδεικνύουν μια ομάδα με προσωπικότητα. Η κομψή χρήση του FF Dagny σε μια ποικιλία βαρών και τα απλά εικονίδια γύρω από τη σελίδα που σας λένε όλα για την ομάδα.
16. Διάσκεψη κύκλων
Ο ιστότοπος του συνεδρίου Circles ταιριάζει με διαφορετικά πρόσωπα και βάρη τύπου ιστού με δεξιότητα. Προσθέστε την παλέτα χρωμάτων και έχετε έναν υπέροχο ιστότοπο που ενσωματώνει το θέμα της διάσκεψης.
17. Δύο Paperdolls
Το Two Paperdolls είναι ένα στούντιο letterpress με έναν κομψό ιστότοπο. Η αρχική σελίδα προσφέρει δύο εμφανείς διαδρομές με έμφαση προσθέτοντας χρώμα στις εικόνες στο hover. Αλλά δεν είναι χωρίς διασκεδαστική πλευρά, η σελίδα του προσωπικού διαθέτει κούκλες από χαρτί με κινούμενα κεφάλια. «Μεταμόρφωσε μια στατική, βαρετή σελίδα προσωπικού σε μια μπόνους διασκέδασης», λέει ο Philip Meissner, ο σχεδιαστής / προγραμματιστής πίσω από τον ιστότοπο. . Είναι δύσκολο να μην χαμογελάς σε κινούμενες εικόνες που χρησιμοποιούνται έτσι.
18. Ωραία
Ο ιστότοπος Jukely είναι απλώς μια σελίδα προορισμού για μια επερχόμενη υπηρεσία, αλλά διαθέτει πολλή προσωπικότητα. Τα κινούμενα σχέδια που χρησιμοποιούνται για τη ρύθμιση κάθε στοιχείου απαλά στη θέση τους ταιριάζει με την αίσθηση του φόντου της σελίδας ντεγκραντέ. Η αλληλεπίδραση με τη φόρμα εγγραφής είναι γεμάτη έκπληξη και απόλαυση παρόλο που δεν έχετε ιδέα για το τι εγγραφείτε. Ίσως αυτή είναι η επόμενη έκπληξη.
19. Σταθμός 4
Σταθμός τέσσερα
'μικρό
σελίδα εμπειρογνωμοσύνης
έχει μια ενδιαφέρουσα σχεδίαση πλοήγησης που χρησιμοποιεί εικόνες μεγάλου κύκλου ως συνδέσμους για την κύρια εικόνα. Η πλοήγηση χρησιμοποιεί ακτίνα περιγράμματος σε στρώματα για να δημιουργήσει τα σχήματα και να προσθέσει και κάποια κινούμενα σχέδια.
20. Ενωμένοι Pixelworkers
Οι τύποι των United Pixelworkers επανασχεδιάστηκαν στην πραγματικότητα δύο φορές φέτος και η τρέχουσα έκδοση του ιστότοπου σίγουρα λικνίζεται. Η διάταξη είναι υπέροχα ανταποκρινόμενη, υπέροχη χρήση τύπου web και η σχεδίαση διαθέτει έντονες μεταβάσεις σε αιωρούμενους που διατηρούν το καθήκον να διαλέγουν ένα πουκάμισο διασκεδαστικό.
Υποσημείωση: Ορισμένα από τα κείμενα και τα αποσπάσματα που χρησιμοποιήθηκαν σε αυτό το άρθρο ελήφθησαν από το CSS Gallery στο .net Magazine, που γράφτηκε από την Jenn Lukas. Ευχαριστώ, Τζέν!
Ο Val Head είναι σχεδιαστής και σύμβουλος που του αρέσει να βλέπει το Διαδίκτυο να παραμένει όσο πιο φοβερό γίνεται. Διαχειρίζεται το Web Design Day, γράφει για CreativeJS και blogs στο valhead.com.
Σας άρεσε αυτό; Διαβάστε αυτά!
- Πώς να δημιουργήσετε μια εφαρμογή: δοκιμάστε αυτά τα υπέροχα μαθήματα
- Διατίθεται δωρεάν λογισμικό γραφιστικής τώρα!
- Κατεβάστε τις καλύτερες δωρεάν γραμματοσειρές
- Δωρεάν επιλογή γραμματοσειρών γκράφιτι
- Εκμάθηση εικονογράφων: εκπληκτικές ιδέες για δοκιμή σήμερα!
- Ανακαλύψτε τι ακολουθεί για το Augmented Reality
- Κατεβάστε δωρεάν υφές: υψηλή ανάλυση και έτοιμο για χρήση τώρα
