CSS: Γραμμική κλίση για φόντο. Γραμμική κλίση (): γραμμική κλίση στο παρασκήνιο
Κλίση - Συμπληρώνοντας την επιλεγμένη περιοχή με μια ακολουθία χρωματικών αποχρώσεων με ομαλές μεταβάσεις μεταξύ τους. Η κλίση χρησιμοποιείται για την εμφάνιση μιας ομαλής μετάβασης μεταξύ δύο ή περισσότερων καθορισμένων χρωμάτων αποχρώσεων. Παράδειγμα κλίσης:
Προηγουμένως, οι εικόνες φόντου χρησιμοποιήθηκαν για τη δημιουργία ενός αποτελέσματος κλίσης. Τώρα μπορείτε να χρησιμοποιήσετε το 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)).
Vlad merzehevich
Η κλίση ονομάζεται ομαλή μετάβαση από το ένα χρώμα στο άλλο και μπορεί να υπάρχουν πολλά χρώματα και να μεταβούν οι ίδιοι μεταξύ τους. Με τη βοήθεια βαθμίδων, δημιουργούνται οι πιο παράξενες επιδράσεις του σχεδιασμού ιστοσελίδων, όπως ψευδο-διάσταση, λάμψη, φόντο, κλπ. Επίσης με κλίση, τα στοιχεία φαίνονται πιο όμορφα από το ένα φωτόνιο.
Δεν υπάρχει ξεχωριστή ιδιοκτησία για να προσθέσετε μια κλίση, καθώς θεωρείται εικόνα φόντου, επομένως που προστίθεται μέσω της ιδιότητας εικόνας-εικόνας ή της παγκόσμιας ιδιοκτησίας του φόντου, όπως φαίνεται στο Παράδειγμα 1.
Παράδειγμα 1. Κλίση
Εδώ, το περιβάλλον Idiom αρχίζει παραδοσιακά για μια πεζά εικόνα, αλλά το γλωσσικό παιχνίδι δεν οδηγεί σε μια κατανόηση του ενεργού διαλόγου.
Αποτέλεσμα Αυτό το παράδειγμα που φαίνεται στο ΣΧ. ένας.
Σύκο. 1. Γραμμική κλίση για την παράγραφο
Στην απλούστερη περίπτωση με δύο χρώματα που αποδεικνύονται στο Παράδειγμα 1, η θέση είναι αρχικά γραμμένη από την οποία θα ξεκινήσει η κλίση, τότε το αρχικό και το τελικό χρώμα.
Για να γράψετε τις θέσεις, πρώτα γράφεται και στη συνέχεια προστίθενται λέξεις-κλειδιά πάνω, κάτω και αριστερά, δεξιά, καθώς και οι συνδυασμοί τους. Η σειρά των λέξεων δεν είναι σημαντική, μπορείτε να γράψετε στην αριστερή κορυφή ή στην κορυφή αριστερά. Στην καρτέλα. Το 1 δείχνει διαφορετικές θέσεις και τύπο κλίσης που λαμβάνεται για τα χρώματα # 000 και #fff, διαφορετικά από το μαύρο σε λευκό.
| Θέση | Περιγραφή | Θέα | |
|---|---|---|---|
| στην κορυφή | 0deg | Κάτω. | |
| αριστερά. | 270deg | Από δεξιά προς τα αριστερά. | |
| προς τα κάτω | 180deg | Από πάνω προς τα κάτω. | |
| στα δεξιά | 90deg | Απο αριστερά προς δεξιά. | |
| Στην κορυφή αριστερά. | Από τη δεξιά κάτω γωνία στην αριστερή κορυφή. | ||
| στην κορυφή δεξιά | Από την αριστερή αριστερή γωνία μέχρι τη δεξιά κορυφή. | ||
| Στο κάτω αριστερό μέρος. | Από τη δεξιά άνω γωνία προς τα αριστερά. | ||
| Προς τα κάτω δεξιά | Από την επάνω αριστερή γωνία μέχρι το δεξί κάτω μέρος. |
Αντί μιας λέξης-κλειδιού, αφήνεται να ρυθμίσει τη γωνία κλίσης της γραμμής κλίσης, η οποία δείχνει την κατεύθυνση της κλίσης. Αρχικά, γράφεται μια θετική ή αρνητική γωνιακή τιμή, τότε προστίθεται η DEG.
Μηδενικοί βαθμοί (ή 360º) αντιστοιχούν στην κλίση από κάτω προς τα πάνω, τότε η αντίστροφη μέτρηση πραγματοποιείται δεξιόστροφα. Η αντίστροφη μέτρηση της γωνίας κλίσης της γραμμής κλίσης παρουσιάζεται παρακάτω.
Για την τιμή της άνω αριστεράς και είναι παρόμοια με τη γωνία κλίσης της γραμμής κλίσης, με βάση το μέγεθος του στοιχείου έτσι ώστε να συνδέεται δύο διαγώνια αντίθετες γωνιακές κουκίδες.
Δεν θα αρκεί για να δημιουργηθούν πολύπλοκες κλίσεις δύο χρωμάτων, η σύνταξη σας επιτρέπει να προσθέσετε την απεριόριστη ποσότητα τους, ανυψώνοντας τα χρώματα μέσω του κόμματος. Μπορείτε να χρησιμοποιήσετε ένα διαφανές χρώμα (διαφανές λέξεις-κλειδιά), καθώς και ημιδιαφανές με Μορφή rgbaΌπως φαίνεται στο Παράδειγμα 2.
Παράδειγμα 2. Διαφορετικά χρώματα
HTML5 CSS3 IE 9 IE 10 CR OP SA FX
Το αποτέλεσμα αυτού του παραδείγματος παρουσιάζεται στο ΣΧ. 2.
Σύκο. 2. Κλίση με ημιδιαφανή λουλούδια
Για να τοποθετήσετε με ακρίβεια τα χρώματα της κλίσης, αφού η τιμή χρώματος υποδεικνύει τη θέση του σε ποσοστό, εικονοστοιχεία ή άλλες μονάδες. Για παράδειγμα, γράφοντας Κόκκινο 0%, πορτοκαλί 50%, κίτρινο 100% Αυτό σημαίνει ότι η κλίση αρχίζει με κόκκινο, τότε το 50% πηγαίνει σε πορτοκαλί, και στη συνέχεια στο τέλος σε κίτρινο χρώμα. Για την απλότητα, οι ακραίες μονάδες όπως το 0% και το 100% δεν μπορούν να γραφτούν, εννοούνται από προεπιλογή. Στο Παράδειγμα 3, φαίνεται να δημιουργεί ένα κουμπί κλίσης στο οποίο η θέση του δεύτερου χρώματος από τα τρία ρυθμίζεται ως 36%.
Παράδειγμα 3. Κουμπί κλίσης
HTML5 CSS3 IE 9 IE 10 CR OP SA FX
Το αποτέλεσμα αυτού του παραδείγματος παρουσιάζεται στο ΣΧ. 3.
Σύκο. 3. Κουμπί κλίσης
Λόγω της εργασίας της θέσης χρώματος, μπορείτε να λάβετε αιχμηρές μεταβάσεις μεταξύ χρωμάτων, τα οποία τελικά δίνουν ένα σύνολο μονόχρωμες λωρίδες. Έτσι, για δύο χρώματα είναι απαραίτητο να καθορίσετε τέσσερα χρώματα, τα πρώτα δύο χρώματα είναι τα ίδια και ξεκινούν από 0% έως 50%, τα υπόλοιπα χρώματα είναι επίσης τα ίδια μεταξύ τους και συνεχίζονται από 50% έως 100%. Στο παράδειγμα, προστίθενται 4 λωρίδες ως φόντο ιστοσελίδας. Λόγω του γεγονότος ότι οι ακραίες τιμές υποκαθιστούν αυτόματα, δεν μπορείτε να τα καθορίσετε, οπότε αρκεί να γράψετε μόνο δύο χρώματα.
Παράδειγμα 4. Μονοτονικές λωρίδες
HTML5 CSS3 IE 9 IE 10 CR OP SA FX
Η τυπική ευρωπαϊκή αστική τάση και ακεραιότητα απεικονίζεται κομψά από την επίσημη γλώσσα.
Το αποτέλεσμα αυτού του παραδείγματος παρουσιάζεται στο ΣΧ. 4. Σημειώστε ότι ένα από τα χρώματα της κλίσης έχει καθοριστεί διαφανές, οπότε αλλάζει έμμεσα μέσω του χρώματος της ιστοσελίδας.
Σύκο. 4. Ιστορικό οριζόντιων λωρίδων
Οι κλίσεις είναι αρκετά δημοφιλείς μεταξύ των σχεδιαστών ιστοσελίδων, αλλά η προσθήκη τους περιπλέκεται από διαφορετικές ιδιότητες για κάθε πρόγραμμα περιήγησης και υποδεικνύοντας το σύνολο των χρωμάτων. Για να σας διευκολύνει να δημιουργήσετε κλίσεις και να τα τοποθετήσετε στον κώδικα, συνιστούμε τον ιστότοπο www.colorzilla.com/gradient-dititor με το οποίο είναι εύκολο να ρυθμίσετε τις διαβαθμίσεις και να πάρετε αμέσως τον επιθυμητό κώδικα. Υπάρχουν έτοιμοι πρότυπα (προεπισκόπηση), διαμόρφωση χρώματος (ρυθμίσεις), τελικός κώδικας (CSS) που υποστηρίζει δηλαδή μέσω φίλτρων. Για όσους εργάστηκαν στο Photoshop ή σε έναν άλλο γραφικό συντάκτη, η δημιουργία βαθμίδων θα φαίνεται να είναι ένα πρόσωπο, το υπόλοιπο δεν θα είναι δύσκολο να καταλάβει γρήγορα. Γενικά, με κάθε τρόπο που συνιστώ.
Οι βαθμίδες CSS σας επιτρέπουν να κάνετε ένα φόντο δύο ή περισσοτέρων χρωμάτων, να μετακινούνται ομαλά από το ένα στην άλλη. Έχουν περάσει μαζί μας για μεγάλο χρονικό διάστημα και έχουν αρκετά καλή υποστήριξη στα προγράμματα περιήγησης. Τα περισσότερα μοντέρνα προγράμματα περιήγησης τους καταλαβαίνουν χωρίς προθέματα, για το IE9 και άνω, υπάρχει ένα φίλτρο κλίσης, επίσης για το IE9 μπορείτε να χρησιμοποιήσετε το SVG.
Οι κλίσεις μπορούν να χρησιμοποιηθούν παντού, όπου χρησιμοποιούνται εικόνες: στο παρασκήνιο, ως δελτία λιστών, μπορούν να καθοριστούν στο περιεχόμενο ή την εικόνα των συνόρων.
Γραμμική κλίση.
Οι γραμμικές κλίσεις είναι αρκετά εύκολο στη χρήση. Για τη στοιχειώδη κλίση, αρκεί να ορίσετε τα αρχικά και τα τελικά χρώματα:
Ιστορικό: γραμμική κλίση (πορτοκαλί, χρυσός).
Τα χρώματα μπορεί να είναι οποιαδήποτε ποσότητα περισσότερων από δύο. Μπορείτε επίσης να ελέγξετε την κατεύθυνση της κλίσης και των ορίων (σημεία διακοπής) των χρωμάτων.
Η κατεύθυνση μπορεί να ρυθμιστεί βαθμούς ή λέξεις-κλειδιά.
Λέξεις-κλειδιά: στην κορυφή \u003d 0deg; προς τα δεξιά \u003d 90deg; στο κάτω μέρος \u003d 180deg - η προεπιλεγμένη τιμή. να μείνει \u003d 270deg.
Λέξεις-κλειδιά Μπορεί να συνδυαστεί μεταξύ τους για να ληφθεί μια διαγώνια κλίση, για παράδειγμα στην κορυφή αριστερά.
Παρακάτω μπορεί να θεωρηθεί διαφορετικές κατευθύνσεις στο τέντωμα από το λιλά στο κίτρινο:
Εδώ είναι ο πρώτος τετράγωνος κώδικας, για παράδειγμα:
Κορυφαία αριστερά (φόντο: γραμμική κλίση (στην κορυφή αριστερά, μοβ, πορφυρό, πορτοκαλί, χρυσό);)
Θα πρέπει να θυμόμαστε ότι στην επάνω δεξιά δεν είναι η ίδια με τις 45deg. Τα χρώματα κλίσης είναι κάθετα προς τις γραμμές κατεύθυνσης κλίσης. Πότε στην επάνω δεξιά, η γραμμή προέρχεται από το κάτω αριστερά στην επάνω δεξιά γωνία, στο 45deg - βρίσκεται αυστηρά κάτω από αυτή τη γωνία ανεξάρτητα από το μέγεθος του σχήματος.
Η διαφορά είναι σαφώς ορατή σε ορθογώνια στοιχεία:
Μπορείτε επίσης να ορίσετε τα σημεία διακοπής για τα χρώματα κλίσης, οι τιμές ρυθμίζονται σε μονάδες ή ποσοστό και μπορεί να είναι περισσότερο από 100% και λιγότερο από 0%.
Παραδείγματα τιμών ρύθμισης σε%, σε EM και τιμές που υπερβαίνουν τα όρια του στοιχείου:
Όσο πιο κοντά υπάρχουν σημεία για να σταματήσετε τα γειτονικά χρώματα, το σαφέστερο θα είναι το σύνορο μεταξύ τους. Έτσι, μπορείτε εύκολα να κάνετε ριγέ υπόβαθρα:
Αυτό μπορεί να γίνει, για παράδειγμα, ένα φόντο κάτω από την πλευρική στήλη, τεντωμένη σε όλο το ύψος του γονικού στοιχείου:
Λωρίδες στο φόντο του Sagebar - μια άλλη κλίση που αποτελείται από εναλλαγή πλήρους διαφάνειας και άσπρο χρώμα Με διαφάνεια 30%. Οι κλίσεις με ημιδιαφανή χρώματα είναι βολικά επειδή μπορούν να εφαρμοστούν πάνω από το φόντο οποιουδήποτε χρώματος.
Η κλίση στο παράδειγμα καθορίζεται από έναν πολύπλοκο μακρύ κώδικα, επειδή οι λωρίδες πρέπει να τοποθετούνται μόνο πάνω από το φόντο για το sidber. Εάν δεν προσπαθείτε να κάνετε τα πάντα με φόντο για ένα μπλοκ, θα ήταν δυνατό να λύσετε την εργασία χρησιμοποιώντας ένα ψευδο-στοιχείο.
Ελλείψει περιορισμών, ο κώδικας μπορεί να είναι πολύ μικρότερος:
Φως (Ιστορικό: Γραμμική κλίση Peachpuff (90deg, RGBA (255, 255, 255, 0) 50%, RGBA (255, 255, 255, .4) Κέντρο Κέντρου / 2em;) .dark (Ιστορικό: SteelBlue Γραμμική κλίση (RGBA (0, 0, 0, 0) 50%, RGBA (0, 0, 0, .2) Κέντρο Κέντρου / 100% 1em;)
Στην πρώτη γραμμή, ορίζουμε το χρώμα φόντου του στοιχείου, ο τύπος και η κατεύθυνση (χρώμα και κατεύθυνση μπορεί να παραλειφθεί), στο δεύτερο - προσδιορίστε τα χρώματα της κλίσης και το όριο μεταξύ τους, στο τρίτο - καθορίζουμε τη θέση και το μέγεθος της προκύπτουσας εικόνας. Το πιο σημαντικό μέρος είναι το μέγεθος. Από προεπιλογή, το φόντο επαναλαμβάνεται, οπότε το προκύπτον πρότυπο θα γεμίσει το φόντο του στοιχείου. Πολύ εύκολο και κατανοητό :)
Ολόκληρη η καταχώρηση μπορεί να γίνει σε μια γραμμή, αλλά για την αναγνωσιμότητα είναι πιο βολικό να γράφετε σε αρκετές, ειδικά για πολύπλοκες κλίσεις.
Είναι επίσης σημαντικό να γνωρίζετε ότι η διαφανής λέξη-κλειδί σημαίνει διαφανές μαύρο, και όχι διαφανές λευκό, οπότε όταν το χρησιμοποιείτε στο Firefox, μπορείτε να πάρετε αυτό το είδος προβλήματος:
Για να αποφύγετε αυτό, χρησιμοποιήστε εντελώς διαφανή χρώματα της επιθυμητής σκιάς, για παράδειγμα, λευκό: RGBA (255, 255, 255, 0) ή μαύρο RGBA (0, 0, 0, 0). Υπέρ Διαφορετικές μέθοδοι Τα καθορισμένα χρώματα μπορούν να διαβαστούν.
Για να μάθετε το RGB-Notation ενός συγκεκριμένου χρώματος, μπορείτε να χρησιμοποιήσετε Css.coloratum, εργαλείο από το Lea Verou.
Εκτός από τη συνήθη γραμμική κλίση, μπορείτε να κάνετε μια επαναλαμβανόμενη γραμμική κλίση - μια επαναλαμβανόμενη κλίση
Κωδικός δείγματος:
Ιστορικό: Επαναλαμβανόμενη γραμμική κλίση (πράσινο, πράσινο .5em, διαφανές .5em, διαφανές 1em);
Δυστυχώς, οι επαναλαμβανόμενες κλίσεις συμπεριφέρονται και οι δύο μειώθηκαν και είναι κατάλληλες για σχέδια που δεν είναι σημαντική ακρίβεια. Εάν χρειάζεστε ακρίβεια, χρησιμοποιήστε γραμμική κλίση σε συνδυασμό με μέγεθος φόντου και επανάληψη φόντου.
Οι κλίσεις έχουν τον ίδιο περιορισμό με τη σκιά του κιβωτίου: δεν μπορούν να ρυθμιστούν ξεχωριστά χρώματα ή κατεύθυνση. Αυτό οδηγεί στην επανάληψη του κώδικα και η οξεία ανάγκη να επωφεληθούν από τους προεπεξεργαστές σε περίπτωση δημιουργίας πολύπλοκων βαθμίδων.
Ένας άλλος περιορισμός είναι ότι οι κλίσεις δεν είναι κινούμενες, οι οποίες, ωστόσο, είναι δυνατόν να περάσουν σε κάποιο βαθμό.
Για να δημιουργήσετε γρήγορα διαβαθμίσεις cross-browser, υπάρχει ένα πολύ βολικό εργαλείο: colorzilla.com/gradient-deitor/. Εκτός από τον κώδικα για τα σύγχρονα προγράμματα περιήγησης, θα προσφέρει κωδικό για παλιά IE και SVG για τον 9ο.
Σε συνδυασμό με τις βασικές δυνατότητες της διαχείρισης υποβάθρου, οι κλίσεις δίνουν Σύντομες ευκαιρίες Για να δημιουργήσετε πλήρως υπόβαθρα ποικίλους βαθμούς πολυπλοκότητας χωρίς τη χρήση εικόνων. Οι κλίσεις μπορούν να κάνουν πολύπλοκα και ενδιαφέροντα σχέδια, αλλά αυτό είναι ένα εντελώς διαφορετικό θέμα.
- ΜΕΤΑΦΟΡΑ
Εργασία σχετικά με τη μετάφραση Σχετικά με το έργο Singlediv.com έχει δείξει ότι ορισμένα εργαλεία CSS έχουν ευρύτερη χρήση από ό, τι νομίζαμε. Αλλά για να μπορέσουμε να βρούμε αυτή την αίτηση, είναι απαραίτητο να κατανοήσουμε σαφώς τα χαρακτηριστικά του ακινήτου. Η γραμμική κλίση έγινε ένα λαμπρό παράδειγμα, το οποίο χρησιμοποιεί το Virtuoso Lynn Fisher στο έργο του.
Θέλετε να κάνετε ένα όμορφο φόντο κλίση στον ιστότοπό σας; Εικονογράφηση φόντου: γραμμική κλίση (κόκκινο, μπλε); Ετοιμος! Ναι, είναι λίγο βαρετό. Επομένως, αν θέλετε κάτι περισσότερο, το συνιστώ να σας με τις συμβουλές για το CSS και τη σελίδα MDN. Είσαι εδώ? Τότε ας δούμε μερικές στιγμές, καθώς οι γραμμικές κλίσεις στην πραγματικότητα λειτουργούν. Αρχικά, ας θυμηθούμε τη σύνταξη που μπορεί να χρησιμοποιηθεί στη λειτουργία μιας γραμμικής κλίσης:
Γραμμική κλίση ([από<угла> | πριν<стороны-или-угла>]?,
Η λειτουργία λαμβάνει ένα προαιρετικό πρώτο όρισμα που καθορίζει τη γωνία της κλίσης και η οποία μπορεί να εκφραστεί χρησιμοποιώντας μια μονάδα μέτρησης (βαθμός, ακτίνα, βαθμούς, κύκλο εργασιών) ή ως λέξη κλειδιού (πλευρά ή γωνία.
Μετά από αυτό, η λειτουργία παίρνει μια λίστα χρωμάτων.
Πεδίο κλίσης
Η εικόνα κλίσης δεν έχει μεγέθη, είναι απεριόριστα σε αντίθεση με άλλες εικόνες φόντου. Τα ορατά μεγέθη του δίνουν ένα πεδίο κλίσης, δηλ. Την περιοχή στην οποία εμφανίζεται.Κατά κανόνα, όταν εφαρμόζετε μια εικόνα φόντου με τη μορφή γραμμικής κλίσης στο στοιχείο DOM, αυτή η περιοχή είναι το πλαίσιο των ορίων στοιχείων (η οποία είναι η περιοχή στην οποία εμφανίζεται το χρώμα του φόντου).
Σε αυτή την περίπτωση, εάν χρησιμοποιείτε επίσης το μέγεθος του περιβάλλοντος ιδιοκτησίας CSS (μέγεθος φόντου) και εγκαταστήστε το, πείτε, στο 200px * 200px, τότε το πεδίο κλίσης θα έχει αυτό το μέγεθος και θα είναι, από προεπιλογή, τοποθετείται στην επάνω αριστερή γωνία του στοιχείου DOM, εκτός αν δεν εγκαταστήσετε επίσης τη θέση του φόντου.
Επομένως, η ανάγνωση των ακόλουθων τμημάτων, απλά θυμηθείτε ότι το πεδίο κλίσης δεν βρίσκεται πάντα καθώς και τις ίδιες διαστάσεις με το στοιχείο DOM στο οποίο χρησιμοποιείτε αυτή τη βαθμίδα.
Κλίση γραμμής
Στο πεδίο κλίσης, η γραμμή που περνά μέσα από το κέντρο και κατά μήκος του οποίου διανέμονται τα χρώματα, που ονομάζεται γραμμή κλίσης. Αυτή η γραμμή μπορεί να περιγραφεί ευκολότερη κατά τη διάρκεια της αποσαφήνισης της γωνίας της κλίσης, οπότε αυτό με περισσότερες λεπτομέρειες επόμενο τμήμα.Γωνιακό κλίση
Είναι προφανές ότι η γωνία μιας γραμμικής κλίσης χρησιμοποιείται για τον προσδιορισμό σε ποια κατεύθυνση θα πάει η κλίση. Αλλά ας εξετάσουμε αυτή την πτυχή περισσότερο.Εάν το C είναι ένα κεντρικό σημείο του πεδίου κλίσης, τότε η Α είναι η γωνία μεταξύ της κατακόρυφης γραμμής που διέρχεται από και η γραμμή κλίσης, η οποία επίσης διέρχεται διαμέσου C και κατά μήκος του οποίου κατανέμεται το χρώμα στάσης της κλίσης.
Αυτή η γωνία μπορεί να οριστεί με δύο τρόπους:
Χρησιμοποιώντας μία από τις λέξεις-κλειδιά: στην κορυφή (επάνω), προς τα κάτω, προς τα αριστερά (αριστερά), προς τα δεξιά, στην επάνω δεξιά (δεξιά επάνω), στην κορυφή αριστερά (αριστερά), στο κάτω μέρος (δεξιά), προς τα κάτω Αριστερά (αριστερά κάτω).
Ή προσδιορίζοντας μια γωνία με έναν αριθμό και μονάδα μέτρησης, για παράδειγμα 45deg (45 μοίρες), 1Turn (1 στροφή).
Εάν η γωνία δεν έχει καθοριστεί, τότε, από προεπιλογή, καθοδηγείται (δηλαδή, είναι 180 μοίρες ή 0,5 στροφές):
Σε αυτό και στις παρακάτω εικόνες, το πεδίο κλίσης περιορίζεται από ένα ορθογώνιο, και η γραμμή κλίσης είναι μια γκρίζα γραμμή που περνάει από το κέντρο και κατά μήκος του οποίου εμφανίζονται τα χρώματα.
Στο παραπάνω παράδειγμα, η γωνία δεν καθορίζεται, οπότε η κλίση από το λευκό στο κόκκινο κινείται από πάνω προς τα κάτω, το οποίο αντιστοιχεί στη λέξη-κλειδί προς τα κάτω (προς τα κάτω), όπως φαίνεται παρακάτω:
Και, όπως φαίνεται στις ακόλουθες δύο εικόνες, στην κορυφή (επάνω) αντιστοιχεί στη γωνία σε μηδενικούς βαθμούς:
Αλλο Σημαντική στιγμήΑξίζει να εξεταστεί η χρήση των λέξεων-κλειδιών της γωνίας - που στην επάνω δεξιά (δεξιά επάνω), για παράδειγμα, (ή οποιαδήποτε άλλη γωνία λέξης-κλειδιού) εξαρτάται από το μέγεθος του πεδίου κλίσης.
Η λογική είναι ότι αν θέλατε να κάνετε μια κλίση από κόκκινο σε μπλε προς την κατεύθυνση της άνω δεξιάς γωνίας του στοιχείου, τότε ένα τέτοιο στοιχείο θα πρέπει να είναι μπλε στην επάνω δεξιά γωνία και το μοβ χρώμα στη μέση της κλίσης πρέπει μορφή γύρω από τη γραμμή που περνάει από την κορυφή αριστερά στην κάτω δεξιά γωνία. Έτσι κοιτάζει στην εικόνα:
Επομένως, στην επάνω δεξιά (δεξιά) δεν σημαίνει ότι η γραμμή κλίσης περνά μέσα από τη δεξιά γωνία και δεν σημαίνει καν ότι η γωνία της κλίσης είναι 45 μοίρες!
Ας δούμε πώς μετακινείται η γραμμή κλίσης όταν αλλάξει η γωνία, χρησιμοποιώντας το ακόλουθο κινούμενα σχέδια:
Σε αυτό το κινούμενο σχέδιο, η γωνία κλίνει από 0 έως 360 μοίρες σε αυξήσεις των 10 μοίρες. Το GIF χαμηλής ανάλυσης σας επιτρέπει ακόμη να εξετάσετε καλύτερα πώς τα διαφορετικά χρώματα εμφανίζονται με τη μορφή "γραμμών", οι οποίες είναι πάντα κάθετες στη γραμμή κλίσης.
Ας θυμηθούμε ότι γνωρίζουμε για τις γωνίες της κλίσης:
Η γωνία μετράται μεταξύ της γραμμής κλίσης και της γραμμής, η οποία βγαίνει από το κέντρο του πεδίου κλίσης και κινείται προς τα πάνω.
Επομένως, 0 μοίρες σημαίνει επάνω.
Η τυπική τιμή της γωνίας, αν δεν προσδιοριστεί, είναι προς τα κάτω, που είναι 180 μοίρες.
Οι λέξεις-κλειδιά της γωνίας εξαρτώνται από το μέγεθος του πεδίου κλίσης.
Μήκος της γραμμής κλίσης
Πριν μπορέσουμε να δούμε πώς διανέμονται τα χρώματα κατά μήκος της γραμμής κλίσης, πρέπει να εξηγήσουμε ένα σημείο. Μπορεί να έχετε παρατηρήσει στην προηγούμενη κινούμενη εικόνα ότι τα χρώματα μερικές φορές βρίσκονται έξω από το πεδίο κλίσης, το οποίο μπορεί να φανεί λίγο περίεργο με την πρώτη ματιά, αλλά είναι λογικό αν γνωρίζετε τον λόγο.Κοιτάξτε το παράδειγμα:
Χρειαζόμαστε μια κλίση από κόκκινο σε μπλε με γωνία 45 μοίρες και, ενόψει της αναλογίας διαστάσεων του πεδίου κλίσης, η γραμμή κλίσης δεν μπορεί να περάσει από τη δεξιά άνω γωνία.
Αλλά το πρόγραμμα περιήγησης θέλει (δηλαδή, οι προδιαγραφές δύνανται) να κάνουν τη δεξιά ανώτερη γωνία καθαρά μπλε. Εάν τελειώσαμε έτσι ώστε η γραμμή κλίσης άρχισε και να τελείωσε στις άκρες του πεδίου, τότε το μπλε χρώμα θα πάρει το μεγαλύτερο μέρος του πεδίου και η κλίση δεν θα είχε σπάσει.
Επομένως, για να το κάνετε αυτό, η γραμμή κλίσης μπορεί μερικές φορές να υπερβεί το πεδίο κλίσης. Ταυτόχρονα, είναι πολύ εύκολο να μάθετε πού αρχίζει, και όπου τελειώνει. Απλά τραβήξτε μια γραμμή που περνάει από την πλησιέστερη γωνία και η οποία είναι κάθετη προς τη γραμμή κλίσης. Το σημείο όπου αυτή η γραμμή διασχίζει τη γραμμή κλίσης και είναι η θέση έναρξης / τερματισμού.
Στην πραγματικότητα, εάν καθορίσετε το πλάτος της κλίσης W, το ύψος Η και τη γωνία της κλίσης, τότε το μήκος της γραμμής κλίσης είναι:
ABS (W * SIN (Α)) + ABS (H * COS (A))
Χρωματιστά
Τα χρώματα είναι ένας κατάλογος που διαιρείται με κόμματα, στην οποία κάθε στοιχείο μπορεί να οριστεί ως εξής:<цвет> [<процентное соотношение> | <длина>]?
Επομένως, δεν είναι απαραίτητο να υποδείξετε πού πρέπει να τοποθετηθούν τα χρώματα στη γραμμή κλίσης. Για παράδειγμα:
Κανένα από τα χρώματα δεν έχει τη δική του θέση, οπότε το ίδιο το πρόγραμμα περιήγησης καθόρισε τη θέση τους.
Στο πολύ Απλό παράδειγμα Μόνο με 2 χρώματα, το χρώμα 1 θα τοποθετηθεί κατά 0% (στην αρχή της γραμμής κλίσης) και το χρώμα 2 είναι 100% (στο τέλος της γραμμής κλίσης).
Στη συνέχεια, αν προσθέσετε ένα τρίτο χρώμα, το χρώμα 1 θα παραμείνετε ακόμα 0%, το χρώμα 2 θα είναι 50% και το χρώμα είναι 100% 100% και ούτω καθεξής.
Στο παραπάνω παράδειγμα καθορίστηκαν 5 εκατό χρωμάτων και το πρόγραμμα περιήγησης υπολογίστηκε τη σχετική θέση τους ως 0%, 25%, 50%, 75%, 100%. Ο λόγος για αυτό είναι μια ομοιόμορφη κατανομή κατά μήκος του πεδίου κλίσης.
Η θέση του χρώματος μπορεί να εκφραστεί είτε χρησιμοποιώντας την ποσοστιαία αναλογία (σε σχέση με το μέγεθος της γραμμής κλίσης) είτε με τη μορφή μήκους CSS (όπου οποιαδήποτε μονάδα είναι έγκυρη Μετρήσεις CSS).
Εδώ είναι ένα παράδειγμα:
Όπως βλέπετε, κάθε ένα από τα 5 ακόμα χρώματα έχει τη δική του θέση που καθορίζεται στα εικονοστοιχεία. Οι διατάξεις αυτές υπολογίζονται από την αρχή της γραμμής κλίσης.
Χρησιμοποιώντας τέτοιες θέσεις, μπορείτε να πάρετε κάποια ενδιαφέρουσες επιπτώσεις. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε μια κλίση έτσι ώστε να μην σχεδιάσετε μια κλίση ως τέτοια, αλλά αφήνετε πολλά χρώματα:
Στην εικόνα πάνω από 7 χρώματα και είναι εγκατεστημένα με τέτοιο τρόπο ώστε το επόμενο χρώμα να αρχίζει ακριβώς στην ίδια θέση με την τελευταία, πράγμα που σημαίνει ότι το πρόγραμμα περιήγησης δεν χρειάζεται να γεμίσει το χώρο μεταξύ των δύο βαθμίδων των λουλουδιών διακοπής.
Φυσικά, είναι όλα χαριτωμένα και αστεία, αλλά τι συμβαίνει εάν αναμειγνύετε τα τοποθετημένα χρώματα με μη αναστρέψιμη; Στη συνέχεια, θα αναγκάσετε το πρόγραμμα περιήγησης να λειτουργεί περισσότερο και να το ζητήσετε να διανείμετε αυτόματα τα χρώματα για τα οποία δεν αναφέρατε τη θέση:
Σε αυτό το απλό παράδειγμα, το δεύτερο χρώμα (πορτοκαλί) δεν έχει θέση, οπότε το ίδιο το πρόγραμμα περιήγησης το καθορίζει και βρίσκει μια κατάλληλη θέση μεταξύ του προηγουμένως καθορισμένου και του επόμενου χρώματος. Εδώ είναι πολύ απλό, αφού οι άμεσοι γείτονες του δεύτερου χρώματος έχουν τη θέση τους, αλλά αν υπάρχουν θέσεις μόνο σε κάποια χρώματα ή εάν τα προηγούμενα ή τα ακόλουθα χρώματα δεν έχουν θέση, όλα είναι περίπλοκα.
Ας δούμε μερικά παραδείγματα:
Στο παράδειγμα πάνω από μόνο το τρίτο χρώμα (κίτρινο) τοποθετημένο κατά 30%. Ως εκ τούτου, προκειμένου να διανεμηθούν καλύτερα όλα τα υπόλοιπα, η πρώτη τοποθετείται κατά 0%, το τελευταίο είναι 100% και τα υπόλοιπα χρώματα κατανέμονται στο κενό (έτσι ώστε το πορτοκαλί να τελειώνει άμεσα μεταξύ 0% και 30% και κόκκινο - μεταξύ 30% και 100%).
Αυτό είναι το παράδειγμα πάνω από το πρώτο και το τελευταίο χρώμα που βρίσκεται τοποθετημένο, έτσι ώστε τα υπόλοιπα να διανέμονται ομοιόμορφα μεταξύ αυτών των δύο.
Φυσικά, θα ήταν πολύ εύκολο αν το 0% και το 100% ήταν ένα άκαμπτο πλαίσιο για το οποίο δεν μπορείτε να βγείτε. Όμως, όπως φαίνεται από το προηγούμενο παράδειγμα, το τελευταίο χρώμα βρίσκεται 120% και επομένως όλα τα άλλα χρώματα πρέπει να διανεμηθούν αναλόγως σε σχέση με τη θέση αυτή (το αρχικό σημείο της αθέτησης στην περίπτωση αυτή παραμένει 0%).
Και αν θέλετε να κάνετε το πρόγραμμα περιήγησής σας ακόμα περισσότερο, γιατί να μην καθορίσετε τη σειρά των θέσεων;
Στην πραγματικότητα, το χρώμα πρέπει να έχει παραγγελία, αλλά τίποτα δεν απαγορεύει να μην το κάνετε αυτό, και τίποτα τρομερό δεν θα συμβεί αν δεν το κάνετε. Το πρόγραμμα περιήγησής σας θα το διορθώσει απλά, όπως φαίνεται παρακάτω:
Ας ξεκινήσουμε με το πρώτο χρώμα (κόκκινο), που βρίσκεται 30%. Στη συνέχεια, το δεύτερο χρώμα βρίσκεται 10%, το οποίο είναι ήδη εσφαλμένο, όπως λέγεται παραπάνω, τα χρώματα πρέπει να αναγράφονται ήδη από τη θέση. Επομένως, εδώ το πρόγραμμα περιήγησης διορθώνει τη θέση του δεύτερου χρώματος και το ορίζει στην ίδια θέση με το προηγούμενο χρώμα (30%). Στη συνέχεια έρχεται το τρίτο χρώμα (κίτρινο), που βρίσκεται 60%, το οποίο είναι σωστό, αλλά ακολουθεί το τέταρτο (μπλε) κατά 40%. Και πάλι, η θέση ρυθμίζεται και ρυθμίζεται στην ίδια τιμή με το προηγούμενο έγχρωμο χρώμα.
Τελικά, όπως φαίνεται στο παραπάνω παράδειγμα, το τελευταίο χρώμα (μπλε) είναι τοποθετημένο εσφαλμένα και το πρόγραμμα περιήγησης κάνει τη θέση του ως ίδια με το προηγούμενο χρώμα, το οποίο σε αυτή την περίπτωση δεν είναι ούτε ο άμεσος γείτονας του (κίτρινο), ούτε ένα γείτονο χρώμα, ούτε ένα γειτονικό χρώμα, που είναι μπροστά του (πορτοκαλί), οπότε πρέπει να επιστρέψει στο πρώτο χρώμα (κόκκινο). Έτσι, όλα τα χρώματα μεταξύ κόκκινου και μπλε ορίζονται στο 30% και επομένως αόρατα.
Οργανα
Όλα τα στιγμιότυπα οθόνης σε αυτό το άρθρο λαμβάνονται από το απλό εργαλείο που έκανα στο Codepen, και που σας επιτρέπει να εισάγετε τη λειτουργία μιας γραμμικής κλίσης και να δείτε το πεδίο κλίσης, τη γραμμή κλίσης, μια γωνία, καθώς και πληροφορίες σχετικά με τα χρώματα το στοιχείο.Στο όργανο υπάρχουν όλοι οι τύποι σφαλμάτων και περιορισμοί (δείτε σχόλια σχετικά με το JavaScript), οπότε μην περιμένετε πολλά από αυτό.
Ετικέτες:
- CSS.
- Γραμμική κλίση.
ΕΝΑ! Η κλίση είναι ένα εξαιρετικό όργανο για το χρώμα χειρισμού 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 αμέσως μετά το πλέγμα, αυτό είναι το ποσοστό του κορεσμού χρωμάτων.
Ελπίζω ότι το άρθρο αποδείχθηκε χρήσιμο για εσάς και το θέμα που θεωρείται πλήρως αποκαλύπτεται.
Να παραμείνετε ενημερωμένοι με τα φρέσκα άρθρα και τα μαθήματα να εγγραφείτε
