Πώς να δημιουργήσετε Γραμμικές Διαβαθμίσεις στο CSS3

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

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

Οι γραμμικές ντεγκραντέ είναι οι ευκολότερες στον ορισμό και έχουν τη μεγαλύτερη υποστήριξη στα προγράμματα περιήγησης. Οι γραμμικές διαβαθμίσεις CSS3 υποστηρίζονται σε Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ και Safari 4+.

Όταν ορίζετε μια κλίση, προσδιορίστε τον τύπο της—γραμμικός ή ακτινικός—Και πού πρέπει να σταματήσει και να ξεκινήσει η κλίση. Προσθέστε, επίσης, τα χρώματα της κλίσης και από πού ξεκινούν και τελειώνουν αυτά τα χρώματα.

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

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

Πρώτα ορίζετε τον τύπο της κλίσης με το όνομα.

Στη συνέχεια, ορίζετε τα σημεία έναρξης και διακοπής της κλίσης με έναν από τους δύο τρόπους: τη γωνία της γραμμής σε μοίρες από 0 έως 359, με 0 μοίρες να δείχνουν ευθεία προς τα πάνω. Ή με τις λειτουργίες «πλαϊνή ή γωνιά». Εάν τα αφήσετε έξω, η κλίση θα ρέει από την κορυφή προς το κάτω μέρος του στοιχείου.

Στη συνέχεια, ορίζετε το χρώμα σταματά. Μπορείτε να ορίσετε τις στάσεις χρώματος με τον κωδικό χρώματος και ένα προαιρετικό ποσοστό. Το ποσοστό λέει στο πρόγραμμα περιήγησης πού να ξεκινήσει ή να τελειώσει με αυτό το χρώμα. Η προεπιλογή είναι να τοποθετήσετε τα χρώματα ομοιόμορφα κατά μήκος της γραμμής. Θα μάθετε περισσότερα σχετικά με τις στάσεις χρώματος στη σελίδα 3.

Έτσι, για να ορίσετε την παραπάνω κλίση με CSS3, γράφετε:

