Κοιτάξτε την κλίση CSS3 (γραμμικές και ακτινικές κλίσεις). Γραμμική κλίση
ΕΝΑ! Η κλίση είναι ένα εξαιρετικό όργανο για το χρώμα χειρισμού Css3. Αντί να χρησιμοποιήσετε την εικόνα, για να δημιουργήσετε ένα αποτέλεσμα κλίσης σε μια ιστοσελίδα, η οποία θα ωφεληθεί CSS3 κλίση Και έτσι "διευκολύνει" τον ιστότοπο. Δεδομένου ότι ο χρήστης δεν χρειάζεται να περάσει χρόνο και κυκλοφορία στη λήψη της εικόνας φόντου. Υπάρχουν δύο κύριοι τύποι βαθμίδων: ακτινικές και γραμμικές. Η σημερινή ανάρτηση θα είναι γι 'αυτούς.
Γραμμική κλίση
Όπως λένε στην ταξινόμηση, Διαβαθμίσεις στο CSS3 είναι εικόνες. Δεν υπάρχουν ειδικές ιδιότητες γι 'αυτούς. Και για τις διαφημίσεις χρησιμοποιούν την ιδιότητα της εικόνας φόντου.
Στη γενική περίπτωση, η σύνταξη της κλίσης (γραμμική) μοιάζει με αυτό:
1 | div ( |
Έτσι, ας πάμε για τα πάντα.
Πρώτα απ 'όλα, μια γραμμική κλίση δηλώνεται γραμμική-κλίση () λειτουργία. Η λειτουργία έχει τρεις κύριες τιμές. Η πρώτη τιμή καθορίζει την αρχική θέση. Στο παράδειγμα που υποδεικνύεται Top T.E. Θέση προέλευσης από πάνω. Μπορείτε επίσης να χρησιμοποιήσετε το κάτω μέρος, αριστερά και δεξιά.
Εάν η γωνία είναι αρνητική, τότε η θέση αλλάζει από την κάτω αριστερή γωνία στην επάνω αριστερή γωνία.
Η δεύτερη τιμή της λειτουργίας είναι το αρχικό χρώμα και η θέση διακοπής του, η οποία υποδεικνύεται σε ποσοστό. Η ανακοίνωση αυτής της θέσης δεν είναι απαραίτητη, το προεπιλεγμένο πρόγραμμα περιήγησης θα είναι κατάλληλη την πρώτη τιμή χρώματος 0%.
Η τελευταία τιμή είναι το δεύτερο χρώμα και η θέση διακοπής του. Από προεπιλογή απαιτείται τιμή 100%. Αυτές οι ακραίες τιμές και υποδηλώνουν ότι το πρώτο χρώμα αρχίζει αμέσως να μετακινείται στο δεύτερο. Ωστόσο, αν εγκατασταθούμε για το πρώτο χρώμα του 50%, τότε μόνο από τη μέση του προσπελάσιμου ύψους θα αρχίσουν να μετακινούνται στο δεύτερο. Έτσι φαίνεται ο κώδικας:
Παίρνουμε την ίδια λωρίδα στο υψόμετρο. Με ένα σαφές όριο, η μετάβαση χρώματος δεν θα. Για να κατανοήσετε καλύτερα πώς λειτουργεί, πειραματίζεται με τις τιμές.
Η ακτινική κλίση καθώς και η γραμμική δηλούμενη λειτουργία, μόνο ήδη ακτινική κλίση (). Υπάρχουν επίσης κύριες τιμές: αυτή είναι μια μορφή ακτινικής κλίσης (κύκλου - κύκλου ή ελλείψεων), αρχικό και τελικό χρώμα. Η σύνταξη έχει ως εξής:
div ( |
Εάν δεν καθορίσετε τη φόρμα, η έλλειψη θα εγκατασταθεί από προεπιλογή.
Επίσης, η προεπιλογή είναι η κεντρική θέση της κλίσης, μπορεί να αλλάξει. Θέση Μπορείτε να ορίσετε εντολές (πάνω, κάτω, αριστερά, δεξιά και κέντρο), καθώς και τους συνδυασμούς τους, ή να καθορίσετε σε ποσοστό ή εικονοστοιχεία.
Συνδυασμοί ομάδων:
- Κεντραρισμένο στην κορυφή - 50% 0%.
- Στην επάνω αριστερή γωνία - αριστερά κορυφή - 0% 0%.
- Στην επάνω δεξιά γωνία - δεξιά κορυφή - 100% 0%.
- Κέντρο - Κέντρο - 50% 50%.
- Αριστερά στο κέντρο - αριστερό κέντρο - 0% 50%.
- Ακριβώς στο κέντρο - το δεξιό κέντρο - 100% 50%.
- Στο κέντρο κάτω - κάτω - 50% 100%.
- Στην κάτω αριστερή γωνία - αριστερά κάτω - 0% 100%.
- Στην κάτω δεξιά γωνία - δεξιά κάτω - 100% 100%.
Εδώ είναι ένα παράδειγμα με ποσοστά:
div ( |
Την πρώτη τιμή κατά μήκος του άξονα Η. δεύτερος W..
Επίσης, η ακτινική κλίση μπορεί να ρυθμιστεί το μέγεθος. Το μέγεθος υποδεικνύεται μέσω του χάσματος μετά το σχήμα της κλίσης. Προεπιλογή εφαρμοσμένη Μακρύτερη γωνία. (από τη μεγάλη γωνία). Ο υπολογισμός πραγματοποιείται από το κεντρικό σημείο της κλίσης σε:
Να σκεφτείτε καλύτερα να εξετάσετε το παράδειγμα στο παράδειγμα. Ελλειπτική κλίση με λευκό αρχικό και τελικό μπλε:
div ( |
Το μέγεθος υπολογίζεται από την απόσταση από τις πλησιέστερες πλευρές, είναι προφανές ότι η κορυφή πλησιέστερα κατά μήκος του άξονα Y. και αριστερό άξονα Χ..
Και τώρα στις απομακρυσμένες πλευρές:
div ( |
Το αποτέλεσμα, όπως λένε στο πρόσωπο. Το μέγεθος υπολογίζεται από την απόσταση από τις μακρινές πλευρές.
Στην ακτινική όπως σε μια γραμμική κλίση για το χρώμα, μπορεί να εφαρμοστεί θέση στάσης. Θέλω επίσης να παρατηρήσω αν χρειαστεί να επιτύχετε τη διαφάνεια των χρωμάτων, στη συνέχεια να χρησιμοποιήσετε το RGBA.
div ( |
Το κανάλι άλφα, αυτό που είναι το τελευταίο και ίσο με 0,2 υποδεικνύει ότι μόνο το 20% χρησιμοποιείται από το 100%.
Και στους δύο τύπους CSS3 κλίση Μπορείτε να χρησιμοποιήσετε δύο, αλλά πολλά χρώματα.
div ( |
Και για τα δύο είδη, μπορείτε να χρησιμοποιήσετε την επανάληψη των χρωμάτων. Δηλαδή, σχηματίζεται ένας κύκλος από αυτές τις τιμές. Λειτουργίες μιας επαναλαμβανόμενης κλίσης, επαναλαμβανόμενης γραμμικής βαθμίδας () - για γραμμική και επαναλαμβανόμενη ακτινική κλίση () - για ακτινική.
div ( |
0%, # ffae00 100%); / * για τον Firefox * /
Ιστορικό-εικόνα: -ms-γραμμική-κλίση (πάνω, # ff5a00 0%, # ffae00 100%); / * για το IE 10+ * /
Ιστορικό - Εικόνα: -Ο-γραμμική κλίση (πάνω, # ff5a00 0%, # ffae00 100%); / * Για την όπερα * /
Ιστορικό - Εικόνα: γραμμική κλίση (πάνω, # ff5a00 0%, # ffae00 100%); / * Standard Syntax * /
}
div (
Φίλτρο: Progid: dximagetransform.microsoft .gradient (startcolorstr \u003d # 33fff5a00, endcolorstr \u003d # 33ffae00);
}
Όπου 33 αμέσως μετά το πλέγμα, αυτό είναι το ποσοστό του κορεσμού χρωμάτων.
Ελπίζω ότι το άρθρο αποδείχθηκε χρήσιμο για εσάς και το θέμα που θεωρείται πλήρως αποκαλύπτεται.
Να παραμείνετε ενημερωμένοι με τα φρέσκα άρθρα και τα μαθήματα να εγγραφείτε
Τελευταία ενημέρωση: 04/21/2016
Οι κλίσεις αντιπροσωπεύουν μια ομαλή μετάβαση από το ένα χρώμα στο άλλο. Το CSS3 έχει μια σειρά από ενσωματωμένες κλίσεις που μπορούν να χρησιμοποιηθούν για τη δημιουργία ενός στοιχείου.
Οι κλίσεις στο CSS δεν αντιπροσωπεύουν κάποιες ειδικές ιδιότητες. Δημιουργούν μόνο μια τιμή που έχει εκχωρηθεί στην ιδιότητα Ιστορικό.
Μια γραμμική κλίση διαδίδεται σε ευθεία γραμμή από το ένα άκρο του στοιχείου σε ένα άλλο, ασκώντας μια ομαλή μετάβαση από το ένα χρώμα στο άλλο.
Για να δημιουργήσετε μια κλίση, πρέπει να καθορίσετε την αρχή και πολλά χρώματα, για παράδειγμα:
Ιστορικό - Εικόνα: γραμμική κλίση (αριστερά, μαύρη, λευκό)?
Στην περίπτωση αυτή, η αρχή της κλίσης θα είναι η αριστερή άκρη του στοιχείου, η οποία δηλώνεται από την αριστερή αξία. Χρώματα κλίσης: Μαύρο (μαύρο) και λευκό (λευκό). Δηλαδή, ξεκινώντας από την αριστερή άκρη του στοιχείου προς τα δεξιά, θα είναι ομαλά να πάτε από μαύρο σε λευκό.
Στη χρήση βαθμίδων υπάρχει ένα μειονέκτημα - η ποικιλομορφία των προγραμμάτων περιήγησης αναγκάζεται να χρησιμοποιήσει το πρόθεμα προμηθευτή:
Webkit- / * για Google Chrome., Σαφάρι, Microsoft Edge., Opera πάνω από 15 έκδοση * / -moz- / * για το Mozilla Firefox * / -o- / * για την Opera παλαιότερη έκδοση (Opera 12) * /
Έτσι, η πλήρης χρήση της κλίσης θα μοιάζει με αυτό:
Γραμμική ασπρόμαυρη κλίση
Για να εγκαταστήσετε την αρχή της κλίσης, μπορείτε να χρησιμοποιήσετε τις ακόλουθες τιμές: Αριστερή (αριστερά προς τα δεξιά), δεξιά (δεξιά αριστερά), πάνω (πάνω) ή κάτω (κάτω). Για παράδειγμα, μια κατακόρυφη κλίση θα μοιάζει με αυτό:
Ιστορικό - Εικόνα: γραμμική κλίση (κάτω, μαύρο, λευκό)?
Μπορείτε επίσης να καθορίσετε μια διαγώνια κατεύθυνση χρησιμοποιώντας δύο τιμές:
Εικονογράφηση φόντου: γραμμική κλίση (πάνω αριστερά, μαύρο, λευκό)?
Εκτός από τις συγκεκριμένες τιμές του τύπου top ή αριστερά, μπορείτε επίσης να καθορίσετε μια γωνία από 0 έως 360, το οποίο θα καθορίσει την κατεύθυνση της κλίσης:
Ιστορικό - Εικόνα: γραμμική κλίση (30deg, μαύρο, λευκό)?
Μετά τη γωνία, υποδεικνύεται η λέξη DEG.
Για παράδειγμα, το 0deg σημαίνει ότι η κλίση αρχίζει στην αριστερή πλευρά και μετακινείται ΔικαίωμαΚαι όταν καθορίζετε 45deg, αρχίζει στην κάτω αριστερή γωνία και κινείται υπό γωνία 45 ° προς την επάνω δεξιά γωνία.
Μετά τον προσδιορισμό της έναρξης της κλίσης, μπορείτε να καθορίσετε τα εφαρμοζόμενα χρώματα ή τα σημεία Squirt. Τα χρώματα δεν χρειάζεται να είναι δύο, μπορεί να υπάρχουν περισσότερα από αυτά:
Ιστορικό - Εικόνα: γραμμική κλίση (κορυφή, κόκκινο, #ccc, μπλε);
Όλα τα χρώματα που χρησιμοποιούνται κατανέμονται ομοιόμορφα. Ωστόσο, μπορείτε επίσης να καθορίσετε συγκεκριμένους χώρους φόντου για σημεία χρώματος. Για να γίνει αυτό, η δεύτερη τιμή προστίθεται μετά το χρώμα, το οποίο καθορίζει τη θέση του σημείου.
Ιστορικό - Εικόνα: γραμμική κλίση (αριστερά, #CCC, κόκκινο 20%, κόκκινο 80%, #CCC);
Επαναλαμβανόμενη κλίση
Χρησιμοποιώντας επαναλαμβανόμενη γραμμική κλίση, μπορείτε να δημιουργήσετε επαναλαμβανόμενες γραμμικές κλίσεις. Για παράδειγμα:
Ιστορικό - Εικόνα: Επαναλαμβανόμενη γραμμική κλίση (αριστερά, #CCC 20px, Red 30px, RGBA (0, 0, 126, .5) 40px). Εικονογράφηση φόντου: -Moz-Repeating-Linear-κλίση (αριστερά, #CCC 20px, Red 30px, RGBA (0, 0, 126, .5) 40px). Ιστορικό - Εικόνα: -Webkit-Linear-κλίση (αριστερά, #CCC 20px, Red 30px, RGBA (0, 0, 126, .5) 40px).
Σε αυτή την περίπτωση, η κλίση αρχίζει με το αριστερό άκρο του στοιχείου από το πλάτος του γκρι λωρίδας (#CCC) 20 εικονοστοιχείων, στη συνέχεια μέχρι 30 pixels πηγαίνουν στο κόκκινο χρώμα, και στη συνέχεια έως και 40 pixels, η μετάβαση από το γαλάζιο Χρώμα (RGBA (0, 0, 0, 126, .5)). Μετά από αυτό, το πρόγραμμα περιήγησης επαναλαμβάνει την κλίση μέχρι να γεμίσει ολόκληρη την επιφάνεια του στοιχείου.
Η κλίση των χρώματος είναι μια ομαλή μετάβαση από το ένα συγκεκριμένο χρώμα σε ένα άλλο μέσω ενδιάμεσων χρωμάτων. Σε μια γραμμική κλίση, η μετάβαση συμβαίνει σε μια ευθεία γραμμή, από το σημείο ΕΝΑ. Στο σημείο ΣΙ.. Η κλίση μπορεί να έχει περισσότερα από δύο σημεία αναφοράς - τότε η μετάβαση γίνεται από το σημείο ΕΝΑ. Στο σημείο ΣΙ.Στη συνέχεια, από το σημείο ΣΙ. Στο σημείο ΝΤΟ. και τα λοιπά.
Πώς να κάνετε ένα φόντο γραμμική κλίση στο CSS
Στο CSS3 μπορείτε να προσθέσετε ένα υπόβαθρο κλίσης στα στοιχεία μέσω της ήδη γνωστής ιδιοκτησίας εικόνας. Η τιμή της γραμμικής κλίσης () χρησιμοποιείται ως τιμή, όπου σε παρένθεση είναι απαραίτητο να καθορίσετε το σημείο εκκίνησης της κλίσης, το αρχικό χρώμα και το τελικό χρώμα.
Για παράδειγμα, ας κάνουμε μια γραμμική κλίση του φόντου με μια μετάβαση από το βιολετί χρώμα στο κόκκινο. Ταυτόχρονα, θέλουμε το αρχικό σημείο με πορφυρό χρώμα να βρίσκεται στη δεξιά πλευρά και ο φορέας κλίσης στάλθηκε στα αριστερά. Γράφουμε τον κώδικα:
Ιστορικό - Εικόνα: γραμμική κλίση (προς τα αριστερά, ιώδες, κόκκινο). Κλίση φόντου στο μπλοκ
Τα χρώματα των σημείων κλίσης μπορούν να καταγραφούν σε οποιαδήποτε μορφή προσβάσιμη σε CSS, είτε δεκαεξαδικό κώδικα, μορφή RGB ή άλλα. Η κατεύθυνση της κλίσης ρυθμίζεται χρησιμοποιώντας το δάκτυλο και στη συνέχεια Λέξεις-κλειδιά Αριστερά, δεξιά, πάνω και κάτω, τα οποία μπορούν να συνδυαστούν για να αλλάξουν την κλίση. Για παράδειγμα:
Εικονογράφηση φόντου: γραμμική κλίση (προς τα κάτω δεξιά, # ee82ee, # ff0000); 
Επιπλέον, μπορείτε να υποδείξετε απευθείας τη γωνία κλίσης, χρησιμοποιώντας έναν θετικό ή αρνητικό αριθμό με το πρόθεμα DEG (χωρίς χώρο). Για μια δεδομένη γωνία 0º ή 360º, η γραμμή κλίσης θα πάει προς τα πάνω. Με την αυξανόμενη γωνία κλίσης, η κίνηση φορέα εμφανίζεται δεξιόστροφα (όταν χρησιμοποιεί αρνητική τιμή, η κίνηση αλλάζει στο αντίθετο). Παράδειγμα εγγραφής κώδικα:
Ιστορικό - Εικόνα: γραμμική κλίση (-110deg, # ee82ee, # ff0000); 
Πολλαπλά σημεία αναφοράς
Όπως είπαμε, μια κλίση μπορεί να έχει περισσότερα από δύο σημεία αναφοράς. Ταυτόχρονα, το υπόβαθρο θα μετακινηθεί ομαλά από το πρώτο χρώμα στο δεύτερο, από το δεύτερο έως το τρίτο, από το τρίτο έως το τέταρτο και ούτω καθεξής έως ότου φτάσει στο τελικό σημείο αναφοράς. Εάν θέλετε να αυξήσετε τον αριθμό αυτών των σημείων στην κλίση, απλά προσθέστε τα μέσα από το κόμμα. Για παράδειγμα:
Ιστορικό - Εικόνα: γραμμική κλίση (145deg, # ee82ee, slateblue, # ffd86a, μοβ); 
Στο παράδειγμά μας, υποδεικνύονται τέσσερα σημεία χρώματος αναφοράς, αλλά μπορούν να προστεθούν όσο το δυνατόν περισσότερο και σε οποιεσδήποτε κατευθυνόμενες μορφές χρώματος.
Μεταβάσεις μήκους
Από προεπιλογή, το πρόγραμμα περιήγησης θέτει σημεία σε ίσο από απόσταση, επομένως η διαβάθμιση είναι ομοιόμορφη. Αλλά αυτή η απόσταση μπορεί να ελεγχθεί χρησιμοποιώντας μονάδες Μετρήσεις CSS. Ας αναλύσουμε το ακόλουθο παράδειγμα:
Ιστορικό - Εικόνα: γραμμική κλίση (# 92009B 20%, # F5E944 90%, # 00ffa2); 
Στον κώδικα μας μετά το χρώμα # 92009B υποδεικνύεται 20%. Δεδομένου ότι στέκεται κοντά στο πρώτο σημείο αναφοράς, αυτό σημαίνει ότι το 20% του μήκους του στοιχείου θα βαφτεί στο καθορισμένο χρώμα. Μετά από αυτό, η κλίση αρχίζει: Η τιμή του 90% μιλάει το πρόγραμμα περιήγησης, το οποίο είναι απαραίτητο για την επίτευξη του χρώματος # F5E944 έως 90% του μήκους του στοιχείου (ξεκινώντας από το 20%). Μετά από αυτό, ο υπόλοιπος χώρος ξεκινά τη μετάβαση στο τρίτο χρώμα - # 00ffa2.
Αυτό το θέμα απαιτεί επίσης πρακτική. Δοκιμάστε να δημιουργήσετε ένα υπόβαθρο κλίσης με πολλά σημεία υποστήριξης (πάνω από δύο), παίζετε με αποστάσεις και παρακολουθήστε τις αλλαγές κλίσης στο πρόγραμμα περιήγησης.
Προθέματα Vendan
Για να παρέχετε Cross-Browser σε ορισμένες κατοικίες CSS, πρέπει να προσθέσετε προθέματα προμηθευτών - ειδικές κονσόλες που προσθέτουν προγραμματιστές προγραμματιστή:
- -Webkit- - πρόθεμα για Chrome, Safari, Android;
- -moz- - πρόθεμα για τον Firefox;
- -Ο- - πρόθεμα για την όπερα.
Το υπόβαθρο κλίσης απαιτεί επίσης τη χρήση δεδομένων προθέματος, εάν υπάρχει ανάγκη υποστήριξης του μέγιστου αριθμού των προγραμμάτων περιήγησης. Για να το κάνετε αυτό, προσαρμόστε τον κωδικό ως εξής:
Εικονογράφηση φόντου: -Webkit-γραμμική-κλίση (αριστερά, βιολετί, κόκκινο)? Ιστορικό-εικόνα: -moz-γραμμική-κλίση (αριστερά, βιολετί, κόκκινο); Ιστορικό-εικόνα: -Ο-γραμμική κλίση (αριστερά, ιώδες, κόκκινο); Ιστορικό - Εικόνα: γραμμική κλίση (προς τα αριστερά, ιώδες, κόκκινο).
Για να προσθέσετε ένα πρόθεμα που θέλετε να δημιουργήσετε μια ξεχωριστή ανακοίνωση. Επιπλέον, όπως μπορείτε να παρατηρήσετε, ιδιότητες με προθέματα προμηθευτών δεν Απαιτούν τη χρήση του προθέματος που πρόκειται να χρησιμοποιηθεί κατά τον καθορισμό της κατεύθυνσης της κλίσης.
Υποστήριξη του Internet Explorer
Δυστυχώς, το υπόβαθρο κλίσης λειτουργεί μόνο στο IE10 +. ΠΡΟΗΓΟΥΜΕΝΕΣ ΕΚΔΟΣΕΙΣ Μην το καταλάβετε και θα αγνοήσετε. Για να εξασφαλίσετε τουλάχιστον το συνηθισμένο υπόβαθρο σε παλιά προγράμματα περιήγησης, μπορείτε να δημιουργήσετε t. N. "Καπάκι": Επιλέξτε την κατάλληλη σκιά και καταγράψτε την ιδιότητα του χρώματος φόντου. πάνω από Ιδιοκτησία με κλίση. Με αυτόν τον τρόπο, Παλιό πρόγραμμα περιήγησης Εφαρμόστε το χρώμα του φόντου "Backup" και οι άγνωστες ιδιότητες θα το χάσουν, ενώ σε ένα πιο σύγχρονο πρόγραμμα περιήγησης, το υπόβαθρο κλίσης θα πέσει σε ένα συμπαγές υπόβαθρο και θα το εμποδίσει.
Εάν έχετε μια ημιδιαφανή κλίση (για παράδειγμα, χρησιμοποιώντας τη μορφή χρώματος RGBA) και δεν θέλετε να διασκορπίσετε ένα υπόβαθρο αντιγράφων ασφαλείας, ρυθμίστε την κλίση μέσω της συντομευμένης ιδιοκτησίας φόντου αντί της εικόνας φόντου. Στη συνέχεια, η τιμή χρώματος φόντου θα αντικατασταθεί σε διαφανές.
Περαιτέρω στο εγχειρίδιο: Η επαναλαμβανόμενη γραμμική κλίση () είναι μια επαναλαμβανόμενη γραμμική κλίση.
Κλίση - Συμπληρώνοντας την επιλεγμένη περιοχή με μια ακολουθία χρωματικών αποχρώσεων με ομαλές μεταβάσεις μεταξύ τους. Η κλίση χρησιμοποιείται για την εμφάνιση μιας ομαλής μετάβασης μεταξύ δύο ή περισσότερων καθορισμένων χρωμάτων αποχρώσεων. Παράδειγμα κλίσης:
Προηγουμένως, οι εικόνες φόντου χρησιμοποιήθηκαν για τη δημιουργία ενός αποτελέσματος κλίσης. Τώρα μπορείτε να χρησιμοποιήσετε το CSS3 για να δημιουργήσετε ένα υπόβαθρο κλίσης. Στοιχεία με κλίσεις CSS3 είναι καλύτερα να φαίνονται καλύτερα όταν αυξάνονται από τις αναλόγους τους - συνδεδεμένες εικόνες φόντου, καθώς η κλίση δημιουργείται από ένα πρόγραμμα περιήγησης απευθείας κάτω από την καθορισμένη περιοχή.
Παρακαλείστε να σημειώσετε ότι η κλίση CSS είναι μια εικόνα φόντου που δημιουργείται από το πρόγραμμα περιήγησης και όχι ένα χρώμα φόντου, οπότε ορίζεται ως η τιμή της ιδιότητας εικόνας-εικόνας. Αυτό σημαίνει ότι η κλίση μπορεί να προσδιοριστεί όχι μόνο ως η τιμή της ιδιότητας του φόντου-εικόνας, αλλά και όπου κι αν μπορείτε να εισάγετε την εικόνα φόντου, για παράδειγμα, στην εικόνα και το υπόβαθρο της λίστας.
Το CSS3 ορίζει δύο τύπους βαθμίδων:
- Γραμμική κλίση (Γραμμική κλίση.) - Ομαλή μετάβαση από το χρώμα σε χρώμα σε μια ευθεία γραμμή.
- Ακτινική κλίση (Ακτινική κλίση) - μια ομαλή μετάβαση από το χρώμα σε χρώμα από ένα σημείο προς όλες τις κατευθύνσεις.
Γραμμική κλίση
Μια γραμμική κλίση εξαπλώνεται σε μια ευθεία γραμμή, επιδεικνύοντας μια ομαλή μετάβαση από τη μία σκιά του χρώματος στο άλλο. Μια γραμμική κλίση δημιουργείται χρησιμοποιώντας τη λειτουργία γραμμικής κλίσης (). Η λειτουργία δημιουργεί μια εικόνα που είναι μια γραμμική κλίση μεταξύ των καθορισμένων χρωμάτων. Το μέγεθος της κλίσης αντιστοιχεί στο μέγεθος του στοιχείου στο οποίο εφαρμόζεται.
Η λειτουργία γραμμικής κλίσης () λαμβάνει τα ακόλουθα ερωτηματικά, τα επιχειρήματα:
- Ως το πρώτο επιχείρημα, υπάρχει ένας βαθμός γωνίας ή λέξεων-κλειδιών που καθορίζουν την κατεύθυνση της κατεύθυνσης γραμμής κλίσης. Προαιρετικό επιχείρημα.
- Η λίστα επιμερισμένης λίστας που αποτελείται από δύο ή περισσότερα χρώματα, για καθένα από τα οποία μπορεί να ακολουθήσει τη θέση στάσης.
Η απλούστερη γραμμική κλίση απαιτεί μόνο δύο επιχειρήματα που καθορίζουν το αρχικό και το τελικό χρώμα:
Div (μαύρο, λευκό), πλάτος: 200px, Ύψος: 200px;) δοκιμάστε »
Όταν μεταδοθεί η λειτουργία δύο επιχειρήσεων, εγκαθίσταται μια κατακόρυφη κλίση με ένα αρχικό σημείο από πάνω.
Η κατεύθυνση της γραμμής κλίσης μπορεί να καθοριστεί με δύο τρόπους:
Η χρήση βαθμών καθώς το πρώτο όρισμα μπορεί να μεταφερθεί βαθμούς της γραμμής κλίσης, η οποία καθορίζει την κατεύθυνση της κλίσης, για παράδειγμα, η γωνία 0deg (DEG κοπής από το βαθμό βαθμού της Αγγλίας) καθορίζει τη γραμμή κλίσης από το Κάτω από το στοιχείο προς τα πάνω, η γωνία 90deg καθορίζει τη γραμμή κλίσης προς τα αριστερά προς τα δεξιά και κλπ. Με απλά λόγια, οι θετικές γωνίες είναι η περιστροφή δεξιόστροφα, αρνητικά αντίστοιχα έναντι του ρολογιού. Χρησιμοποιώντας λέξεις-κλειδιά, καθώς το πρώτο επιχείρημα μπορεί επίσης να μεταδώσει λέξεις-κλειδιά "στην κορυφή", "προς τα δεξιά", "προς τα κάτω" ή "προς τα αριστερά", είναι οι γωνίες των γραμμών των διαβατηρίων "0deg" "20deg" "270deg" αντίστοιχα.
Μπορείτε επίσης να ορίσετε τη γωνία χρησιμοποιώντας δύο λέξεις-κλειδιά, για παράδειγμα, στην κορυφή δεξιά - η γραμμή κλίσης κατευθύνεται στην επάνω δεξιά γωνία.
Παράδειγμα κλίσης που καθορίζεται σε διαφορετικές κατευθύνσεις:
DIV (περιθώριο: 10px; πλάτος: 200px · Ύψος: 200px · float: αριστερά ·) #one (προς τα αριστερά, μαύρο, κόκκινο);) #two (εικόνα-εικόνα: γραμμική κλίση (προς τα πάνω αριστερά, μαύρο, κόκκινο) ·) #three (εικόνα-εικόνα: γραμμική κλίση (65deg, μαύρο, κίτρινο);) δοκιμάστε "
Όπως ήδη αναφέρθηκε, μια γραμμική κλίση μπορεί να περιλαμβάνει μια λίστα με περισσότερα από δύο χρώματα που διαχωρίζονται από το κόμμα, το πρόγραμμα περιήγησης θα τους διανείμενε ομαλά σε σε ολόκληρη την διαθέσιμη περιοχή:
DIV (περιθώριο: 10px; πλάτος: 200px · Ύψος: 200px · float: αριστερά ·) #one (εικόνα-εικόνα: γραμμική κλίση (δεξιά, κόκκινο, μπλε, κίτρινο).) #Two (εικόνα: γραμμική- Κλίση (στην κορυφή αριστερά, μπλε, λευκό, μπλε);) δοκιμάστε »
Μετά το χρώμα επιτρέπεται να καθορίσει τη θέση διακοπής για αυτό, η οποία καθορίζει τη θέση του χρώματος (όπου ένα χρώμα αρχίζει να κινείται σε ένα άλλο) σε σχέση με το αρχικό και το τελικό σημείο της κλίσης. Η θέση στάσης υποδεικνύεται χρησιμοποιώντας μονάδες μέτρησης που υποστηρίζονται σε CSS ή κατά τοις εκατό. Όταν χρησιμοποιείτε ενδιαφέρον, η θέση της θέσης στάσης υπολογίζεται ανάλογα με το μήκος της γραμμής κλίσης. Η τιμή του 0% είναι το αρχικό σημείο της κλίσης, το 100% - το τελικό.
DIV (περιθώριο: 10px; πλάτος: 200px · Ύψος: 200px · float: αριστερά ·) #one (εικόνα-εικόνα: γραμμική κλίση (στην κορυφή δεξιά, μπλε, λευκό 70%, μπλε);) #two (εικόνα-εικόνα : γραμμική κλίση (δεξιά, κίτρινο 10%, λευκό, κόκκινο, μαύρο 90%);) #three (δεξιά, μαύρο 10%, κίτρινο, μαύρο 90%);) δοκιμάστε "
Μπορεί να καθοριστεί η τιμή χρώματος διαφορετικοί τρόποιΓια παράδειγμα: Καθορίστε το όνομα του χρώματος, χρησιμοποιήστε δεκαεξαδικές τιμές (hex) χρησιμοποιώντας σύνταξη RGB (RGBA) ή HSL (HSLA). Για παράδειγμα, η χρήση μιας κλίσης με διαφάνεια μπορεί να χρησιμοποιηθεί σε συνδυασμό με ένα χρώμα φόντου ή μια εικόνα που βρίσκεται κάτω από μια κλίση για να δημιουργήσει ενδιαφέροντα οπτικά εφέ:
DIV (περιθώριο: 10px, πλάτος: 300px, ύψος: 100px, φόντο-φόντο: πράσινο;) #one (φόντο: γραμμική βαθμίδα (προς τα αριστερά, RGB (255,255,0,0,0), RGBA (255,255,0,0,0) ) ·) #two (φόντο: γραμμική βαθμίδα (RGB (255,255,255), RGBA (255,255,255,0)).
