Δημιουργία γραμμικών διαβαθμίσεων Cross-Browser με CSS3

01 από 04

Δημιουργία γραμμικών διαβαθμίσεων Cross-Browser με CSS3

Γραμμικές κλίσεις

Ο πιο συνηθισμένος τύπος κλίσης που θα δείτε είναι μια γραμμική κλίση δύο χρωμάτων. Αυτό σημαίνει ότι η κλίση θα κινηθεί σε μια ευθεία γραμμή αλλάζοντας σταδιακά από το πρώτο χρώμα στο δεύτερο κατά μήκος αυτής της γραμμής. Η εικόνα σε αυτήν τη σελίδα εμφανίζει μια απλή κλίση από αριστερά προς τα δεξιά # 999 (σκούρο γκρι) στο #fff (λευκό).

Οι γραμμικές κλίσεις είναι οι πιο εύκολες για τον ορισμό και έχουν την μεγαλύτερη υποστήριξη στα προγράμματα περιήγησης. Γραμμικές κλίσεις CSS3 υποστηρίζονται σε Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ και Safari 4+. Ο Internet Explorer μπορεί να προσθέσει κλίσεις χρησιμοποιώντας το a φίλτρο και τα υποστηρίζει πίσω στο IE 5.5. Αυτό δεν είναι CSS3, αλλά είναι μια επιλογή για συμβατότητα μεταξύ των browsers.

Όταν ορίζετε μια κλίση, πρέπει να ορίσετε πολλά διαφορετικά πράγματα:

Τι είδους κλίση είναι -γραμμικός ή ακτινικός
Όπου πρέπει να αρχίσει η κλίση
Όπου πρέπει να σταματήσει η κλίση
Τι χρώματα βρίσκονται στην κλίση και πού πρέπει να ξεκινήσουν και να σταματήσουν

Για να ορίσετε γραμμικές κλίσεις χρησιμοποιώντας το CSS3, γράφετε:

γραμμική κλίση (γωνία ή πλευρά ή γωνία, διακοπή χρώματος, διακοπή χρώματος)

Αρχικά ορίζετε τον τύπο κλίσης με το όνομα γραμμικός -βαθμίδα.

Στη συνέχεια, ορίζετε τα σημεία έναρξης και τερματισμού της κλίσης με έναν από τους δύο τρόπους: το γωνία της γραμμής σε μοίρες από 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-Ο -moz- επέκταση λειτουργεί όπως η ιδιότητα CSS3, μόνο με το -moz- επέκταση. Για να πάρετε την παραπάνω κλίση για τον Firefox, γράψτε:
-moz-γραμμική κλίση (αριστερά, # 999999 0%, #ffffff 100%).
Επέκταση Opera-Ο -Ο- επέκταση προσθέτει διαβαθμίσεις στην Opera 11.1+. Για να πάρετε την παραπάνω κλίση, γράψτε:
-ο-γραμμική κλίση (αριστερά, # 999999 0%, #ffffff 100%).
Επέκταση Webkit-Ο -webkit- η επέκταση λειτουργεί πολύ όπως η ιδιότητα 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 που σας αρέσει καλύτερα από αυτά, ενημερώστε μας.