γραμμική κλίση (αριστερά, # 999999 0%, #ffffff 100%); 

Και για να το ορίσετε ως φόντο μιας εγγραφής DIV:

div {
εικόνα φόντου: γραμμική κλίση (αριστερά, # 999999 0%, #ffffff 100%;
} 

Επεκτάσεις προγράμματος περιήγησης για CSS3 Linear Gradients

Για να κάνετε τη διαβάθμισή σας να λειτουργεί μεταξύ των προγραμμάτων περιήγησης, πρέπει να χρησιμοποιήσετε επεκτάσεις προγράμματος περιήγησης για τα περισσότερα προγράμματα περιήγησης και a φίλτρο για τον 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-filter: "progid: DXImageTransform. Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1) ";
/ * IE 10 * /
-ms-linear-gradient (αριστερά, # 999999 0%, #ffffff 100%); 

Επέκταση Mozilla-Ο -μοζ Η επέκταση λειτουργεί όπως η ιδιότητα CSS3, ακριβώς με την επέκταση. Για να λάβετε την παραπάνω κλίση για τον Firefox, γράψτε:

-moz-linear-κλίση (αριστερά, # 999999 0%, #ffffff 100%); 

Επέκταση Opera-Ο -ο- Η επέκταση προσθέτει κλίσεις στο Opera 11.1+. Για να λάβετε την παραπάνω κλίση, γράψτε:

-o-γραμμική-κλίση (αριστερά, # 999999 0%, #ffffff 100%); 

Επέκταση Webkit-Ο -webkit- Η επέκταση λειτουργεί πολύ σαν την ιδιότητα CSS3. Για να ορίσετε την παραπάνω κλίση για το Safari 5.1+ ή το Chrome 10+ γράψτε:

-webkit-linear-gradient (αριστερά, # 999999 0%, #ffffff 100%); 

Υπάρχει επίσης μια παλαιότερη έκδοση της επέκτασης Webkit που λειτουργεί με τα Chrome 2+ και Safari 4+. Σε αυτό ορίζετε τον τύπο διαβάθμισης ως τιμή και όχι στο όνομα της ιδιότητας. Για να αποκτήσετε γκρι προς λευκή κλίση με αυτήν την επέκταση, γράψτε:

-webkit-gradient (γραμμική, αριστερή κορυφή, δεξιά πάνω, χρωματική διακοπή (0%, # 999999), χρωματική διακοπή (100%, # ffffff)); 

Πλήρης κωδικός CSS3 Linear Gradient CSS

Για πλήρη υποστήριξη μεταξύ προγραμμάτων περιήγησης για να έχετε την γκρίζα προς λευκή κλίση πάνω, θα πρέπει πρώτα να συμπεριλάβετε ένα συμπαγές χρώμα για προγράμματα περιήγησης που δεν υποστηρίζουν ντεγκραντέ και το τελευταίο στοιχείο πρέπει να είναι το στυλ CSS3 για προγράμματα περιήγησης που είναι πλήρως υποχωρητικός. Έτσι, γράφετε:

φόντο: # 999999;
φόντο: -moz-linear-gradient (αριστερά, # 999999 0%, #ffffff 100%);
φόντο: -webkit-ντεγκραντέ (γραμμική, αριστερή κορυφή, δεξιά πάνω, χρωματική διακοπή (0%, # 999999), χρωματική διακοπή (100%, # ffffff));
φόντο: -webkit-linear-gradient (αριστερά, # 999999 0%, #ffffff 100%);
φόντο: -o-γραμμική-κλίση (αριστερά, # 999999 0%, #ffffff 100%);
φόντο: -ms-linear-gradient (αριστερά, # 999999 0%, #ffffff 100%);
φίλτρο: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
φόντο: γραμμική κλίση (αριστερά, # 999999 0%, #ffffff 100%); 

Δημιουργία διαγώνιων ντεγκραντέ - η γωνία της κλίσης

Τα σημεία έναρξης και διακοπής καθορίζουν τη γωνία της κλίσης. Οι περισσότερες γραμμικές κλίσεις είναι από πάνω προς τα κάτω ή από αριστερά προς τα δεξιά. Αλλά είναι δυνατόν να χτίσουμε μια κλίση που κινείται σε μια διαγώνια γραμμή. Η εικόνα σε αυτήν τη σελίδα δείχνει μια απλή κλίση που κινείται σε γωνία 45 μοιρών κατά μήκος της εικόνας από δεξιά προς αριστερά.

Γωνίες για τον καθορισμό της γραμμής κλίσης

Η γωνία είναι μια γραμμή σε έναν φανταστικό κύκλο στο κέντρο του στοιχείου. Ένα μέτρο του 0 βαθ δείχνει προς τα πάνω, 90 μοίρες δείχνει σωστά, 180deg δείχνει προς τα κάτω, και 270 βαθ πόντους αριστερά. Χρησιμοποιήστε οποιοδήποτε μέτρο γωνίας.

Σε ένα τετράγωνο, μια γωνία 45 μοιρών μετακινείται από την επάνω αριστερή γωνία προς τα κάτω δεξιά, αλλά σε ένα ορθογώνιο τα σημεία έναρξης και τέλους είναι ελαφρώς έξω από το σχήμα.

Ο πιο συνηθισμένος τρόπος για να ορίσετε μια διαγώνια κλίση είναι να ορίσετε μια γωνία, όπως επάνω δεξιά και η κλίση κινείται από τη γωνία στην αντίθετη γωνία. Ορίστε την αρχική θέση με τις ακόλουθες λέξεις-κλειδιά:

• μπλουζα
• σωστά
• κάτω μέρος
• αριστερά
• κέντρο

Και μπορούν να συνδυαστούν για να είναι πιο συγκεκριμένα, όπως:

• επάνω δεξιά
• πάνω αριστερά
• κορυφαίο κέντρο
• κάτω δεξιά
• κάτω αριστερά
• κάτω κέντρο
• σωστό κέντρο
• αριστερό κέντρο

Εδώ είναι το CSS για μια κλίση παρόμοια με αυτήν που απεικονίζεται, από κόκκινο σε λευκό που κινείται από την επάνω δεξιά γωνία προς τα κάτω αριστερά:

φόντο: ## 901A1C;
εικόνα φόντου: -moz-linear-gradient (δεξιά πάνω, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (γραμμική, δεξιά πάνω, αριστερά κάτω, χρωματική διακοπή (0, # 901A1C), χρωματική διακοπή (1, #FFFFFF));
φόντο: -webkit-linear-gradient (δεξιά πάνω, # 901A1C 0%, #ffffff 100%);
φόντο: -o-γραμμική-κλίση (δεξιά πάνω, # 901A1C 0%, #ffffff 100%);
φόντο: -ms-linear-gradient (δεξιά πάνω, # 901A1C 0%, #ffffff 100%);
φόντο: γραμμική κλίση (δεξιά πάνω, # 901A1C 0%, #ffffff 100%); 

Ίσως έχετε παρατηρήσει ότι δεν υπάρχουν φίλτρα IE σε αυτό το παράδειγμα. Αυτό συμβαίνει επειδή το IE επιτρέπει μόνο δύο τύπους φίλτρων: από πάνω προς τα κάτω (η προεπιλογή) και από αριστερά προς τα δεξιά (με το Τύπος κλίσης = 1 διακόπτης).

Το χρώμα σταματά

Με τις γραμμικές διαβαθμίσεις CSS3, προσθέστε πολλά χρώματα στην κλίση σας για να δημιουργήσετε ομοιόμορφα εφέ. Για να προσθέσετε αυτά τα χρώματα, εισαγάγετε επιπλέον χρώματα στο τέλος της ιδιότητάς σας, διαχωρισμένα με κόμματα. Θα πρέπει να συμπεριλάβετε πού στη γραμμή πρέπει να ξεκινούν ή να τελειώνουν τα χρώματα.

Τα φίλτρα του Internet Explorer υποστηρίζουν μόνο δύο στάσεις χρώματος, επομένως όταν δημιουργείτε αυτήν την κλίση, θα πρέπει να συμπεριλάβετε μόνο το πρώτο και το δεύτερο χρώμα που θέλετε να εμφανίσετε.

Εδώ είναι το CSS για την παραπάνω κλίση τριών χρωμάτων:

φόντο: #ffffff;
φόντο: -moz-linear-gradient (αριστερά, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
φόντο: -webkit-ντεγκραντέ (γραμμική, αριστερή κορυφή, δεξιά πάνω, χρωματική διακοπή (0%, # ffffff), χρωματική διακοπή (51%, # 901A1C), χρωματική διακοπή (100%, # ffffff));
φόντο: -webkit-linear-gradient (αριστερά, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
φόντο: -o-γραμμική-κλίση (αριστερά, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
φόντο: -ms-linear-gradient (αριστερά, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
φίλτρο: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
φόντο: γραμμική κλίση (αριστερά, #ffffff 0%, # 901A1C 51%, # ffffff 100%); 

Δείτε αυτήν τη γραμμική κλίση με τρεις στάσεις χρώματος σε δράση χρησιμοποιώντας μόνο CSS