Κωδικοποίηση ενός ευγενικού μενού πλοήγησης Breadcrumb στο CSS3
Τα μενού πλοήγησης και οι σύνδεσμοι είναι πιθανώς τα πιο σημαντικά στοιχεία διεπαφής σε μια διάταξη ιστού. Αυτές είναι οι μοναδικές αγορές για τους χρήστες ταξίδια μεταξύ των σελίδων και να αλληλεπιδράσετε με όλο το περιεχόμενο που έχετε δημιουργήσει. Το Breadcrumb προσφέρει παρόμοια λειτουργικότητα με το πρόσθετο πλεονέκτημα του παρακολουθώντας την τρέχουσα θέση σας. Θα είστε σε θέση να εμφανίζει όλες τις προηγούμενες διαδρομές σύνδεσης καθώς ο χρήστης διασχίζει την ιεραρχία του ιστότοπού σας.
Σε αυτό το σεμινάριο θα δημιουργήσουμε ένα λαμπερό μενού πλοήγησης με κάποια εφέ CSS3. Αυτό έχει δοκιμαστεί για να λειτουργήσει σε όλα τα μεγάλα προγράμματα περιήγησης που είναι συμβατά με το CSS3, ακόμη και τα παλαιότερα προγράμματα περιήγησης που δεν υποστηρίζουν το CSS3 θα το κάνουν ακόμα κανονικά στις περισσότερες περιπτώσεις.
Πριν βρεθούμε σε κώδικα, θα μιλήσουμε λίγο για τη λειτουργικότητα του breadcrumb μας, το πλήρες σεμινάριο σε ένα άλμα!
Προσφέροντας το ίχνος
Ένα μονοπάτι ψωμιού δεν είναι πιο περίπλοκο από οποιοδήποτε άλλο μενού. Τα στυλ μας θα χρησιμοποιούν πολύ πιο περίπλοκες ιδιότητες CSS από τα περισσότερα παραδείγματα, ωστόσο το πρότυπο των γυμνών οστών εξακολουθεί να είναι κατάλληλο για να καθοδηγεί τους χρήστες από τη μια σελίδα στην άλλη.
Σε αυτό το παράδειγμα θα δημιουργήσουμε ένα παρόμοιο στυλ με το μενού υποστήριξης της Google. Μπορείτε να δείτε το μενού τους στη σελίδα υποστήριξης του Gmail για να πάρετε μια ιδέα για το πού κατευθυνόμαστε. Τελικά θέλουμε παρέχει την καλύτερη εμπειρία χρήστη για όλους τους χρήστες, ανεξάρτητα από το λειτουργικό τους σύστημα ή το πρόγραμμα περιήγησης, έτσι έχω χτίσει 2 διαφορετικά παραδείγματα κώδικα για την υποστήριξη της χαλαρής υποβάθμισης σε παλαιότερα προγράμματα περιήγησης.
Το πρώτο είναι κατασκευασμένο με χρήση προσαρμοσμένες εικόνες φόντου και κατάλληλες ευθυγραμμίσεις CSS. Όλα τα γεγονότα και τα ενεργά γεγονότα είναι προ-χτισμένα με μερικά μόνο στυλ CSS, αλλά οι χρήστες που έχουν απενεργοποιημένες εικόνες δεν θα μπορούν να βιώσουν αυτά τα εφέ! Αυτός είναι ο λόγος για τον οποίο έχω κατασκευάσει επίσης ένα παρόμοιο μενού με κλίσεις CSS, στρογγυλεμένες γωνίες και σκιές κουτιού.
Αν είστε νευρικοί για την υποστήριξη και των δύο στυλ μπορείτε να επιλέξετε μεταξύ τους για το δικό σας site. Οι περισσότεροι επισκέπτες θα χρησιμοποιούν εικόνες από προεπιλογή, αλλά θα σκάψουν μέσω του εργαλείου ανάλυσης ιστότοπου αν θέλετε πιο ακριβή δεδομένα επισκεπτών.
Αρκετά λόγια, ας πηδήξουμε στο έργο! Θα ξεκινήσουμε κατασκευάζοντας το βασικό πλαίσιο HTML και θα μετακινηθείτε σε διαφορετικά εφέ στυλ. Πρωτα απο ολα πρέπει να κατεβάσετε την εικόνα απαιτούνται για το έργο.
Bare-Bones HTML
Ξεκινώ το έγγραφό μου με το πρότυπο πρότυπο σελίδας HTML5. Αυτό περιλαμβάνει το default doctype, το συνδεδεμένο CSS και όλα τα βασικά στοιχεία. Έχω προσθέσει τον παρακάτω κώδικα αν θέλετε να ξεκινήσετε το δικό σας έγγραφο με αυτόν τον τρόπο. Σημειώστε ότι δεν θα πρέπει να επηρεάσει τον τρόπο εμφάνισης του ψαρέματος σας, οπότε μπορείτε να χρησιμοποιήσετε το δικό σας πρότυπο σελίδας εάν το επιθυμείτε.
Προεπιλεγμένη σελίδα
Θα χωρίσω τον κώδικα σε δύο διαφορετικά τετράγωνα. Το πρώτο μπλοκ με εικόνες χτίζεται με ελαφρώς διαφορετικό τρόπο, ακολουθούμενο από το μενού μας χωρίς εικόνες. Κάθε σετ έχει δική του ταυτότητα έτσι μπορούμε να εντοπίσουμε το περιεχόμενο πολύ πιο εύκολο. Εάν είστε επίσης οπαδός του jQuery μπορείτε να χρησιμοποιήσετε το #ID επιλογέα για να χειριστείτε όλα τα εσωτερικά στοιχεία DOM.
Πρώτα έχουμε ένα που περιέχει div με την ταυτότητα “ψωμί“. Στο αρχείο επίδειξης χρησιμοποιήσαμε αυτό για να διαχωρίσουμε τον κώδικα μας και να το μετακινήσουμε στη σελίδα με κάποια προστιθέμενα περιθώρια. Θα μπορούσατε να αφαιρέσετε αυτό το εξωτερικό div, αλλά θα πρέπει να επανασχεδιάσετε τα πάντα για να ταιριάζει στο νέο πρότυπο. Δεν πραγματικά βλάπτει να αφήσει ένα δοχείο, δεδομένου ότι θα είστε σε θέση να ελέγξει τη θέση πολύ πιο εύκολη.
Εσωτερικά έχω χτίσει τα ψωμιά χρησιμοποιώντας μια λίστα με μη ταξινομημένα. Υπάρχουν τόσοι πολλοί μοναδικοί τρόποι για να προσαρμόσετε λίστες HTML με στυλ, και οι ψαροκόκκοι είναι μόνο ένα από αυτά. Ίσως παρατηρήσετε ότι έχω δώσει το αρχικό στοιχείο λίστας α τάξη του “πρώτα“. Αυτό είναι απαραίτητο για κάποια πρόσθετη επένδυση για να διατηρείτε τα στοιχεία του μενού in-line. Επιπλέον ένα μικρό span block προστίθεται έτσι ώστε να έχουμε ένα σωστό αριστερό περίγραμμα που δεν επικαλύπτει την εικόνα φόντου.
Επιπλέον, κάθε σύνδεσμος αγκύρωσης φυτεύεται με μειούμενο αριθμό για το z-δείκτης ιδιοκτησία. Χρησιμοποιώντας εικόνες θα πρέπει να έχουμε κάθε μια από τις συνδέσεις μας να επικαλύπτονται για να εμφανίσετε σωστά το βέλος. Ο ευκολότερος τρόπος για να επιτευχθεί αυτό είναι προσαρμόζοντας το z-δείκτη έτσι ώστε κάθε σύνδεσμος να επικαλύπτει την επόμενη. Ξεκίνησα με 9 και εργάστηκε από εκεί, αλλά αν έχετε περισσότερες συνδέσεις στο μενού σας αρχίζετε απλά με έναν υψηλότερο ακέραιο αριθμό.
Μενού χωρίς εικόνες
Προς το χαλάρωσε χαριτωμένα το ψωμί μας χρειαζόμαστε ένα δευτερεύον σύνολο στοιχείων λίστας HTML. Αν προσπαθείτε να αποφύγετε μια ενιαία πλοήγηση, μπορείτε να χρησιμοποιήσετε το jQuery για να ανιχνεύσετε τον πράκτορα του προγράμματος περιήγησης και να εφαρμόσετε αντίστοιχα ένα αναγνωριστικό. Δυστυχώς, αυτό δεν είναι πάντα αξιόπιστο (για ορισμένους χρήστες κινητών, για παράδειγμα). Μια άλλη λύση είναι να συμπεριλάβετε ένα φύλλο στυλ σχετικό με το IE και απόκρυψη ή εμφάνιση του μενού που λειτουργεί καλύτερα - αλλά φυσικά, αυτή η επιλογή είναι μόνο για τον Internet Explorer.
breadcrumb2 το νέο μας αναγνωριστικό χρησιμοποιείται για να στοχεύσει το μενού χωρίς εικόνες. Κρατώντας με αυτό το μοτίβο που έχω χρησιμοποιήσει ψίχουλα2 ως κατηγορία για τον μη ταξινομημένο κατάλογο. Σημειώστε ότι ο λόγος που χρησιμοποιούμε τάξεις είναι για την απλότητα για την αναπαραγωγή αυτών των μενού, έτσι ώστε όταν θέλετε μερικές διαφορετικές breadcrumbs στη σελίδα σας, με αυτές τις τάξεις αυτό δεν θα γίνει ποτέ πρόβλημα.
Έχουμε κρατήσει το .πρώτα αλλά επιπλέον προσαρτημένο .τελευταίοςστην τελική λίστα. Χωρίς εικόνες δεν μπορούμε να αντιγράψουμε τα βέλη για κάθε στοιχείο του μενού πλοήγησης, έτσι έχω χρησιμοποιήσει μερικά στρογγυλεμένες γωνίες για να γευτείτε το δευτερεύον μενού. .πρώτα τάξη και .τελευταίος χειριστείτε την ακτίνα του πλαισίου στις άκρες του μενού μας για να δημιουργήσετε ένα πραγματικά δροσερό στυλ 2.0 που αναζητά το web.
Εικόνες συρόμενου φόντου CSS
Για μερικά από τα απλούστερα αποτελέσματα έχω συστέλλει και τα δύο breadcrumbs μαζί κατά την κατασκευή ακινήτων. Αυτό είναι χρήσιμο, καθώς όχι μόνο εξοικονομεί χώρο, αλλά όταν επιστρέφει στην επεξεργασία στυλ είναι ευκολότερη προσαρμογή το δικό σας βλέμμα.
Και για τους δύο #breadcrumb και # breadcrumb2 Έχω θέσει style-λίστας: κανένας. έτσι ώστε όλα τα εσωτερικά στοιχεία να μην έχουν δείκτες. Θα μπορούσατε να αφήσετε αυτά, αν σας αρέσει το αποτέλεσμα, αλλά βρήκα HTML γίνεται κουραστικό να εργαστεί γύρω και είναι πολύ πιο εύκολο να δημιουργήσετε νέα εικονίδια. Ας αρχίσουμε λοιπόν με το δικό μας .ψίχουλα τάξη.
.ψίχουλα εμφάνιση: μπλοκ? .crumbs li εμφάνιση: εν σειρά; .crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: link, .crumbs li a: επισκέφθηκε χρώμα: # 666; εμφάνιση: μπλοκ? float: αριστερά. μέγεθος γραμματοσειράς: 12px; περιθώριο-αριστερά: -13px; πληκτρολόγηση: 7px 17px 11px 25px; θέση: σχετική. κείμενο-διακόσμηση: κανένα? .crumbs li a background-image: url ('... /img/bg-crumbs.png'); αναπαράσταση φόντου: όχι-επανάληψη φόντο-θέση: 100% 0; θέση: σχετική. .crumbs li a: περάστε χρώμα: # 333; φόντο-θέση: 100% -48px; δρομέας: δείκτης; .crumbs li a: ενεργό χρώμα: # 333; φόντο-θέση: 100% -96px; .crumbs li.first ένα άνοιγμα height: 29px; πλάτος: 3px; αριστερά: 1px στερεά # d9d9d9; θέση: απόλυτη; κορυφή: 0px; αριστερά: 0px; Εμείς ορίσατε τη λίστα μας με μη ταξινομημένο ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ οπότε τίποτα άλλο δεν σέρνει γύρω από την περιοχή. Παρατηρήστε τα στοιχεία της λίστας εμφανίζονται σε σειρά ενώ κάθε άγκυρα σύνδεση δίνεται πολύ περισσότερο χώρο για να απλωθεί. Θέλουμε όλος ο χώρος στο μενού μας να είναι clickable έτσι αυτό απαιτεί χτίζοντας τα άγκυρα ως στοιχεία μπλοκ.
Έχω χρησιμοποιήσει μια εικόνα που ονομάζεται bg-crumbs.png για το φόντο. Αυτό είναι γνωστό ως απλό φύλλο sprite στο CSS, ή εναλλακτικά a συρόμενες πόρτες τεχνική. Αυτό σημαίνει ότι όταν ο χρήστης κινείται ή κάνει κλικ σε ένα σύνδεσμο, μετατοπίζουμε τη θέση του φόντου για να εμφανιστεί το ενημερωμένο στυλ. Αυτή η ενιαία εικόνα περιέχει και τα 3 σχέδια που χρειαζόμαστε για να δημιουργήσουμε τα φόντα του ψωμιού σε διαφορετικές θέσεις, έτσι μπορούμε να χρησιμοποιήσουμε το φόντο-θέση ιδιοκτησίας για τη μετεγκατάσταση βάσει της αλληλεπίδρασης του χρήστη.
Προσαρμοσμένα εφέ με το CSS3
Το αρχικό σχέδιο breadcrumb είναι πολύ πιο εύκολο στη δημιουργία. Αυτό είναι αξιοσημείωτο, καθώς πολλές από τις ιδιότητες του CSS είναι πιο βασικές από αυτές που θα φανταζόσασταν, αλλά τώρα αρχίζουμε να εστιάζουμε στην αναπαραγωγή αυτών των επιδράσεων μόνο με CSS3!
Τα μεμονωμένα στυλ καταλαμβάνουν πολύ χώρο, γι 'αυτό θα τα χωρίσω σε 2 μπλοκ κώδικα.
.ψίχουλα2 εμφάνιση: μπλοκ; περιθώριο-αριστερά: 27px; padding: 0; padding-top: 10px; .crumbs2 li εμφάνιση: εν σειρά; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: επισκέφθηκε χρώμα: # 666; εμφάνιση: μπλοκ? float: αριστερά. μέγεθος γραμματοσειράς: 12px; συμπλήρωση: 7px 16px 7px 19px; θέση: σχετική. κείμενο-διακόσμηση: κανένα? σύνορα: 1px στερεά # d9d9d9; όριο-δεξιά-πλάτος: 0px; .crumbs2 li a background-image: -webkit-gradient (γραμμική, αριστερή κάτω, αριστερή κορυφή, έγχρωμη διακοπή (0.45, rgb (241.241.241)), στάση χρωμάτων (0.73, rgb (245.245.245)). Εικόνα φόντου: -moz-γραμμική κλίση (κεντρικός πυθμένας, rgb (241,241,241) 45%, rgb (245,245,245) 73%). / * Για τον Internet Explorer 5.5 - 7 * / φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Για τον Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li.first ένα border-top-left-radius: 5px; -moz-border-ακτίνα-topleft: 5px; -webkit-περιθώριο-κορυφή-αριστερά-ακτίνα: 5px; .crumbs2 li.last ένα border-right-width: 1px; όριο-κάτω-δεξιά-ακτίνα: 5px; -moz-border-ακτίνα-κάτω: 5px; -webkit-περίγραμμα-κάτω-δεξιά-ακτίνα: 5px;
ο .ψίχουλα2 μενού CSS κλίσεις για την αναπαραγωγή των εφέ φόντου. Εάν δεν είστε εξοικειωμένοι με αυτά, συστήνω ανεπιφύλακτα τον οδηγό CSS Tricks για CSS3 Gradients, ο οποίος θα σας βοηθήσει να χρησιμοποιήσετε αποτελεσματικά τις κλίσεις του CSS3. Έχουν περιλάβει μερικές ακόμα ιδιότητες για προγράμματα περιήγησης Microsoft και Opera, αλλά αυτά δεν υποστηρίζονται πλήρως σε όλες τις περιπτώσεις. Δεν τα έχω συμπεριλάβει στον κώδικα επίδειξης εδώ - αλλά είναι καλό να κατανοήσουμε όλες τις επιλογές.
-webkit-κλίση και -mooz-linear-gradient είναι οι βασικές λύσεις που κάνουν το μεγαλύτερο μέρος της εργασίας. Έχω συμπεριλάβει κώδικα κληρονομιάς για παλαιότερες εκδόσεις του Internet Explorer, αλλά δεν είναι εγγυημένη για να εμφανίζεται σωστά όλη την ώρα (χρησιμοποιούμε ισχυρές τεχνικές rendering εικόνας, μετά από όλα). Παρατηρήστε ότι έχω ρυθμίσει τόσο RGB όσο και hex κωδικούς χρώματος μεταξύ των ιδιοτήτων του φόντου. Θα μπορούσατε να κολλήσετε σε μια μέθοδο ή την άλλη, αν είστε πιο άνετα.
ο ακτίνα ακρόασης ο κώδικας εφαρμόζεται μόνο στη δευτερεύουσα πλοήγηση στον ιστότοπό μας. Αυτό δίνει μια καθαρή επίδραση στην επάνω αριστερή και κάτω δεξιά πλευρά του πλήρους μενού breadcrumb. Η γραμμή φαίνεται σχεδόν να ξεπροβάλει τη σελίδα - πραγματικά μια φανταστική επίδραση στα προγράμματα περιήγησης που υποστηρίζουν τα στυλ, αλλά αυτά καλύπτουν μόνο τις προεπιλεγμένες καταστάσεις για τους συνδέσμους μας. Τώρα, ας δημιουργήσουμε εφέ κίνησης παρόμοιες με τις εικόνες που χρησιμοποιήσαμε παραπάνω.
CSS3 σύνορα και σκιές
Κάθε φορά που ένας χρήστης κινείται πάνω από έναν σύνδεσμο, θέλουμε να ενημερώσουμε μερικά πράγματα. Πρώτα πρέπει να σκουραίνουν τα χρώματα των ορίων στο επάνω και το κάτω μέρος του ενεργού στοιχείου. Αυτό μπορεί να φανεί και στις εικόνες, τόσο για τις κινήσεις όσο και για τις ενεργές καταστάσεις.
.crumbs2 li a: αιώρηση border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; Εικόνα φόντου: -Μετατροπή ιστού (γραμμική, αριστερή, αριστερή, έγχρωμη (0,45, rgb (241,241,241)), έγχρωμη διακοπή (0,73, rgb (248,248,248)). εικόνα φόντου: -moz-γραμμική κλίση (κεντρικός πυθμένας, rgb (241,241,241) 45%, rgb (248,248,248) 73%). / * Για τον Internet Explorer 5.5 - 7 * / φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Για τον Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; χρώμα: # 333; -moz-box-σκιά: 0px 2px 2px # e8e8e8; -webkit-box-σκιά: 0px 2px 2px # e8e8e8; κουτί-σκιά: 0px 2px 2px # e8e8e8; .crumbs2 li a: ενεργό border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; Εικόνα φόντου: -Μετατροπή ιστού (γραμμική, αριστερή κάτω, αριστερή κορυφή, έγχρωμη διακοπή (0,45, rgb (224,224,224)), έγχρωμη διακοπή (0,73, rgb (235,235,235)). εικόνα φόντου: -moz-γραμμική κλίση (κεντρικός πυθμένας, rgb (224,224,224) 45%, rgb (235,235,235) 73%). / * Για τον Internet Explorer 5.5 - 7 * / φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Για τον Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = #ebebeb, endColorstr = # e0e0e0)"; κουτί-σκιά: -1px 1px 1px 0px #dadada ένθετο; -webkit-box-σκιά: -1px 1px 1px 0px #dadada ένθετο; -moz-box-σκιά: -1px 1px 1px 0px #dadada ένθετο; χρώμα: # 333;
Χρησιμοποιώ τον ίδιο ακριβώς κωδικό κλίσης με αυτόν που χρησιμοποιήσαμε παραπάνω, αλλά αυτή τη φορά τα χρώματα είναι πολύ διαφορετικά αν παρατηρήσατε τις τιμές RGB. Κάθε κράτος θα σκουρύνει το χρώμα του κειμένου # 333, άλλοι περιγραφείς έχουν αλλάξει ελαφρά ώστε να αντιστοιχούν στις εντολές των χρηστών.
Με το hover θα δείτε a λαμπερό ανάγλυφο αποτέλεσμα που σε συνδυασμό με σκοτεινά σύνορα δίνει τα στυλ popup σελίδας. Αν πατήσετε και κρατήσετε πατημένο, θα μπείτε στην ενεργή κατάσταση που διαθέτει a σκοτεινή κλίση φόντου. Αυτό το φαινόμενο αναγκάζει τα κουμπιά να φαίνονται στην πραγματικότητα “πατημένο” στη σελίδα.
Εφαρμόζουμε επίσης αίτηση κουτί-σκιά ιδιότητες από τις νέες προδιαγραφές CSS3. -webkit, -moz, και τα προεπιλεγμένα στυλ χρησιμοποιούνται με τις ίδιες ρυθμίσεις. Το δείκτη του ποντικιού εμφανίζει α ελαφριά σκιά που βγαίνει από το κάτω μέρος του επιλεγμένου συνδέσμου. Όταν είναι ενεργοποιημένη, η σκιά θα σχηματιστεί στα πάνω, δεξιά και κάτω σύνορα. Αυτό το εφέ δημιουργείται με το ένθεση λέξη-κλειδί που προστέθηκε στο τέλος κάθε γραμμής ιδιοκτησίας σκιάς. Και πάλι το CSS Tricks είναι ο καλύτερος φίλος σας εδώ με ένα υπέροχο άρθρο σχετικά με το box-shadow, καθώς μιλάει για τη σύνταξη και τη σωστή χρήση του στο CSS3.
Μπόνους: Περισσότερα στυλ
Εκτός από τον κώδικα του tutorial έχω συμπεριλάβει επιπλέον εικόνες φόντου με προσαρμοσμένα σχέδια χρωμάτων. Έχω δειγματοληψία από το αρχικό υπόβαθρο και χρησιμοποίησα το Adobe Photoshop για να δημιουργήσω μερικές παραλλαγές τις οποίες μπορείτε να εφαρμόσετε στον δικό σας ιστότοπο.
Αυτά τα Τα αρχεία μπόνους περιλαμβάνονται στο αρχείο προέλευσης που μπορείτε να μεταφορτώσετε σε μορφή αρχείου .zip στην παρακάτω ενότητα.
Μπορείτε να δείτε την παραπάνω εικόνα για να πάρετε μια ιδέα για αυτό που μιλώ. Εάν χρειάζεστε ένα συγκεκριμένο συνδυασμό χρωμάτων ανοίξτε το pop Photoshop> Εικόνα> Ρυθμίσεις> Απόχρωση / Κορεσμός για να τροποποιήσετε το σχήμα χρωμάτων ώστε να ταιριάζει με το δικό σας πρότυπο, θυμηθείτε να ελέγξτε την επιλογή Colorize στο παράθυρο Απόχρωση / Κορεσμός, εάν το χρώμα δεν έχει αλλάξει καθόλου.
συμπέρασμα
Αυτό το σεμινάριο θα έπρεπε να σας εξοικειώσει με μερικές από τις νεότερες τεχνικές CSS3. Δημιουργήσαμε δύο φανταστικά μενού ψαρέματος στυλ με παρόμοιο τρόπο και το έχτισα με τον τρόπο που μπορεί να υποβαθμιστεί με χαρά σε παλαιότερα προγράμματα περιήγησης. Επιπλέον, έχω προσφέρει τον κωδικό επίδειξης και ορισμένες εικόνες μπόνους για να παίξετε μαζί σας.
Μας αρέσουν ιδιαίτερα τα στυλ που έχουμε κατασκευάσει εδώ; Ή μήπως έχετε ερωτήσεις ή ιδέες για το πώς να βελτιώσετε τον κώδικα του tutorial; Παρακαλώ μοιραστείτε τις σκέψεις σας μαζί μας στην παρακάτω περιοχή συζήτησης και μην ξεχάσετε να κατεβάσετε τα αρχεία προέλευσης ώστε να μπορείτε να παίξετε με το demo!
Περισσότερα CSS3 Tutorials
Η λαχτάρα για περισσότερα CSS3; Ακολουθούν τα άρθρα μας για να κατανοήσετε το CSS3 θεωρητικά και πρακτικά!
- CSS3: Δημιουργήστε ένα λογότυπο RSS Feed
- CSS3: Δημιουργία πεδίου αναζήτησης
- CSS3: Δημιουργήστε μια φόρμα επικοινωνίας AJAX
- CSS3: Δημιουργία ιστοσελίδων HTML5 / CSS3
