Υπάρχουν πολλά που μπορείτε να κάνετε μόνο με το CSS και το πρόγραμμα περιήγησης ιστού. Μεγάλοι προγραμματιστές αγαπούν να σπρώξουν το φάκελο και να δείξουν πόσο δυνατό είναι.
Ενώ τα πειραματικά έργα δεν είναι πάντα χρήσιμα στους χώρους παραγωγής, είναι απίστευτα εμπνευσμένα και εκπαιδευτικά.
Έχουμε οργανώσει μια χούφτα CSS έργα που παρουσιάζουν την πραγματική δύναμη του CSS. Όλα αυτά φιλοξενούνται στο CodePen έτσι ώστε να μπορείτε να μελετήσετε και να κλωνοποιήσετε τον πηγαίο κώδικα για να δείτε πώς λειτουργούν.
Αυτό Sass σελίδα φόρτωσης χρησιμοποιεί κινούμενες κλίσεις και στοιχεία με δυνατότητα αλλαγής μεγέθους για να δημιουργήσει ένα επαναλαμβανόμενο αποτέλεσμα φόρτωσης.
Οι περισσότεροι άνθρωποι πρέπει να αναγνωρίζουν αυτό το animation φόρτωσης από το Facebook το οποίο χρησιμοποιεί μια μικρότερη έκδοση αυτού του κάθετου φορτωτή bar. Αλλά οι περισσότεροι web φορτωτές χρησιμοποιούν κινούμενα GIF, καθώς οι εικόνες είναι πιο συμβατές με όλα τα προγράμματα περιήγησης.
Αυτή η γραμμή φόρτωσης CSS3 αποδεικνύει ότι με κάποια δημιουργική σκέψη μπορείτε να ξανακάνετε σχεδόν οποιοδήποτε στυλ κινουμένων σχεδίων θέλετε.
Δείτε το στυλό Φόρτωση γραμμών από το MaxStalker ( @MaxStalker ) επί CodePen .
Εδώ είναι ένα από τα πιο περίπλοκα έργα CSS που θα μπορούσα να βρω online. Αυτή η δυναμική Σχεδιασμός ηλιακού συστήματος από τον Malik Dellidj λειτουργεί με καθαρό CSS χωρίς εικόνες .
Κάθε πλανήτης αποδίδεται σε CSS, συμπεριλαμβανομένων των ταχυτήτων περιστροφής. Αυτό το έργο έχει σκοπό να είναι ένα ακριβές μοντέλο του ηλιακού συστήματος και διαθέτει ακόμα και ένα ρεαλιστικό διαστρικό υπόβαθρο για εκκίνηση.
Δεν μπορώ να φανταστώ πόσο καιρό αυτό πήρε μόνο για να κάνει τα εικονίδια πλανήτη, πόσο μάλλον να πάρετε τις ταχύτητες κινούμενων εικόνων σωστά. Αλλά όπου υπάρχει διαθήκη υπάρχει ένας τρόπος.
Δείτε το στυλό Κινούμενη ηλιακή εγκατάσταση - Pure CSS του κ. Malik Dellidj ( @kowlor ) επί CodePen .
Ποτέ δεν πίστευα ότι θα έβλεπα την ημέρα κατά την οποία θα μπορούσε να παιχτεί ο κλασικός Νανοεπιστήμονας των Windows χρησιμοποιώντας καθαρό CSS . Ωστόσο, χάρη στην εταιρεία ανάπτυξης Bali Balo εκείνη την ημέρα έχει έρθει.
Σημειώστε ότι αυτό δεν λειτουργεί ακριβώς όπως και ο παραδοσιακός Ναρκαλιευτής επειδή δεν κρατά σωστά το σκορ. Αλλά παρακολουθεί με ακρίβεια το χρόνο και δεν χρησιμοποιεί γλείψιμο JavaScript.
Κάπως ακόμη και η διεπαφή φαίνεται εκπληκτικά κοντά στο αρχικό UI του Minesweeper και όλα τρέχουν στο CSS. Ενώ μπορεί να μην είναι ένα τέλειο αντίγραφο είναι αρκετά κοντά για να με πηδούν να παίζω μερικούς γύρους.
Δείτε το στυλό Pure CSS minesweeper του Μπαλί Μπαλο ( @ bali_balo ) επί CodePen .
Στην επιφάνεια αυτό το διακόπτη εναλλαγής μπορεί να φαίνονται αρκετά απλά. Διατρέχει μια είσοδο κιβωτίου ταχυτήτων και διαβιβάζει δεδομένα στο backend, αν και αυτό δεν είναι πραγματικά το εντυπωσιακό μέρος.
Αυτή η εναλλαγή έχει μερικές δυνατότητες που την καθιστούν έναν από τους καλύτερους διακόπτες ενεργοποίησης / απενεργοποίησης frontend:
Κάποιος τρόπος αυτός ο διακόπτης ενεργοποίησης / απενεργοποίησης παγιδεύει κάθε χρήστη που κάνει κλικ και χρησιμοποιεί αυτό το συμβάν για να ενεργοποιήσει την προβολή της περιοχής εναλλαγής ημέρας / νύχτας. Τα σχέδια εικονιδίων ήλιου και φεγγαριών είναι επίσης όμορφα σχηματοποιημένα, δεδομένου ότι τρέχουν σε τίποτα εκτός από το CSS.
Δείτε το στυλό Pure Css "ημέρα και νύχτα" εναλλαγή του κ. Benjamin Réthoré ( @ bnthor ) επί CodePen .
Παραδοσιακή παρακολούθηση ποντικιών είναι το έργο της JavaScript που αναφέρει τις συντεταγμένες X / Y του χρήστη στη σελίδα.
Τεχνικά χρειάζεστε JavaScript για να συγκεντρώσετε αυτές τις συντεταγμένες και να κάνετε οτιδήποτε χρήσιμο μαζί τους. Αλλά αυτό το απόσπασμα δείχνει ότι μπορείτε να σχεδιάσετε μια καθαρή λειτουργία παρακολούθησης ποντικιών CSS που θα ακολουθεί κάθε κίνηση του χρήστη.
Δεν μπορώ πραγματικά να σκεφτώ μια πρακτική χρήση για αυτό, αλλά θα μπορούσε να είναι διασκέδαση σε ένα χώρο φάρσα.
Δείτε το στυλό Πειραματική καθαρή παρακολούθηση ποντικιών CSS από τον Momcilo Popov ( @Momciloo ) επί CodePen .
Έχουμε όλοι δει εικόνες και εικονογραφήσεις φορέων σχεδιασμένο για το διαδίκτυο . Αλλά τι γίνεται με τις εικονογραφικές απεικονίσεις πλήρους σελίδας σχεδιασμένες με πρωτογενή CSS και SVG κώδικα;
Αυτό σχεδιασμό ψυχαγωγικού πάρκου είναι ένα πειραματικό πρόγραμμα που λειτουργεί μόνο σε προγράμματα περιήγησης που υποστηρίζονται από το SVG. Ωστόσο, σε αυτά τα σύγχρονα προγράμματα περιήγησης κάνει άψογα και κάθε στοιχείο έχει μια πολύ ρεαλιστική τοποθέτηση στη σελίδα.
Τα κινούμενα σχέδια είναι σίγουρα εντυπωσιακά, αλλά είναι και η ακρίβεια των στοιχείων του SVG, τα οποία επίσης προσελκύουν την προσοχή μου. Μέσα σε λίγα χρόνια, θα μπορούσαμε να βρούμε αυτά τα είδη απεικονίσεων στον ιστό που τρέχουν αποκλειστικά σε κώδικα χωρίς αρχεία εικόνας.
Δείτε το στυλό Πρότυπο πάρκο διασκέδασης svg από Lina (animation powered by CSS) από τον Vladimir Gashenko ( @ gxash ) επί CodePen .
Σχεδίαση επαναλαμβανόμενης κίνησης CSS όπως την έννοια της ταινίας Möbius είναι πολύ δύσκολο. Αλλά προσθέστε μερικά στοιχεία 3D και μεταβαλλόμενες κλίσεις; Τώρα έχετε μια πραγματική πρόκληση.
Αυτό το απόσπασμα είναι εντυπωσιακό, λαμβάνοντας υπόψη πόσο ομαλή είναι η εμφάνιση και πόσο μικρός κώδικας χρησιμοποιείται (μόνο 90 γραμμές CSS). Με το Haml χρειάζεστε μόνο 6 γραμμές κώδικα για να δημιουργήσετε ολόκληρη την ιδέα.
Θα αναγνωρίσω ότι αυτό δεν θα ήταν εξαιρετικά χρήσιμο σε έναν πραγματικό ιστότοπο, αλλά είναι μια απόδειξη για το πόσο μπορείτε να κάνετε με μερικές δεκάδες γραμμές HTML και CSS.
Δείτε το στυλό Möbius 6ετρανών (καθαρό CSS) της Ana Tudor ( @thebabydino ) επί CodePen .
Αφού χρησιμοποιήσετε αυτό το webapp για λίγα δευτερόλεπτα, ίσως αισθάνεστε ότι τρέχει με JavaScript. Οι δυναμικές συμπεριφορές όπως η περιστροφή 3D και η τοποθέτηση του εδάφους είναι όλα ενδείξεις μιας γλυκιάς ιστοσελίδας JS.
Αλλά αυτό το περιβάλλον χρήστη δημιουργού χαρτών από τον Vincent Durand είναι στην πραγματικότητα 100% καθαρό CSS. Τα βέλη για περιστροφή, η ίδια η λειτουργία περιστροφής και όλες οι λειτουργίες κλικ-τόπου τρέχουν στο CSS.
Αξίζει να αναφέρουμε πως αυτή η ιδέα αποδίδεται χρησιμοποιώντας και 3D κύβους. Τα ίδια τα μπλοκ λειτουργούν ως τρισδιάστατα στοιχεία και μπορείτε να περιστρέψετε τους κύβους απλά κρατώντας το ποντίκι.
Δεν υπάρχει αμφιβολία μια από τις πιο τρελές χρήσεις για το CSS που έχω δει εδώ και πολύ καιρό.
Δείτε το στυλό Πλήρης δημιουργός χάρτη CSS από τον Vincent Durand ( @onediv ) επί CodePen .
Το έργο αυτό είναι λίγο λιγότερο διαδραστικό αλλά ταυτόχρονα εξίσου εκπληκτικό. Ο προγραμματιστής Peter Schmiz ανέκαμψε όλα τα κύρια iOS 7 εικονίδια εφαρμογών χρησιμοποιώντας καθαρή HTML και CSS.
Κανένα από αυτά τα εικονίδια δεν χρησιμοποιεί SVG ή αρχεία εικόνων. Κάθε στοιχείο σε κάθε εικονίδιο είναι σκληρό κωδικοποιημένο σε HTML με ένα στοιχείο span / div, στη συνέχεια στυλ χρησιμοποιώντας το CSS. Το πιο τρελό μέρος είναι πόσο ακριβείς είναι αυτοί!
Το πλήρες σετ περιλαμβάνει 22 εικονίδια και όλα είναι αρκετά όμορφα. Είμαι πολύ εντυπωσιασμένος με την προσοχή στη λεπτομέρεια για εικόνες όπως οι Χάρτες και ο Καιρός. Απλά περισσότερη απόδειξη ότι με αρκετό χρόνο και υπομονή μπορείτε σχεδόν να σχεδιάσετε οτιδήποτε στο CSS.
Δείτε το στυλό iOS 7 εικονίδια με καθαρό CSS του κ. Peter Schmiz ( @peterschmiz ) επί CodePen .
Η επαναδημιουργία της κινούμενης φόρτωσης Slack με το CSS3 είναι σίγουρα εντυπωσιακή. Αλλά αυτό το απόσπασμα αναπαράγει τον φορτωτή Slack με ένα μόνο στοιχείο στη σελίδα. Αυτό λέω αφοσίωση.
Ο συνολικός αριθμός CSS για αυτό το απόσπασμα είναι λίγο πάνω από 100 γραμμές που περιλαμβάνει τα χρώματα λογότυπου Slack και τα εφέ κίνησης.
Δεν μπορώ να πω αν αυτή η ιδέα θα λειτουργήσει για άλλα επώνυμα εικονίδια φόρτωσης, αλλά σίγουρα είμαι εντυπωσιασμένος με αυτό.
Δείτε το στυλό Μονοκόκκινο φορτωτή από τον CrocoDillon ( @CrocoDillon ) επί CodePen .
Θα βρείτε δωδεκάδες προσαρμοσμένων σχεδίων 3D bar στο CodePen όλα με τα δικά τους animations. Αλλά αυτές τις 3D μπάρες από τον Rafael González ξεχωρίζουν για όλα τα άλλα μοντέρνα γραφήματα γραμμών CSS.
Κάθε ένα από αυτά τα διαγράμματα τρέχει σε flexbox για τα εμπορευματοκιβώτια, ώστε να αυτο-μέγεθος ανάλογα με το πόσες ράβδους προσθέτετε και πόσο μεγάλο είναι το δοχείο. Επιπλέον, κάθε διάγραμμα ράβδων ζωντανεύει όταν μετατοπίζεται σε προβολή, όλα ελέγχονται μέσω καθαρού CSS.
Και δεδομένου ότι το μέγεθος κάθε γραμμής τρέχει στο em είναι μπορείτε να προσαρμόσετε κάθε γραμμή για να το μέγεθος φυσικά με βάση τα μεγέθη γραμματοσειράς του προγράμματος περιήγησης. Ένα έξυπνο παράδειγμα που αποδεικνύει ότι το σύγχρονο CSS είναι πολύ πιο ευέλικτο από ποτέ.
Δείτε το στυλό Καθαρά μπαρ CSS του κ. Rafael González ( @rgg ) επί CodePen .