01 από 04
Δημιουργία γραμμικών διαβαθμίσεων Cross-Browser με CSS3
Γραμμικές κλίσεις
Ο πιο συνηθισμένος τύπος κλίσης που θα δείτε είναι μια γραμμική κλίση δύο χρωμάτων. Αυτό σημαίνει ότι η κλίση θα κινηθεί σε μια ευθεία γραμμή αλλάζοντας σταδιακά από το πρώτο χρώμα στο δεύτερο κατά μήκος αυτής της γραμμής. Η εικόνα σε αυτήν τη σελίδα εμφανίζει μια απλή κλίση από αριστερά προς τα δεξιά # 999 (σκούρο γκρι) στο #fff (λευκό).
Οι γραμμικές κλίσεις είναι οι πιο εύκολες για τον ορισμό και έχουν την μεγαλύτερη υποστήριξη στα προγράμματα περιήγησης. Γραμμικές κλίσεις CSS3 υποστηρίζονται σε Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ και Safari 4+. Ο Internet Explorer μπορεί να προσθέσει κλίσεις χρησιμοποιώντας ένα φίλτρο και να τα υποστηρίξει ξανά στο IE 5.5. Αυτό δεν είναι CSS3, αλλά είναι μια επιλογή για συμβατότητα μεταξύ των browsers.
Όταν ορίζετε μια κλίση, πρέπει να ορίσετε πολλά διαφορετικά πράγματα:
- Τι είδους κλίση είναι γραμμική ή ακτινική
- Όπου πρέπει να αρχίσει η κλίση
- Όπου πρέπει να σταματήσει η κλίση
- Τι χρώματα βρίσκονται στην κλίση και πού πρέπει να ξεκινήσουν και να σταματήσουν
Για να ορίσετε γραμμικές κλίσεις χρησιμοποιώντας το CSS3, γράφετε:
γραμμική κλίση ( γωνία ή πλευρά ή γωνία , διακοπή χρώματος, διακοπή χρώματος )
- Κατ 'αρχάς ορίζετε τον τύπο κλίσης με το όνομα γραμμικό- gradient.
- Στη συνέχεια, ορίζετε τα σημεία έναρξης και τερματισμού της κλίσης με έναν από τους δύο τρόπους: η γωνία της γραμμής σε μοίρες από 0 έως 359, με 0 μοίρες προς τα πάνω. Ή με τη λειτουργία "πλευρά ή γωνία", όπως αριστερά, δεξιά, κάτω και πάνω. Αυτά θα εξηγηθούν λεπτομερέστερα στην επόμενη σελίδα. Αν τα αφήσετε έξω, η κλίση θα ρέει από την κορυφή στο κάτω μέρος του στοιχείου.
- Κατόπιν ορίζετε τις στάσεις χρώματος. Ορίζετε τις στάσεις χρώματος με τον κωδικό χρώματος και ένα προαιρετικό ποσοστό. Το ποσοστό λέει στο πρόγραμμα περιήγησης πού στην γραμμή θα ξεκινήσει ή θα τελειώσει με αυτό το χρώμα. Η προεπιλογή είναι να τοποθετήσετε τα χρώματα ομοιόμορφα κατά μήκος της γραμμής. Θα μάθετε περισσότερα σχετικά με τις στάσεις χρώματος στη σελίδα 3.
Έτσι, για να ορίσετε την παραπάνω κλίση με το CSS3, γράφετε:
γραμμική κλίση (αριστερά, # 999999 0%, #ffffff 100%).
Και για να το ορίσετε ως φόντο ενός DIV γράφετε:
div {
εικόνα φόντου: γραμμική κλίση (αριστερά, # 999999 0%, #ffffff 100%;
}}
Επεκτάσεις προγράμματος περιήγησης για γραμμικές μεταβλητές CSS3
Για να αποκτήσετε την κλίση σας σε cross-browser, πρέπει να χρησιμοποιήσετε τις επεκτάσεις του προγράμματος περιήγησης για τα περισσότερα προγράμματα περιήγησης και ένα φίλτρο για τον Internet Explorer 9 και χαμηλότερα (στην πραγματικότητα 2 φίλτρα). Όλα αυτά παίρνουν τα ίδια στοιχεία για να ορίσετε την κλίση σας (εκτός από το ότι μπορείτε να ορίσετε μόνο βαθμίδες 2 χρωμάτων σε IE).
Τα φίλτρα της Microsoft και η επέκταση - ο Internet Explorer είναι το πιο δύσκολο για υποστήριξη, επειδή χρειάζεστε τρεις διαφορετικές γραμμές για να υποστηρίξετε τις διάφορες εκδόσεις του προγράμματος περιήγησης. Για να πάρετε το παραπάνω γκρι σε λευκό κλίση θα γράψετε:
/ * IE 5.5-7 * /
φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1).
/ * IE 8-9 * /
-ms-φίλτρο: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-γραμμική κλίση (αριστερά, # 999999 0%, #ffffff 100%).
Mozilla Extension -The -moz- επέκταση λειτουργεί σαν την ιδιότητα CSS3, μόνο με την επέκταση -moz-. Για να πάρετε την παραπάνω κλίση για τον Firefox, γράψτε:
-moz-γραμμική κλίση (αριστερά, # 999999 0%, #ffffff 100%).
Επέκταση του Opera - Η επέκταση -οθόνης προσθέτει διαβαθμίσεις στην Opera 11.1+. Για να πάρετε την παραπάνω κλίση, γράψτε:
-ο-γραμμική κλίση (αριστερά, # 999999 0%, #ffffff 100%).
Επέκταση Webkit -Η επέκταση webweb λειτουργεί πολύ σαν την ιδιότητα CSS3. Για να ορίσετε την παραπάνω κλίση για το Safari 5.1+ ή το Chrome 10+ γράφετε:
-webkit-γραμμική κλίση (αριστερά, # 999999 0%, #ffffff 100%).
Υπάρχει επίσης μια παλαιότερη έκδοση της επέκτασης Webkit που λειτουργεί με τα Chrome 2+ και το Safari 4+. Σε αυτό ορίζετε τον τύπο κλίσης ως τιμή, αντί για το όνομα της ιδιότητας. Για να πάρετε τη γκρίζα σε λευκή κλίση με αυτήν την επέκταση, γράψτε:
-βαθμίδα κλίσης (γραμμική, αριστερή κορυφή, δεξιά επάνω, έγχρωμη στάση (0%, # 999999), έγχρωμη διακοπή (100%, # ffffff)).
Πλήρης κώδικας CSS γραμμικής κλίσης CSS3
Για πλήρη υποστήριξη διαδικτυακού προγράμματος περιήγησης για να αποκτήσετε τη γκρίζα σε λευκή κλίση, θα πρέπει πρώτα να συμπεριλάβετε ένα εφεδρικό στερεό χρώμα για προγράμματα περιήγησης που δεν υποστηρίζουν κλίσεις και το τελευταίο στοιχείο θα πρέπει να είναι το στυλ CSS3 για προγράμματα περιήγησης που είναι πλήρως συμβατά. Έτσι, γράφετε:
φόντο: # 999999;
υπόβαθρο: -moz-γραμμική-κλίση (αριστερά, # 999999 0%, #ffffff 100%).
υπόβαθρο: -webkit-κλίση (γραμμική, αριστερή κορυφή, δεξιά επάνω, έγχρωμη στάση (0%, # 999999), έγχρωμη διακοπή (100%, # ffffff)).
υπόβαθρο: -webkit-γραμμική κλίση (αριστερά, # 999999 0%, #ffffff 100%).
υπόβαθρο: -ο-γραμμική-κλίση (αριστερά, # 999999 0%, #ffffff 100%).
υπόβαθρο: -ms-γραμμική κλίση (αριστερά, # 999999 0%, #ffffff 100%).
φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1).
-ms-φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1).
υπόβαθρο: γραμμική κλίση (αριστερά, # 999999 0%, #ffffff 100%).
Οι επόμενες σελίδες σε αυτό το σεμινάριο εξηγούν λεπτομερέστερα τα τμήματα μιας κλίσης και η τελευταία σελίδα σάς δείχνει ένα εργαλείο που είναι ένας εξαιρετικός τρόπος για να δημιουργήσετε αυτόματα κλίσεις CSS3.
Δείτε αυτή τη γραμμική βαθμίδα σε δράση χρησιμοποιώντας μόνο CSS.
02 από 04
Δημιουργώντας διαγώνιες κλίσεις-Η γωνία της κλίσης
Τα σημεία έναρξης και τερματισμού καθορίζουν τη γωνία κλίσης. Οι περισσότερες γραμμικές κλίσεις είναι από πάνω προς τα κάτω ή από αριστερά προς τα δεξιά. Αλλά είναι δυνατό να δημιουργηθεί μια κλίση που κινείται σε μια διαγώνια γραμμή. Η εικόνα σε αυτή τη σελίδα δείχνει μια απλή κλίση που μετακινείται με γωνία 45 μοίρες κατά μήκος της εικόνας από δεξιά προς τα αριστερά.
Γωνίες για τον ορισμό της γραμμής κλίσεων
Η γωνία είναι μια γραμμή σε έναν φανταστικό κύκλο στο κέντρο του στοιχείου. Το σημείο 0deg προς τα πάνω, 90deg σημεία προς τα δεξιά, 180deg σημεία προς τα κάτω, και 270deg σημεία προς τα αριστερά. Μπορείτε να ορίσετε οποιαδήποτε γωνία από 0 έως 359 μοίρες.
Θα πρέπει να σημειώσετε ότι σε ένα τετράγωνο, μια γωνία 45 μοιρών μετακινείται από την πάνω αριστερή γωνία προς τα κάτω δεξιά, αλλά σε ένα ορθογώνιο τα σημεία έναρξης και τέλους είναι ελαφρώς έξω από το σχήμα, όπως μπορείτε να δείτε στην εικόνα.
Ο πιο συνηθισμένος τρόπος για να ορίσετε μια διαγώνια διαβάθμιση είναι να ορίσετε μια γωνία, όπως στην κορυφή δεξιά και η κλίση θα μετακινηθεί από αυτή τη γωνία στην αντίθετη γωνία. Μπορείτε να ορίσετε την αρχική θέση με τις ακόλουθες λέξεις-κλειδιά:
- μπλουζα
- σωστά
- κάτω μέρος
- αριστερά
- κέντρο
Και μπορούν να συνδυαστούν για να είναι πιο συγκεκριμένα, όπως:
- επάνω δεξιά
- πάνω αριστερά
- κορυφή κέντρο
- κάτω δεξιά
- κάτω αριστερά
- κάτω κέντρο
- δεξιά κέντρο
- αριστερό κέντρο
Εδώ είναι το CSS για μια κλίση παρόμοια με αυτήν που απεικονίζεται, από κόκκινο σε άσπρο κινούμενο από την πάνω δεξιά γωνία προς την κάτω αριστερή γωνία:
background: ## 901A1C;
εικόνα φόντου: -moz-γραμμική κλίση (δεξιά κορυφή, # 901A1C 0%, # FFFFFF 100%).
Εικόνα φόντου: -Βαθμονόμηση ιστού (γραμμική, δεξιά επάνω, αριστερή κάτω, έγχρωμη διακοπή (0, # 901A1C), έγχρωμη διακοπή (1, #FFFFFF)).
υπόβαθρο: -webkit-γραμμική κλίση (δεξιά κορυφή, # 901A1C 0%, #ffffff 100%).
υπόβαθρο: -ο-γραμμική κλίση (δεξιά κορυφή, # 901A1C 0%, #ffffff 100%).
υπόβαθρο: -ms-γραμμική κλίση (δεξιά κορυφή, # 901A1C 0%, #ffffff 100%).
υπόβαθρο: γραμμική κλίση (δεξιά κορυφή, # 901A1C 0%, #ffffff 100%).
Μπορεί να έχετε παρατηρήσει ότι δεν υπάρχουν φίλτρα IE σε αυτό το παράδειγμα. Αυτό συμβαίνει επειδή ο IE επιτρέπει μόνο δύο τύπους φίλτρων: από πάνω προς τα κάτω (προεπιλογή) και από αριστερά προς τα δεξιά (με το διακόπτη GradientType = 1).
Δείτε αυτή τη διαγώνια γραμμική κλίση σε δράση χρησιμοποιώντας μόνο το CSS.
03 του 04
Το χρώμα σταματά
Με γραμμικές κλίσεις CSS3, μπορείτε να προσθέσετε πολλαπλά χρώματα στην κλίση σας για να δημιουργήσετε ακόμη και πιο φτηνά εφέ. Για να προσθέσετε αυτά τα χρώματα, προσθέτετε επιπλέον χρώματα στο τέλος της ιδιότητάς σας, χωρισμένα με κόμματα. Θα πρέπει να συμπεριλάβετε και πού στη γραμμή θα πρέπει να ξεκινούν ή να τελειώνουν και τα χρώματα.
Τα φίλτρα του Internet Explorer υποστηρίζουν μόνο δύο στάδια χρώματος, οπότε όταν δημιουργείτε αυτή τη διαβάθμιση, πρέπει να συμπεριλάβετε μόνο το πρώτο και το δεύτερο χρώμα που θέλετε να εμφανίζονται.
Εδώ είναι το CSS για την παραπάνω βαθμίδα 3 χρωμάτων:
background: #ffffff;
υπόβαθρο: -moz-γραμμική κλίση (αριστερά, #ffffff 0%, # 901A1C 51%, #ffffff 100%).
υπόβαθρο: -webkit-κλίση (γραμμική, αριστερή κορυφή, δεξιά επάνω, έγχρωμη διακοπή (0%, # ffffff), έγχρωμη διακοπή (51%, # 901A1C), έγχρωμη διακοπή (100%, # ffffff)).
υπόβαθρο: -webkit-γραμμική κλίση (αριστερά, #ffffff 0%, # 901A1C 51%, # ffffff 100%).
υπόβαθρο: -ο-γραμμική-κλίση (αριστερά, #ffffff 0%, # 901A1C 51%, # ffffff 100%).
υπόβαθρο: -ms-γραμμική κλίση (αριστερά, #ffffff 0%, # 901A1C 51%, # ffffff 100%).
φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1).
υπόβαθρο: γραμμική κλίση (αριστερά, #ffffff 0%, # 901A1C 51%, # ffffff 100%).
Δείτε αυτήν την γραμμική κλίση με τρεις στάσεις χρώματος σε δράση χρησιμοποιώντας μόνο CSS.
04 του 04
Κάντε Κλίσεις Κτίριο Ευκολότερη
Υπάρχουν δύο περιοχές που σας προτείνω για να σας βοηθήσουν να χτίσετε κλίσεις, ο καθένας έχει οφέλη και μειονεκτήματα σε αυτά, δεν έχω βρει έναν κατασκευαστή κλίσης που κάνει τα πάντα ακόμα.
Τελευταία γεννήτρια κλίσεων CSS
Αυτή η γεννήτρια βαθμίδων είναι πολύ δημοφιλής επειδή εκτελεί με παρόμοιο τρόπο με τους κατασκευαστές κλίσης σε προγράμματα όπως το Photoshop. Μου αρέσει επίσης, επειδή σας δίνει όλες τις επεκτάσεις CSS, όχι μόνο το Webkit και το Mozilla. Το πρόβλημα με αυτή τη γεννήτρια είναι ότι υποστηρίζει μόνο οριζόντιες και κάθετες κλίσεις. Εάν θέλετε να κάνετε διαγώνιες κλίσεις, πρέπει να πάτε στη δεύτερη γεννήτρια που σας προτείνω.
Γεννήτρια κλίσης CSS3
Αυτή η γεννήτρια με πήρε λίγο περισσότερο χρόνο για να καταλάβω από την πρώτη, αλλά υποστηρίζει την αλλαγή της κατεύθυνσης σε μια διαγώνιο.
Εάν γνωρίζετε κάποια άλλη γεννήτρια κλίσης CSS που σας αρέσει καλύτερα από αυτά, ενημερώστε μας .