Οδηγός αρχαρίων για το CSS3
Από την ανακοίνωση του 2005, η ανάπτυξη του επιπέδου 3 του Cascading Style Sheet ή καλύτερα γνωστή ως CSS3 έχει παρακολουθείται και παρακολουθείται από πολλούς σχεδιαστές και προγραμματιστές. Όλοι μας ενθουσιασμένοι για να πάρουμε τα χέρια μας στα νέα χαρακτηριστικά του CSS3 - τις σκιές κειμένου, τα όρια με τις εικόνες, την αδιαφάνεια, τα πολλαπλάσια υπόβαθρα κ.λπ., για να αναφέρουμε μόνο λίγα.
Από σήμερα δεν υποστηρίζονται πλήρως όλοι οι επιλογείς του CSS3. Αλλά αυτό δεν σημαίνει ότι δεν μπορούμε να κάνουμε κάποια διασκέδαση για τη δοκιμή νέων στοιχείων του CSS3. Αυτή η ανάρτηση είναι αφιερωμένη σε όλους τους σχεδιαστές και προγραμματιστές που είναι ήδη εξοικειωμένοι με το CSS 2.1 και θέλουν να πάρουν τα χέρια σας βρώμικα στο CSS3.0.
Είναι μια συλλογή από χρήσιμες αναγνώσεις CSS3, κώδικες δειγμάτων, συμβουλές, tutorials, cheat-sheets και άλλα. Μη διστάσετε να τα χρησιμοποιήσετε στα έργα σας, απλά βεβαιωθείτε ότι πέφτει με χαρά στα ασυμβίβαστα προγράμματα περιήγησης.
Ξεκινώντας με το CSS3
Εισαγωγή στο CSS3
Μια επίσημη εισαγωγή στο CSS και το CSS3. Αυτό το έγγραφο σας δίνει μια γενική ιδέα για την ανάπτυξη του CSS3.
CSS3: Σχεδιάστε το επόμενο επίπεδο
Πλεονεκτήματα του CSS3, με επεξηγήσεις και παραδείγματα ιδιοτήτων CSS3 και επιλογέων.
Αρκετά κόλπα με CSS3
Το Webmonkey σάς φέρνει μέσα από πολλά βασικά κόλπα στο CSS3, συμπεριλαμβανομένων στρογγυλεμένων συνόρων, συνόρων, σκιάς σταγόνων, τεχνάσματα εικόνας και πολλά άλλα.
Συνέντευξη: Έξι ερωτήσεις με τον Eric Meyer στο CSS3
Οι άνθρωποι της Six Revision έκαναν συνέντευξη από τον Eric Meyer με πολύτιμες ιδέες και απαντήσεις στο CSS3.
CSS3: Προοδευτική Ενίσχυση
Πώς μπορείτε να χρησιμοποιήσετε τεχνικές βελτίωσης με χαριτωμένη (ή προοδευτική) αξιοποίηση των χαρακτηριστικών του CSS3 στα προγράμματα περιήγησης που τα υποστηρίζουν, διασφαλίζοντας ταυτόχρονα ότι ο κωδικός σας θα παρέχει ακόμα ικανοποιητική εμπειρία χρήστη σε παλαιότερα προγράμματα περιήγησης που δεν υποστηρίζουν ακόμη αυτές τις λειτουργίες.
CSS3: Ιστορικό και σύνορα
Στρογγυλεμένα σύνορα (ακτίνα-ακτίνα)
Οδηγός για τη δημιουργία στρογγυλεμένων συνόρων με το CSS3 ακτίνα ακρόασης ιδιοκτησία.
Στρογγυλεμένα σύνορα με εικόνα (σύνορα-εικόνες)
Πώς να χρησιμοποιήσετε τις εικόνες στα σύνορα με συνοριακή εικόνα ιδιοκτησία.
CSS3 σύνορα, φόντο και πλαίσια
Λεπτομερής εξήγηση με παραδείγματα νέων ιδιοτήτων CSS3 όπως: κλιπ φόντου, αρχική προέλευση, προσάρτηση φόντου, κουτί-σκιά, κουτί-διακόσμηση-διάλειμμα, ακτίνα ακρόασης και συνοριακή εικόνα.
CSS3: Κείμενο
Επίδραση Letterpress
Δημιουργήστε ένα απλό εγχόγραφικό αποτέλεσμα με το CSS3.
Έξι εφέ κειμένου που χρησιμοποιούν σκίαση κειμένου
Τα εφέ κειμένου περιλαμβάνουν: vintage / retro, neon, inset, αναγλυφικά, φωτιά και επιτραπέζια παιχνίδια.
Όμορφη τυπογραφία
Πώς να πάρετε βασικό markup και να το μετατρέψετε σε ένα ελκυστικό και όμορφο τυπογραφικό σχεδιασμό μέσω καθαρού CSS3.
Περιστροφή κειμένου
Χρησιμοποιεί μια εικόνα sprite και ένα πασπαλίζουμε CSS για να βγάλουμε τα πράγματα σωστά.
Κείμενο περιγράμματος
Πώς να προσθέσετε ένα περίγραμμα ή ένα εγκεφαλικό επεισόδιο στο κείμενό σας χρησιμοποιώντας το CSS3 κτυπήματος κειμένου ιδιοκτησία.
Εφέ κάλυψης κειμένου
Διαδραστικό φαινόμενο κάλυψης κειμένου χρησιμοποιώντας το σκιά κειμένου Ιδιότητα CSS.
Link nudging (animation) με το CSS3
Ditch Javascript και δημιουργήστε το αποτέλεσμα ώθησης εξ ολοκλήρου με το CSS3.
CSS Επιλογή στυλ
Αλλάξτε το στυλ επιλογής κειμένου με το CSS3.
CSS3: Μενού
Περιεχόμενο πολλαπλών στηλών
Χρησιμοποιώντας το CSS3 για να δημιουργήσετε ένα σύνολο στηλών στον ιστότοπό σας χωρίς να χρειάζεται να αντιστοιχίσετε μεμονωμένα επίπεδα και (ή) παραγράφους για κάθε στήλη.
Sexy Tooltips με Just CSS
Πώς να χρησιμοποιήσετε το εξελισσόμενο πρότυπο CSS μπορεί να ενισχύσει μερικά υπέροχα εργαλεία cross-browser.
Περισσότερα εργαλεία:
- Pure CSS3 tooltip
- Εργαλεία με CSS3.
Πτυσώμενο μενού
Πώς να δημιουργήσετε ένα αναπτυσσόμενο μενού πολλαπλών επιπέδων Apple.com χρησιμοποιώντας το ακτίνα ακρόασης, κουτί-σκιά, και σκιά κειμένου.
CSS3 μόνο περιοχή καρτελών
Κάντε κλικ σε μια καρτέλα, αποκρύψτε όλους τους πίνακες, δείξτε αυτό που αντιστοιχεί στην καρτέλα που μόλις πατήσατε - όλα με CSS.
3D κορδέλες με CSS3
Δημιουργήστε ωραία 3D ταινίες με μόνο CSS3.
CSS3: Απόσπαση σκιάς
Αποθέστε τη σκιά στην εικόνα
Παρουσιάστε αρκετές τεχνικές και μερικές από τις πιθανές εμφανίσεις για σκιά χωρίς χρήση εικόνων.
Καρτέλες λάμψης με σκιά κουτιού
Πώς να δημιουργήσετε διαισθητικές και όμορφες καρτέλες στο CSS3 χωρίς εικόνα.
CSS3: Κουμπιά
Εκμάθηση: Αρκετά κουμπιά
Πώς να δημιουργήσετε όμορφα κουμπιά CSS3 συμβατά με το πρόγραμμα περιήγησης, τα οποία υποβαθμίζονται χαριτωμένα.
Φούσκες ομιλίας
Διάφορες μορφές φαινομένου φούσκας ομιλίας που δημιουργήθηκε με CSS 2.1 και ενισχυμένη με CSS3.
Github παρόμοια κουμπιά
Συλλογή κουμπιών που δείχνουν τι είναι δυνατό χρησιμοποιώντας το CSS3, διατηρώντας ταυτόχρονα την απλούστερη δυνατή σήμανση.
Spinning, ξεθώριασμα εικονίδια με CSS3 και MooTools
Πώς να χρησιμοποιήσετε το CSS3 και το MooTools για να δημιουργήσετε δυναμικά, περιστρεφόμενα στοιχεία.
Επικάλυψη εικόνας
Πρακτική εφαρμογή της ιδιότητας εικόνας CSS3 border-image.
Περισσότερο
- CSS3 + Mootools. Ένα παράδειγμα πειραματισμού σε mootools. Αυτό προσθέτει ιδιότητες CSS3 σε βασικό έργο πλαίσιο MooTools.
- Exploding Logo με CSS3 και MooTools ή jQuery. Βγάλτε τη στατική εικόνα και την καταστήσετε μια ζωηρή, εκρηκτική επίδραση πάνω στο ποντίκι.
- Η δύναμη του HTML 5 & CSS 3. Το HTML 5 και το CSS 3 κερδίζουν γρήγορα τη δημοτικότητα, το Perishable Press είναι εδώ για να εξηγήσει πώς και γιατί.
- Spinning Rays με CSS3 Animations & JavaScript Παράδειγμα. Απλό και λεπτό αποτέλεσμα περιστροφής ακτίνων στο πίσω μέρος μιας εικόνας.
- CSS3 Polaroid Photo Gallery. Πώς να δημιουργήσετε μια δροσερή στοίβα φωτογραφιών Polaroid με καθαρό στυλ CSS.
- HTML 5 και CSS 3: Οι τεχνικές που θα χρησιμοποιήσετε σύντομα. Μια ανασκόπηση για την οικοδόμηση ενός blog από το έδαφος με HTML5 και CSS3.
Cheatsheets & Αναφορές
CSS3 Cheat Sheet (PDF)
Εκτυπώσιμο cheatsheet με πλήρη κατάλογο όλων των ιδιοτήτων, τύπους επιλογέων και επιτρέπει τιμές στην τρέχουσα προδιαγραφή CSS3 από το W3C.
Υποστήριξη CSS στην Όπερα 9.5
Πλήρης λίστα με τους υποστηριζόμενους επιλογείς CSS στην Όπερα 0.5.
Διαθέσιμες γραμματοσειρές για ενσωμάτωση @ font-face
Πλήρης λίστα των γραμματοσειρών για τις οποίες έχει αδειοδοτηθεί σήμερα @ font-face ενσωμάτωση.
CSS 3 επιλογείς - Επεξήγηση
Ένας οδηγός και αναφορά στους επιλογείς CSS3 και τα μοτίβα του.
Γεννήτρια κανόνα CSS3 διαφυλλικής περιήγησης
Οι κανόνες CSS3 μπορείτε να αντιγράψετε και να επικολλήσετε στο δικό σας φύλλο στυλ.
CSS3 Κάντε κλικ στο Διάγραμμα
Αποκτήστε στυλ CSS3, όπως μέγεθος κιβωτίου, ακτίνα πλαισίου, σκιά κειμένου και πολλά άλλα μέσα σε ένα κλικ.
Περιεχόμενο CSS και συμβατότητα προγράμματος περιήγησης
Πλήρης κατάλογος των πινάκων επιλογής τόσο του CSS όσο και του CSS3 με δήλωση για έλεγχο συμβατότητας προγράμματος περιήγησης.
