50+ τέλειες τεχνικές CSS3 για καλύτερα σχέδια
Το CSS3 κερδίζει έδαφος, παρά το γεγονός ότι το πρότυπο δεν έχει ακόμη οριστικοποιηθεί.
Υπάρχουν εκατοντάδες μαθήματα εκεί έξω για να διδάξουν στους σχεδιαστές πώς να το χρησιμοποιήσουν, αλλά δυστυχώς πολλά από αυτά καλύπτουν το ίδιο έδαφος.
Και ορισμένα από τα μαθήματα διδάσκουν τους σχεδιαστές να κάνουν πράγματα που ίσως δεν θεωρούν χρήσιμα, αν και οι τεχνικές μπορούν συνήθως να προσαρμοστούν ώστε να ταιριάζουν τέλεια σε ένα έργο.
Παρακάτω υπάρχουν περισσότερα από πενήντα εκπληκτικά μαθήματα CSS3. Πολλοί είναι αυστηρά CSS και HTML, ενώ άλλοι ενσωματώνουν επίσης JavaScript.
Εάν έχετε μια αγαπημένη τεχνική ή ένα σεμινάριο που δεν περιλαμβάνεται παρακάτω, παρακαλώ το μοιραστείτε με τα σχόλια!
Χρήση του CSS3 για απεικόνιση χωρίς εικόνες
Διάφορες νέες μέθοδοι στο CSS3 επιτρέπουν τη δημιουργία πολλών πολύ περίπλοκων γραφικών χρησιμοποιώντας καθαρό CSS και χωρίς εικόνες. Εδώ είναι μια χούφτα από τα καλύτερα παραδείγματα εκεί έξω.
Pure iPhone απεικόνιση CSS
Ένα μείγμα από σύνορα, μετασχηματισμούς και κλίσεις για να δημιουργήσετε μια κινούμενη εικόνα ενός iPhone.
Δημιουργία του λογότυπου περιήγησης Opera στο CSS3
Μια καθαρή απεικόνιση του λογότυπου της Όπερας με τις τεχνικές CSS3.
Το ηλιακό μας σύστημα με το CSS3
Μια κηλίδα εμφάνιση του ηλιακού συστήματος με εφέ κίνησης ..
Αναλογικό ρολόι
Δημιουργήστε ένα δροσερό αναλογικό ρολόι χρησιμοποιώντας μόνο CSS3 και jquery.
Πειράματα σκιάς
Αυτό το σεμινάριο δείχνει πώς να χρησιμοποιήσετε τις σκιές CSS για να δημιουργήσετε μια ποικιλία εφέ, συμπεριλαμβανομένης της γραφικής παράστασης Dark Side of the Moon, ενός σκιερού περιοδικού πίνακα και ακόμη και ενός ψυχεδελικού "φίλτρου αγάπης".
Δημιουργία εικόνων στυλ Polaroid με Just CSS
Αυτό το σεμινάριο χρησιμοποιεί και τα εφέ CSS2 και CSS3 για να προσθέσει το στυλ Polaroid σε μια απλή λίστα εικόνων.
CSS3 Text, Layout και Color Effects
Το CSS3 μπορεί να χρησιμοποιηθεί για πολλά διαφορετικά κινούμενα σχέδια και γραφικά, αλλά είναι επίσης εξαιρετικό για τη διάταξη, το κείμενο και τα εφέ χρώματος που μπορεί να έχετε χρησιμοποιήσει στο παρελθόν για το Photoshop.
Utilitzing CSS3 Columns
Κωδικοποίηση μιας καθαρής πολυ-στήλης μονάδας CSS3.
Γενική εφαρμογή CSS3
Μια επισκόπηση των πλεονεκτημάτων του CSS3.
Σχεδίαση συνδέσεων με το CSS3
Τέσσερις διαφορετικοί τρόποι για το στυλ διαφορετικών τύπων συνδέσμων με το CSS3
CSS3 Κάθετο Ακανόνιο
Οι κλίσεις και οι μεταβάσεις κάνουν αυτό το μενού ακορντεόν που υποβαθμίζεται σε μια λίστα που έχει ταξινομηθεί σε παλαιότερα προγράμματα περιήγησης.
Πλήκτρα Super Awesome CSS3
Χρωματισμένα κουμπιά κλίσης με σκίαση που λειτουργούν σε ανοιχτόχρωμο ή σκούρο φόντο και δεν απαιτούν εικόνες!
Κουμπιά στυλ Photoshop με CSS3
Μια παράλληλη σύγκριση σχετικά με τον τρόπο δημιουργίας κουμπιών CSS3 χωρίς εικόνες και με το Photoshop.
Κείμενο κλίσης Css
Οδηγίες για την πραγματοποίηση ενός μοναδικού αποτελέσματος κειμένου με την εφαρμογή ενός χάρτη υφής στο κείμενο. Μπορείτε να χρησιμοποιήσετε διαβαθμίσεις ή μοτίβα για να δημιουργήσετε πραγματικά κείμενο.
Ορισμένες εναλλακτικές λύσεις CSS3 για τα εφέ JavaScript
7 τρόποι για να αντικαταστήσετε τα κοινά χρησιμοποιούμενα εφέ JavaScript με το CSS3 για να έχετε το site σας έτοιμο για το μέλλον.
Εφέ ανάγλυφου CSS3
Δημιουργία ενός εφέ ανάγλυφου κειμένου χωρίς hacks του προγράμματος περιήγησης Photoshop.
Κατανόηση των τιμών χρωμάτων CSS3
Όλα σχετικά με τις νέες επιλογές χρωμάτων που είναι διαθέσιμες με το CSS3.
Δημιουργία εμπλουτισμένων εφέ με το CSS3
Οι μεταβάσεις και οι μετασχηματισμοί CSS μπορούν να συνδυαστούν για να κάνουν μια ποικιλία αποτελεσμάτων.
Δημιουργία εφέ Coke3 Bokeh
Η δυνατότητα χρήσης κλίσεων και διαφάνειας με το CSS3 καθιστά δυνατή αυτή την κλασική επίδραση.
Στήλες CSS3
Ένα καλό εκπαιδευτικό βίντεο σχετικά με την έννοια της χρήσης CSS3 στήλες για τη διάταξη.
Fancy Lists με CSS3
Cool στυλ λίστας με κουκκίδες χρησιμοποιώντας το CSS3 για να κάνετε φανταχτερά checkmarks.
Πολύ Slick Infoboxes με CSS3
Οι τεχνικές που έγιναν δυνατές από το CSS3 κάνουν αυτά τα κουτιά να γεμίσουν πραγματικά.
Φούσκες ομιλίας
Τα ψευδο-στοιχεία μεταβολής των ακτίνων-πλαισίων και των μετασχηματισμών καθιστούν αυτά τα σχήματα δυνατά.
Εφέ μεταβάσεων εικόνας στυλ Flash
Ένας έξυπνος τρόπος χρήσης του εφέ κίνησης CSS.
Αναδημιουργία της οθόνης ενημέρωσης του Tumblr με το CSS3
Ένα εφέ σχεδιασμού CSS3 που υποβαθμίζει καλά σε παλαιότερα προγράμματα περιήγησης.
Η λεπτή CSS3 Τυπογραφία που είχατε ορκιστεί έγινε στο Photoshop
Αυτό το 13λεπτο βίντεο φροντιστήριο θα σας δείξει πώς να δημιουργήσετε ένα όμορφο, λεπτό τυπογραφικό αποτέλεσμα 3D εξ ολοκλήρου με το CSS3.
Περιστροφή κειμένου με CSS
Ακολουθεί μια ελαφρώς παλαιότερη τεχνική που δείχνει πώς μπορείτε να δημιουργήσετε κείμενο που είναι συμβατό με το πρόγραμμα περιήγησης, το οποίο είναι συμβατό με κάθετο άξονα.
Δημιουργήστε ένα εφέ Letterpress με CSS Text-Shadow
Αυτό το σεμινάριο Line25 θα σας δείξει πώς να χρησιμοποιήσετε σκιά κειμένου για να δημιουργήσετε ένα εφέ τύπου στυλ γραμματοσειράς στο κείμενο του ιστότοπού σας.
Awesome Gallery CSS3 Lightbox με το jQuery
Αυτός ο κώδικας δημιουργεί μια γκαλερί εικόνων σε στυλ Polaroid με μια επιλογή ανταλλαγής με μεταφορά και απόθεση.
Υπέροχες επικαλύψεις
Αυτό το σεμινάριο από το Zurb δείχνει πώς μπορείτε να δημιουργήσετε επικαλύψεις εικόνων χρησιμοποιώντας τις ιδιότητες των συνόρων CSS3, οι οποίες στη συνέχεια μπορούν να χρησιμοποιηθούν για την εμφάνιση πρόσθετων πληροφοριών σχετικά με μια εικόνα όταν μεταφέρεται.
Εμπλουτισμένες ετικέτες έντυπων γραμμών
Αυτό το σεμινάριο σας δείχνει πώς μπορείτε να δημιουργήσετε ετικέτες έντυπου σε ετικέτες που δεν εξαφανίζονται μόλις αρχίσουν να πληκτρολογούν οι επισκέπτες σας.
CSS3 3D Εφέ
Κινούμενο CSS3 Cube
Ένας μοναδικός τρισδιάστατος κινούμενος κύβος που χρησιμοποιεί τρισδιάστατους μετασχηματισμούς με στυλ CSS. Ο κύβος μπορεί να περιστραφεί χρησιμοποιώντας τα πλήκτρα βέλους για να εμφανιστούν οι πληροφορίες που εμφανίζονται σε κάθε όψη.
CSS3 3D Κορδέλες
Δώστε λίγο βάθος στον σχεδιασμό σας χρησιμοποιώντας αυτές τις εύκολες κορδέλες CD CSS3.
Κινούμενος κύλινδρος αφίσας 3D
Εμφάνιση αφίσες ταινιών με λεζάντες χρησιμοποιώντας ένα εκπληκτικό αποτέλεσμα προοπτικής 3D στο CSS3.
3D CSS3 Coke Can
Η μεταφορά μιας γραμμής κύλισης καθιστά αυτό το εικονικό οπτάνθρακα να μπορεί να κυλάει εμπρός και πίσω.
CSS Shadows
Δημιουργία σκιών στυλ με την αποσύνδεσή τους από το στοιχείο.
CSS3 Animation
Μια κινούμενη αποστολή της αποτυχημένης φάλαινας του Twitter με το CSS3
Ένας πολύ κομψός χρήστης του CSS3 που απογοητεύει εκπληκτικά κάπως καλά σε παλαιότερα προγράμματα περιήγησης.
Parallax Starfield Ιστορικό
Τα αστέρια μετακινούνται από τα αριστερά προς τα δεξιά πίσω από το περιεχόμενό σας με αυτό το κλασικό ταξίδι στο διάστημα.
Εμφάνιση και απόκρυψη περιεχομένου με το CSS3
Επέκταση και σύναψη δίσκων και δέντρων μενού χωρίς javascript.
Μια καρτέλα κυμαινόμενης ακολουθίας με το CSS3
Τοποθετήστε τα εικονίδια πλοήγησης ή επαφών σας με εύκολη πρόσβαση με αυτή τη χρήσιμη μέθοδο.
CSS3 Windows Modal Drop-in
Ένα ζευγάρι των κοινών παραθύρων τρόπων που παράγονται χρησιμοποιώντας τα αποτελέσματα και μετασχηματισμούς του CSS3.
Οι Spinners χρησιμοποιούν μόνο το CSS3
Δημιουργία κινούμενων εικόνων φόρτωσης χρησιμοποιώντας μόνο CSS3 και χωρίς κινούμενα gifs!
Εμφάνιση κοινωνικών εικόνων χρησιμοποιώντας το CSS3
Ένα δροσερό αποτέλεσμα εξασθένισης για την εμφάνιση των κοινωνικών σας εικόνων χρησιμοποιώντας καθαρό CSS3.
CSS3 Cartoon Animation
Δημιουργία ενός ολόκληρου κινούμενου στυλ flash χρησιμοποιώντας μόνο CSS3 και jquery.
Ένα κινούμενο τοπίο χρησιμοποιώντας το CSS3
Βουνά και σύννεφα και το νερό όλα κινούμενα με το CSS3.
Νίκαια υπότιτλους εικόνας κύλισης
Οι μεταβάσεις CSS3 σάς επιτρέπουν να κάνετε κάποια εκπληκτικά πράγματα με λεζάντες κειμένου. Ακολουθεί ένα παράδειγμα.
Ένα ελαστικό μενού μικρογραφιών
Μια σειρά εικόνων που επεκτείνονται και αποσύρονται όταν μετακινούνται.
Δέσμευση, δυναμικές κάρτες ευρετηρίου
Ένα φανταστικό εφέ κίνησης που θα μπορούσε να εφαρμοστεί σε μια σειρά σχεδίων.
Ένα πολύχρωμο ρολόι με CSS & jQuery
Αυτό το σεμινάριο δείχνει πώς να δημιουργήσετε ένα πραγματικά φοβερό πολύχρωμο ρολόι χρησιμοποιώντας CSS και jQuery, που αποτελείται από τρεις χωριστούς κύκλους στυλ φόρτωσης που δείχνουν ώρες, λεπτά και δευτερόλεπτα.
Pure CSS3 At-At Walker
Αυτό είναι ένα εντυπωσιακό παράδειγμα που χρησιμοποιεί το CSS3 (χωρίς JavaScript, χωρίς Flash) για να δημιουργήσει ένα animated At-At Walker από το Star Wars. Το μόνο μειονέκτημα είναι ότι αυτή τη στιγμή είναι μόνο ορατή σε προγράμματα περιήγησης Webkit (Safari και Chrome).
Δημιουργήστε ένα ρυθμιστικό περιεχομένου jQuery χρησιμοποιώντας το Pure CSS
Μάθετε να δημιουργείτε ένα καθαρά slider τύπου CSS jQuery με αυτό το σεμινάριο.
CSS3Μενού μενού
Αυτό το σεμινάριο από το WebDesignerWall δείχνει πώς μπορείτε να δημιουργήσετε ένα αναπτυσσόμενο μενού CSS3 συμβατό με το πρόγραμμα περιήγησης που λειτουργεί επίσης σε προγράμματα περιήγησης που δεν υποστηρίζουν το CSS3 (αν και με περιορισμένο στυλ).
Γράφτηκε αποκλειστικά για WDD από Κάμερον Τσάπμαν .
Εάν γνωρίζετε άλλα υψηλής ποιότητας CSS3 μαθήματα που δεν καλύπτονται παραπάνω και θέλετε να τα μοιραστείτε, παρακαλούμε να το κάνετε στα σχόλια!