20 Awesome Χριστουγεννιάτικα έργα κρυμμένα σε CodePen
Το CodePen είναι μια ηλεκτρονική παιδική χαρά για ταλαντούχους προγραμματιστές, ένα μέρος όπου μπορείτε πάντα να βρείτε δροσερά έργα για να διευρύνετε τους ορίζοντές σας και να δείτε τι έχουν να κάνουν οι άλλοι προγραμματιστές. Οι διακοπές στο τέλος του έτους είναι μια μεγάλη στιγμή για να εκπλήξετε τους αγαπημένους σας με δημιουργικά προσωπικά έργα ή για να ευχαριστήσετε τους πελάτες σας με μερικά δροσερά σχέδια αιχμής που θα βοηθήσουν την ευθυμία των διακοπών.
Σε αυτή τη θέση θα εξετάσουμε 20 εκπληκτικά Χριστουγεννιάτικα πειράματα στο CodePen, που μπορείτε να χρησιμοποιήσετε ως έμπνευση για να δημιουργήσετε τα δικά σας σχέδια.
1. Οικογενειακό Χριστουγεννιάτικο Τραγούδι
Αυτή η υπέροχη εφαρμογή Familybook Songbook app μπορεί να παίξει τα αγαπημένα σας τραγούδια Χριστουγέννων που φιλοξενούνται στο SoundCloud. Οι κανόνες στυλ εγγράφονται στη γλώσσα LESS stylesheet και η λειτουργία αναπαραγωγής μουσικής παρέχεται από ένα προσαρμοσμένο jQuery plugin.
Τα εικονίδια νιφάδων χιονιού και χριστουγεννιάτικων δέντρων στο παρασκήνιο δίνουν μια επίσημη ατμόσφαιρα στο σχεδιασμό και αν πετάξετε πάνω από το στυλό μπορείτε επίσης να βρείτε κάποιες λεπτές εφέ CSS.
2. Ψηφιακό Χριστουγεννιάτικο Δέντρο
Ο σχεδιασμός για τα Χριστούγεννα είναι πάντα μια ευχάριστη δουλειά, καθώς τα τυπικά οπτικά στοιχεία μπορούν να κατασκευαστούν με πολλούς δημιουργικούς τρόπους. Αυτό το στυλό αποτελεί καλό παράδειγμα για αυτό. Αρχικά, μπορείτε να δείτε μόνο τα πολύχρωμα τρίγωνα, που φαινομενικά δεν σχετίζονται με τις διακοπές, αλλά όταν κάνετε κλικ στο κουμπί "Αποκαλύψτε", τα δένουν μαζί σε ένα χριστουγεννιάτικο δέντρο. Δεν είναι μόνο μια μοναδική λύση, αλλά επίσης θυμίζει ένα απλούστερο παιχνίδι.
3. Χριστούγεννα με χιόνι
Δεν χρειάζεται απαραίτητα να χρησιμοποιήσετε το JavaScript, αν θέλετε να δημιουργήσετε ένα δροσερό κινούμενο σχέδιο για τα Χριστούγεννα. Σε αυτό το στυλό, τόσο η κινούμενη χιονόπτωση όσο και οι εικόνες φόντου δημιουργούνται αποκλειστικά στο CSS. Αξίζει να εξετάσουμε λίγο τον κώδικα, καθώς δείχνει τις απίστευτες δυνατότητες του CSS3. Η εικόνα φόντου μπορεί να μπερδευτεί ακόμη και για ένα πραγματικό γραφικό SVG.
4. Σάντα στη διαδρομή!
Σάντα στη διαδρομή! είναι ένα διασκεδαστικό παιχνίδι JavaScript για τις αργίες που κάνουν χρήση του πλαισίου παιχνιδιών HTML5 του phaser.js. Δεν υπάρχουν πάρα πολλοί κανόνες σε αυτό το παιχνίδι: ο Άγιος Βασίλης τρέχει απεριόριστα, ή τουλάχιστον μέχρι να πέσει κάτω. Αυτό το στυλό σας δίνει μια εξαιρετική ευκαιρία να καταλάβετε πώς να γράψετε ένα απλούστερο παιχνίδι στο JavaScript.
5. Μυστική Santa Όνομα Picker
Η επιλογή ενός ονόματος από ένα καπέλο ήταν ένας δημοφιλής τρόπος στα σχολεία και τα γραφεία για να επιλέξετε Secret Santas - αυτή η πένα είναι απλώς μια ψηφιακή έκδοση αυτής της παράδοσης. Δεδομένου ότι χρησιμοποιεί μόνο το JavaScript της βανίλιας, μπορείτε εύκολα να το ενσωματώσετε στον δικό σας ιστότοπο. Απλά αλλάξτε τα ονόματα μέσα στη μεταβλητή παράδοσης.
6. Χριστουγεννιάτικες μπάλες σε καθαρό CSS
Αυτές οι χαρούμενες χριστουγεννιάτικες μπάλες είναι γραμμένες σε καθαρό CSS λαμβάνοντας τη μόχλευση των κανόνων ακτίνας ακρών. Τα διαφορετικά μέρη των σφαιρών τοποθετούνται μαζί με τη χρήση επακριβώς υπολογισμένων σχετικών θέσεων.
Εάν θέλετε να προσθέσετε γρήγορα μια ατμόσφαιρα διακοπών σε μια ιστοσελίδα, απλά εισάγετε μερικές από αυτές τις μπάλες στα κατάλληλα σημεία σε ένα χρώμα που ταιριάζει με το συνολικό σχέδιο του ιστότοπου.
7. Κινητές νιφάδες χιονιού
Μπορείτε να κάνετε αυτές τις νιφάδες χιονιού να μετακινηθούν τοποθετώντας τους πάνω τους πάνω σε μια επιφάνεια εργασίας ή μετακινώντας το smartphone σας. Η λειτουργικότητα παρέχεται από αντικειμενοστραφή JavaScript που χρησιμοποιείται έξυπνα από τον προγραμματιστή για τη δημιουργία μιας προσαρμοσμένης κλάσης Snowflake.
Οι ίδιοι οι νιφάδες χιονιού είναι ενσωματωμένοι στο CSS3 και το φόντο χρησιμοποιεί κλίσεις - δεν υπάρχουν εικόνες σε αυτό το στυλό.
8. Πείραμα Accordion Holiday
Αυτό το ακορντεόν διακοπών είναι απλά όμορφο. Εάν τοποθετήσετε το δείκτη του ποντικιού πάνω από μια καρτέλα, θα έρθει να επικεντρωθεί επεκτείνοντας λίγο, και αν κάνετε κλικ σε αυτό ξαφνικά αναδύεται και καλύπτει ολόκληρη τη σελίδα. Είναι ενδιαφέρον να σημειώσουμε ότι αυτή η συσκευή τύπου στυλό χρησιμοποιεί το Scalable Vector Graphics (SVG) που έχουν σχεδιαστεί με CSS.
Τα SVG είναι πιο ισχυρά από αυτά που φαίνεται να είναι εκ πρώτης όψεως, μπορούν να τοποθετηθούν έξυπνα και να σχεδιαστούν με τους ίδιους κανόνες στυλ που χρησιμοποιούμε με κανονικά στοιχεία HTML.
9. Flat Pure CSS Snowman
Ποιος δήλωσε ότι το επίπεδο σχέδιο πρέπει να είναι βαρετό; Αυτός ο υπέροχος χιονάνθρωπος μπορεί εύκολα να προσθέσει τα Χριστούγεννα σε οποιοδήποτε σχέδιο. Δεν υπάρχουν εικόνες που χρησιμοποιούνται για τον χιονάνθρωπο, είναι εντελώς γραμμένο σε CSS. Αξίζει να ρίξετε μια ματιά στον κώδικα CSS λίγο και δείτε πώς ο προγραμματιστής χρησιμοποιεί τα εξής: πριν και μετά από τους ψευδοεπιλογείς για να επιτύχει το επιδιωκόμενο αποτέλεσμα.
10. CSS3 Snowflake
Μπορείτε να διευκολύνετε τη δημιουργία εικόνων μόνο CSS3 χρησιμοποιώντας προηγμένα εργαλεία ανάπτυξης front-end. αυτή η καλά σχεδιασμένη νιφάδα χιονιού CSS3 είναι ένα εξαιρετικό παράδειγμα για αυτό. Ο προγραμματιστής έκανε χρήση της γλώσσας του Jade templating που μεταγλωττίζεται σε HTML και ο προεπεξεργαστής CSS CSS για την υλοποίηση αυτού του εντυπωσιακού σχεδιασμού νιφάδα χιονιού.
11. Χριστουγεννιάτικο κουμπί
Τα έξυπνα σχέδια συχνά επιλέγουν λεπτές λύσεις, όπως και το χιονισμένο κουμπί των Χριστουγέννων σε αυτό το στυλό. Το σκούρο κόκκινο φόντο είναι μια τέλεια επιλογή για ένα σχέδιο Χριστουγέννων. όχι όλα πρέπει να είναι πράσινο μετά από όλα.
Τα χρώματα, οι κλίσεις, η γραμματοσειρά και το εφέ του hover κάνουν αυτό το κουμπί πολύ κομψό και επίσημο. Χρειάζεστε μόνο λίγες από αυτές για να διακοσμήσετε γρήγορα μια τοποθεσία για τα Χριστούγεννα.
12. Parallax Happy Holiday
Αν σας αρέσει η παράλλαξη parallax, γιατί δεν θα το χρησιμοποιήσετε για τα σχέδια διακοπών σας; Ο δημιουργός αυτού του στυλό πειραματίστηκε έξυπνα με το αποτέλεσμα και χρησιμοποίησε το πρόσθετο jQuery του Parallax.js με έναν λιγότερο συνηθισμένο τρόπο, καθώς το εφέ κύλισης δεν είναι κάθετο ως συνήθως αλλά οριζόντια. Η ατμόσφαιρα των Χριστουγέννων εντείνεται από μια εντυπωσιακή χιονόπτωση
Αν έπρεπε να διαλέξω οποιοδήποτε ελάττωμα αυτού του στυλό, θα ήταν η επιλογή χρώματος: λευκά γράμματα σε μερικώς λευκό φόντο εξασθενίζουν σημαντικά την προσβασιμότητα του σχεδίου.
13. CSS Χριστούγεννα χαρτί περιτυλίγματος
Μπορείτε να δημιουργήσετε ένα εντελώς μοναδικό χάρτινο χαρτί περιτυλίγματος με τη βοήθεια του CSS3. Ο δημιουργός αυτής της μάρκας δείχνει όχι μόνο μία, αλλά έξι παραλλαγές για αυτό. Τα όμορφα πρότυπα επιτυγχάνονται με την έξυπνη αξιοποίηση των κλίσεων CSS και την ιδιότητα λειτουργίας με μείγμα υποβάθρου.
Μπορείτε να βρείτε ακόμη πιο δροσερά παραδείγματα και μια λεπτομερή εξήγηση σχετικά με την ιστοσελίδα του προγραμματιστή.
14. Κουτί μέσα σε κουτί
Αυτός ο φανταστικός σχεδιασμός εμπνεύστηκε από τις παραδοσιακές ρωσικές κούκλες (μια κούκλα μέσα σε μια κούκλα). Εάν ανοίξετε το εξωτερικό κουτί κάνοντας κλικ σε αυτό, αποκαλύπτει ένα εσωτερικό κουτί που είναι επίσης το εξωτερικό κουτί ενός άλλου εσωτερικού κουτιού. Η λειτουργικότητα γράφεται στο jQuery και οι ακριβείς τόποι των πλαισίων ορίζονται με τη βοήθεια των απόλυτων και σχετικών κανόνων θέσης στο αρχείο CSS.
15. Κουτί δώρου με αποτέλεσμα φλούδας χαρτιού
Εάν καταφέρετε να αφαιρέσετε την κορδέλα από αυτό το δώρο, σπρώχνοντάς την μακριά, μπορείτε να ρίξετε μια ματιά στο φαινόμενο της ξεφλουδίσματος του χαρτιού supercool που αποκαλύπτει το εσωτερικό περιεχόμενο του δώρου. Μπορείτε να διαβάσετε το πλήρες σεμινάριο στην ιστοσελίδα του προγραμματιστή, είναι ένα τέχνασμα που σίγουρα αξίζει να μάθετε. Εάν θέλετε απλώς να χρησιμοποιήσετε τον κώδικα, μπορείτε να τον κλωνοποιήσετε και από το GitHub.
16. Χριστούγεννα καμβά Holiday Spirit
Τα Χριστούγεννα μπορεί να είναι μια μεγάλη στιγμή για να πειραματιστείτε με νέα πράγματα, ακριβώς όπως το έκανε ο δημιουργός σε αυτό το στυλό χρησιμοποιώντας HTML5 καμβά ως κινούμενο υπόβαθρο. Ο καμβάς έρχεται πριν από το περιεχόμενο (Happy Holidays!) Στο αρχείο HTML και έχει οριστεί ως φόντο με τη βοήθεια έξυπνης τοποθέτησης CSS.
Το στυλό χρησιμοποιεί επίσης μια δέσμη ενεργειών φόντου που περιλαμβάνεται ως ξεχωριστό αρχείο JavaScript.
17. Κάρτα δώρων UI
Αυτή η εντυπωσιακή κάρτα δώρων δεν είναι μόνο για τα Χριστούγεννα, αλλά μπορεί να χρησιμοποιηθεί οποιαδήποτε στιγμή όταν θέλετε να εκπλήξετε τους χρήστες σας με ένα δώρο στον ιστότοπό σας. Δεν βασίζεται στο JavaScript, καθώς είναι γραμμένο εξ ολοκλήρου στη γλώσσα στυλ φύλλου Sass.
Ο σχεδιασμός χρησιμοποιεί την ιδιότητα CSS3 διαδρομής κλιπ που επιτρέπει στους προγραμματιστές να εμφανίζουν μόνο μια συγκεκριμένη περιοχή ενός στοιχείου, αντί να δείχνει ολόκληρη την περιοχή.
18. Καλή CSS Καλά Χριστουγεννιάτικη Κάρτα
Αυτό το απείρως γέλιο Santa - χρησιμοποιώντας μόνο HTML και CSS3 - μπορεί να σας δώσει την ευκαιρία να καταλάβετε πώς μπορεί να χρησιμοποιηθεί η σύνταξη κινούμενων σχεδίων βασικών καρέ στην πράξη. Στο CSS3 μπορείτε να χρησιμοποιήσετε τον κανόνα @keyframes για να καθορίσετε τους κανόνες μιας κινούμενης εικόνας και στη συνέχεια μπορείτε να δεσμεύσετε αυτήν την καθορισμένη κινούμενη εικόνα με ένα συγκεκριμένο στοιχείο χρησιμοποιώντας την ιδιότητα CSS3 κινούμενης εικόνας.
Πρέπει να προσθέσετε το όνομα του κλειδιού ως την πρώτη τιμή της ιδιότητας κινούμενης εικόνας, ακριβώς όπως το έκαναν οι προγραμματιστές με τα προσαρμοσμένα πλαίσια κλειδιών που ονομάζονται bodyLaugh, beardLaugh, headLaugh και mouthLaugh ειδικά δημιουργημένα για αυτό το στυλό.
19. Xmas Cracker
Αν αιωρείται πάνω από αυτό το εντυπωσιακό Xmas Cracker, αποκαλύπτει ένα μοναδικό μήνυμα Χριστουγέννων που είναι ένας εκπληκτικός τρόπος να ευχηθείτε ένα Καλά Χριστούγεννα στους επισκέπτες σας. Το HTML είναι γραμμένο σε HAML, το HTML Abstraction Markup Language, ενώ οι κανόνες στυλ λαμβάνουν μόχλευση της δύναμης της γλώσσας Sass Syntactically Awesome Styesheets.
Το αποτέλεσμα είναι πράγματι έξυπνο και εκπληκτικό. Με την προσθήκη λίγο περισσότερων JavaScript μπορεί να χρησιμοποιηθεί ακόμη και για την παράδοση προσαρμοσμένων εισαγωγικών ή μηνυμάτων στους χρήστες.
20. Αναβοσβήνουν τα φώτα Xmas
Αυτά τα φώτα Χριστούγεννα που αναβοσβήνουν μπορούν να δώσουν γρήγορα μια μοναδική ατμόσφαιρα σε κάθε ιστοσελίδα Ο κώδικας front-end γράφεται σε HAML που μεταγλωττίζεται σε HTML, Sass που μεταγλωττίζεται σε CSS και jQuery.
Το κινούμενο λαμπερό αποτέλεσμα επιτυγχάνεται με τον προαναφερθέντα κανόνα @keyframes που παρέχεται από το CSS3. Τα χρώματα των οδηγήσεων ρυθμίζονται στο αρχείο jQuery προσθέτοντας 50 μοίρες στην τιμή Hue της προηγούμενης λυχνίας χρησιμοποιώντας την κλίμακα χρώματος HSL.
