Όμορφο φόντο κλίσης. CSS: Γραμμική κλίση για φόντο
ένα! Το ντεγκραντέ είναι ένα εξαιρετικό εργαλείο για τον χειρισμό του χρώματος CSS3. Αντί να χρησιμοποιείτε μια εικόνα για να δημιουργήσετε ένα εφέ διαβάθμισης σε μια ιστοσελίδα, θα ήταν πιο ωφέλιμο να χρησιμοποιήσετε CSS3 ντεγκραντέκαι έτσι «ελαφρύνει» τον ιστότοπο. Δεδομένου ότι ο χρήστης δεν θα χρειαστεί να χάσει χρόνο και κίνηση φορτώνοντας την εικόνα φόντου. Υπάρχουν δύο κύριοι τύποι κλίσης: η ακτινική και η γραμμική. Η σημερινή ανάρτηση θα αφορά αυτούς.
Γραμμική κλίση
Όπως λέει η ταξινόμηση, διαβαθμίσεις στο CSS3είναι εικόνες. Όχι για αυτούς ειδικές ιδιότητες. Και η διαφήμιση χρησιμοποιεί την ιδιότητα εικόνας φόντου.
Σε γενικές γραμμές, η σύνταξη της κλίσης (γραμμική) μοιάζει με αυτό:
1 | div( |
Λοιπόν, ας μιλήσουμε για όλα με τη σειρά.
Πρώτα απ 'όλα, μια γραμμική κλίση δηλώνεται από τη συνάρτηση linear-gradient(). Η συνάρτηση έχει τρεις κύριες έννοιες. Η πρώτη τιμή ορίζει Αρχική θέση. Το παράδειγμα υποδεικνύει κορυφή δηλ. θέση εκκίνησης από πάνω. Μπορείτε επίσης να χρησιμοποιήσετε κάτω, αριστερά και δεξιά.
Εάν η γωνία είναι αρνητική, η θέση θα αλλάξει από την κάτω αριστερή γωνία στην επάνω αριστερή γωνία.
Η δεύτερη τιμή της συνάρτησης είναι το αρχικό χρώμα και η θέση διακοπής της, η οποία υποδεικνύεται ως ποσοστό. Η δήλωση αυτής της θέσης δεν είναι απαραίτητη.
Η τελευταία τιμή είναι το δεύτερο χρώμα και η θέση διακοπής του. Προεπιλογές στο 100%. Αυτές οι ακραίες τιμές σημαίνουν ότι το πρώτο χρώμα αρχίζει αμέσως να μεταβαίνει στο δεύτερο. Ωστόσο, εάν ορίσουμε το πρώτο χρώμα στο 50%, τότε θα αρχίσει να μεταβαίνει στο δεύτερο μόνο από τη μέση του διαθέσιμου ύψους. Έτσι φαίνεται ο κώδικας:
Παίρνουμε λωρίδες ίσου ύψους. Με ένα καθαρό περίγραμμα, δεν θα υπάρχει μετάβαση χρώματος. Για να κατανοήσετε καλύτερα πώς λειτουργεί αυτό, πειραματιστείτε με τις τιμές.
Μια ακτινική κλίση, ακριβώς όπως μια γραμμική, δηλώνεται ως συνάρτηση, μόνο radial-gradient() . Υπάρχουν επίσης βασικές τιμές: αυτό είναι το σχήμα της ακτινικής κλίσης (κύκλος - κύκλος ή έλλειψη - έλλειψη), το αρχικό και το τελικό χρώμα. Η σύνταξη έχει ως εξής:
div( |
Εάν δεν καθορίσετε ένα σχήμα, τότε η προεπιλογή θα είναι έλλειψη.
Επίσης, η κεντρική θέση του ντεγκραντέ έχει οριστεί από προεπιλογή και μπορεί να αλλάξει. Η θέση μπορεί να καθοριστεί χρησιμοποιώντας εντολές (πάνω, κάτω, αριστερά, δεξιά και κέντρο), καθώς και με τους συνδυασμούς τους ή να καθοριστεί σε ποσοστά ή pixel.
Συνδυασμοί εντολών:
- Κέντρο στην κορυφή - κορυφή - 50% 0%;
- Στην επάνω αριστερή γωνία - αριστερά επάνω - 0% 0%;
- Στην επάνω δεξιά γωνία - πάνω δεξιά - 100% 0%.
- Στο κέντρο - κέντρο - 50% 50%;
- Αριστερό κέντρο - αριστερό κέντρο - 0% 50%;
- Δεξί κέντρο - δεξιό κέντρο - 100% 50%;
- Κάτω κέντρο - κάτω - 50% 100%;
- Στην κάτω αριστερή γωνία - αριστερό κάτω - 0% 100%.
- Στην κάτω δεξιά γωνία - κάτω δεξιά - 100% 100%.
Ακολουθεί ένα παράδειγμα με ποσοστά:
div( |
Τιμή πρώτου άξονα Χδεύτερο σε U.
Μπορείτε επίσης να ορίσετε το μέγεθος της ακτινικής κλίσης. Το μέγεθος υποδεικνύεται με ένα κενό μετά το σχήμα κλίσης. Εφαρμογή από προεπιλογή πιο απομακρυσμένη γωνία(στην μακρινή γωνία). Ο υπολογισμός πραγματοποιείται από το κεντρικό σημείο της κλίσης προς:
Για να το κατανοήσουμε καλύτερα αυτό, ας δούμε ένα παράδειγμα. Μια ελλειπτική κλίση με λευκό χρώμα έναρξης και μπλε χρώματος λήξης:
div( |
Το μέγεθος υπολογίζεται από την απόσταση στις κοντινές πλευρές, είναι προφανές ότι η κορυφή είναι πιο κοντά κατά μήκος του άξονα Υκαι αριστερά κατά μήκος του άξονα Χ.
Και τώρα στις μακρινές πλευρές:
div( |
Το αποτέλεσμα, όπως λένε, είναι προφανές. Το μέγεθος υπολογίζεται από την απόσταση έως τις μακρινές πλευρές.
Τόσο σε ακτινικές όσο και σε γραμμικές διαβαθμίσεις, οι θέσεις στοπ μπορούν να χρησιμοποιηθούν για το χρώμα. Θα ήθελα επίσης να σημειώσω ότι εάν πρέπει να επιτύχετε διαφάνεια χρώματος, θα πρέπει να χρησιμοποιήσετε το rgba.
div( |
Το κανάλι άλφα, το τελευταίο και ίσο με 0,2, δείχνει ότι χρησιμοποιείται μόνο το 20% του 100% του χρώματος.
Και στους δύο τύπους CSS3 ντεγκραντέΜπορείτε να χρησιμοποιήσετε όχι δύο, αλλά πολλά χρώματα.
div( |
Και για τους δύο τύπους, μπορούν να χρησιμοποιηθούν επαναλαμβανόμενα χρώματα. Δηλαδή, σχηματίζεται ένας κύκλος από αυτές τις τιμές. Επαναλαμβανόμενες συναρτήσεις κλίσης, επαναλαμβανόμενες-γραμμικές-βαθμίδες() για γραμμικές και επαναλαμβανόμενες-ακτινικές διαβαθμίσεις() για ακτινικές.
div( |
0% , #FFAE00 100% ) ; /* για Firefox */
background-image : -ms-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ); /* για IE 10+ */
background-image : -o-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; /* για Opera */
background-image : linear-gradient(top , #FF5A00 0% , #FFAE00 100%) ; /* τυπική σύνταξη */
}
div(
filter : progid: DXImageTransform.Microsoft .gradient(startColorstr= #33FF5A00 , endColorstr= #33FFAE00 );
}
Όπου 33 αμέσως μετά τον κατακερματισμό είναι το ποσοστό κορεσμού χρώματος.
Ελπίζω ότι το άρθρο ήταν χρήσιμο για εσάς και ότι το θέμα που συζητήθηκε καλύφθηκε πλήρως.
Για να μείνετε ενημερωμένοι με τα πιο πρόσφατα άρθρα και μαθήματα, εγγραφείτε στο
Βλαντ Μέρζεβιτς
Η κλίση ονομάζεται ομαλή μετάβασηαπό το ένα χρώμα στο άλλο και μπορεί να υπάρχουν πολλά ίδια χρώματα και μεταβάσεις μεταξύ τους. Με τη βοήθεια των διαβαθμίσεων δημιουργούνται τα πιο παράξενα εφέ σχεδίασης ιστοσελίδων, για παράδειγμα, ψευδο-τρισδιάστατη, λάμψη, φόντο κ.λπ. Επίσης, με μια κλίση, τα στοιχεία φαίνονται πιο ελκυστικά από τα μονόχρωμα.
Δεν υπάρχει ξεχωριστή ιδιότητα για την προσθήκη κλίσης, αφού θεωρείται εικόνα φόντου, οπότε προστίθεται μέσω της ιδιότητας background-image ή καθολική ιδιοκτησίαφόντο όπως φαίνεται στο παράδειγμα 1.
Παράδειγμα 1: Κλίση
Εδώ το άσεμνο ιδίωμα ξεκινά παραδοσιακά την πεζή εικόνα, αλλά το γλωσσικό παιχνίδι δεν οδηγεί σε ενεργή διαλογική κατανόηση.
Αποτέλεσμα αυτό το παράδειγμαφαίνεται στο Σχ. 1.
Ρύζι. 1. Γραμμική κλίσηγια την παράγραφο
Στο πολύ απλή υπόθεσημε δύο χρώματα που φαίνονται στο παράδειγμα 1, γράψτε πρώτα τη θέση από την οποία θα ξεκινήσει η διαβάθμιση και μετά τα χρώματα έναρξης και λήξης.
Για να καταγράψετε μια θέση, γράφετε πρώτα στο και, στη συνέχεια, προσθέτετε τις λέξεις-κλειδιά πάνω , κάτω και αριστερά , δεξιά , καθώς και τους συνδυασμούς τους. Η σειρά των λέξεων δεν είναι σημαντική, μπορείτε να γράψετε επάνω αριστερά ή επάνω αριστερά. Στον πίνακα Το 1 δείχνει διαφορετικές θέσεις και τον τύπο της κλίσης που λαμβάνεται για τα χρώματα #000 και #fff, διαφορετικά από μαύρο σε λευκό.
| Θέση | Περιγραφή | Θέα | |
|---|---|---|---|
| στην κορυφή | 0 μοίρες | Κάτω πάνω. | |
| αριστερά | 270 μοίρες | Από δεξιά προς τα αριστερά. | |
| στον πάτο | 180 μοίρες | Από πάνω προς τα κάτω. | |
| στα δεξιά | 90 μοίρες | Απο αριστερά προς δεξιά. | |
| επάνω αριστερά | Από την κάτω δεξιά γωνία προς την επάνω αριστερή. | ||
| πάνω δεξιά | Από κάτω αριστερά προς τα πάνω δεξιά. | ||
| κάτω αριστερά | Από την επάνω δεξιά γωνία προς την κάτω αριστερή. | ||
| προς την κάτω δεξιά | Από πάνω αριστερά προς τα κάτω δεξιά. |
Αντί για μια λέξη-κλειδί, μπορείτε να καθορίσετε την κλίση της γραμμής κλίσης, η οποία δείχνει την κατεύθυνση της κλίσης. Αρχικά, γράφεται η θετική ή αρνητική τιμή της γωνίας και στη συνέχεια προστίθεται 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-editor με τον οποίο μπορείτε εύκολα να ρυθμίσετε διαβαθμίσεις και να αποκτήσετε αμέσως απαιτούμενος κωδικός. Διαθέσιμος έτοιμα πρότυπα(Presets), προβολή του αποτελέσματος (Προεπισκόπηση), προσαρμογή χρωμάτων (Adjustments), τελικός κώδικας (CSS) που υποστηρίζει IE μέσω φίλτρων. Για όσους εργάζονταν στο Photoshop ή άλλο γραφικός επεξεργαστής, η δημιουργία διαβαθμίσεων θα φαίνεται σαν ένα κομμάτι κέικ, αλλά άλλοι δεν θα δυσκολευτούν να το καταλάβουν γρήγορα. Γενικά το προτείνω ανεπιφύλακτα.
Οι διαβαθμίσεις CSS σάς επιτρέπουν να δημιουργήσετε ένα φόντο με δύο ή περισσότερα χρώματα που μεταβαίνουν ομαλά από το ένα στο άλλο. Είναι μαζί μας εδώ και πολύ καιρό και έχουν πολύ καλή υποστήριξη προγράμματος περιήγησης. Η πλειοψηφία σύγχρονα προγράμματα περιήγησηςτα καταλαβαίνει χωρίς προθέματα, για IE9 και παλαιότερα υπάρχει Gradient Filter και για IE9 μπορείτε να χρησιμοποιήσετε SVG.
Οι διαβαθμίσεις μπορούν να χρησιμοποιηθούν οπουδήποτε χρησιμοποιούνται εικόνες: σε φόντο, ως κουκκίδες λίστας, μπορούν να καθοριστούν σε περιεχόμενο ή εικόνα περιγράμματος .
Γραμμική κλίση
Οι γραμμικές κλίσεις είναι αρκετά εύχρηστες. Για την πιο βασική κλίση, απλώς ορίστε τα χρώματα έναρξης και λήξης:
Φόντο: γραμμική κλίση (πορτοκαλί, χρυσό);
Μπορεί να υπάρχει οποιοσδήποτε αριθμός χρωμάτων περισσότερα από δύο. Μπορείτε επίσης να ελέγξετε την κατεύθυνση της κλίσης και τα όρια (σημεία στάσης) των χρωμάτων.
Η κατεύθυνση μπορεί να καθοριστεί σε βαθμούς ή λέξεις-κλειδιά.
Λέξεις κλειδιά:στην κορυφή = 0deg ; προς τα δεξιά = 90 μοίρες; προς τα κάτω = 180 μοίρες - προεπιλεγμένη τιμή. προς τα αριστερά = 270 μοίρες.
Οι λέξεις-κλειδιά μπορούν να συνδυαστούν για να δημιουργήσουν μια διαγώνια κλίση, όπως επάνω αριστερά .
Παρακάτω μπορείτε να δείτε πώς λειτουργούν οι διαφορετικές κατευθύνσεις στο τέντωμα από λιλά σε κίτρινο:
Εδώ είναι ο κωδικός για το πρώτο τετράγωνο, για παράδειγμα:
Επάνω αριστερά ( φόντο: γραμμική κλίση (επάνω αριστερά, μωβ, βυσσινί, πορτοκαλί, χρυσό);
Ένα πράγμα που πρέπει να θυμάστε είναι ότι πάνω δεξιά δεν είναι το ίδιο με 45 μοίρες. Τα χρώματα ντεγκραντέ είναι τοποθετημένα κάθετα στη γραμμή κατεύθυνσης της κλίσης. Με προς τα πάνω δεξιά, η γραμμή πηγαίνει από την κάτω αριστερή στην επάνω δεξιά γωνία, με 45 μοίρες - βρίσκεται αυστηρά σε αυτή τη γωνία, ανεξάρτητα από το μέγεθος του σχήματος.
Η διαφορά είναι σαφώς ορατή σε ορθογώνια σχήματα:
Μπορείτε επίσης να ορίσετε σημεία διακοπής για χρώματα ντεγκραντέ, οι τιμές καθορίζονται σε μονάδες ή ποσοστά και μπορεί να είναι μεγαλύτερες από 100% και μικρότερες από 0%.
Παραδείγματα ορισμού τιμών σε %, σε em και τιμών που υπερβαίνουν τα όρια του στοιχείου:
Όσο πιο κοντά είναι τα σημεία στάσης των γειτονικών χρωμάτων, τόσο πιο καθαρό θα είναι το όριο μεταξύ τους. Με αυτόν τον τρόπο μπορείτε εύκολα να δημιουργήσετε ριγέ φόντο:
Αυτός είναι ο τρόπος με τον οποίο μπορείτε να δημιουργήσετε, για παράδειγμα, ένα φόντο για μια πλευρική στήλη, που εκτείνεται σε όλο το ύψος του γονικού στοιχείου:
Οι ρίγες στο φόντο της πλαϊνής γραμμής είναι μια άλλη κλίση που αποτελείται από εναλλασσόμενη πλήρη διαφάνεια και άσπρομε διαφάνεια 30%. Οι διαβαθμίσεις με ημιδιαφανή χρώματα είναι βολικές επειδή μπορούν να εφαρμοστούν σε φόντο οποιουδήποτε χρώματος.
Η διαβάθμιση στο παράδειγμα ορίζεται σε σύνθετο, μακρύ κώδικα, επειδή οι λωρίδες πρέπει να τοποθετούνται μόνο πάνω από το φόντο για την πλαϊνή γραμμή. Εάν δεν προσπαθήσετε να κάνετε τα πάντα φόντο για ένα μπλοκ, θα μπορούσατε να λύσετε το πρόβλημα χρησιμοποιώντας ένα ψευδοστοιχείο.
Εάν δεν υπάρχουν περιορισμοί, ο κωδικός μπορεί να είναι πολύ μικρότερος:
Ανοιχτό ( φόντο: peachpuff γραμμική διαβάθμιση (90 deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50%) κέντρο κέντρο / 2em; ) .σκούρο ( φόντο: ατσάλι μπλε γραμμική κλίση(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%) κέντρο κέντρο / 100% 1em )
Στην πρώτη γραμμή που θέσαμε χρώμα του φόντουστοιχείο, τύπος και κατεύθυνση (το χρώμα και η κατεύθυνση μπορούν να παραλειφθούν), στο δεύτερο - καθορίζουμε τα χρώματα της κλίσης και τα όρια μεταξύ τους, στο τρίτο - ορίζουμε τη θέση και το μέγεθος της εικόνας που προκύπτει. Το περισσότερο σημαντικό μέρος- Μέγεθος. Από προεπιλογή, το φόντο επαναλαμβάνεται, επομένως το μοτίβο που προκύπτει θα γεμίσει το φόντο του στοιχείου. Πολύ εύκολο και κατανοητό :)
Ολόκληρη η καταχώρηση μπορεί να γίνει σε μία γραμμή, αλλά για λόγους αναγνωσιμότητας είναι πιο βολικό να γράφετε σε πολλές, ειδικά για σύνθετες διαβαθμίσεις.
Είναι επίσης σημαντικό να γνωρίζετε ότι η λέξη-κλειδί διαφανές σημαίνει διαφανές μαύρο, όχι διαφανές λευκό, οπότε αν τη χρησιμοποιήσετε στον Firefox μπορεί να καταλήξετε με κάτι σαν αυτό:
Για να αποφύγετε αυτό, χρησιμοποιήστε εντελώς διαφανή χρώματα της επιθυμητής απόχρωσης, για παράδειγμα, λευκό: rgba(255, 255, 255, 0) ή μαύρο rgba(0, 0, 0, 0) . Σχετικά με διαφορετικοί τρόποιΜπορείτε να διαβάσετε τα χρώματα για ρύθμιση.
Για να μάθετε τη σημείωση rgb ενός συγκεκριμένου χρώματος, μπορείτε να χρησιμοποιήσετε CSS.coloratum, όργανο από τη Λέα Βέρου.
Εκτός από τη συνηθισμένη γραμμική διαβάθμιση, μπορείτε να κάνετε μια επαναλαμβανόμενη γραμμική διαβάθμιση - μια επαναλαμβανόμενη κλίση
Παράδειγμα κώδικα:
Υπόβαθρο: επαναλαμβανόμενη-γραμμική-κλίση (πράσινο, πράσινο .5em, διαφανές .5em, διαφανές 1em);
Δυστυχώς, οι επαναλαμβανόμενες κλίσεις συμπεριφέρονται τυχαία και είναι κατάλληλες μόνο για μοτίβα που δεν ενδιαφέρονται για την ακρίβεια. Εάν χρειάζεστε ακρίβεια, χρησιμοποιήστε τη γραμμική διαβάθμιση σε συνδυασμό με το μέγεθος φόντου και την επανάληψη φόντου.
Οι διαβαθμίσεις έχουν τον ίδιο περιορισμό με το πλαίσιο-σκιά: δεν μπορούν να τους δοθούν μεμονωμένα χρώματα ή κατεύθυνση. Αυτό οδηγεί σε διπλασιασμό κώδικα και σε επείγουσα ανάγκη χρήσης προεπεξεργαστών κατά τη δημιουργία πολύπλοκων διαβαθμίσεων.
Ένας άλλος περιορισμός είναι ότι οι διαβαθμίσεις δεν είναι κινούμενες, οι οποίες, ωστόσο, μπορούν να επεξεργαστούν σε κάποιο βαθμό.
Για γρήγορη δημιουργίαΥπάρχουν πολλές διαβαθμίσεις μεταξύ προγραμμάτων περιήγησης εύχρηστο εργαλείο: colorzilla.com/gradient-editor/. Εκτός από κώδικα για σύγχρονα προγράμματα περιήγησης, θα προσφέρει κώδικα για παλαιότερο IE και SVG για 9ο.
Όταν συνδυάζονται με βασικά στοιχεία ελέγχου εικόνας φόντου, οι διαβαθμίσεις παρέχουν τις ευρύτερες ευκαιρίεςγια να δημιουργήσετε φόντο διαφορετικού βαθμού πολυπλοκότητας χωρίς να χρησιμοποιήσετε καθόλου εικόνες. Μπορείτε να φτιάξετε περίπλοκα και ενδιαφέροντα μοτίβα με διαβαθμίσεις, αλλά αυτό είναι ένα εντελώς διαφορετικό θέμα.
Όταν μιλάμε για διαβαθμίσεις στο CSS, μιλάμε για χρωματιστές κλίσεις.
Υπάρχουν δύο τύποι διαβαθμίσεων στο CSS:
- γραμμικός: τα χρώματα πηγαίνουν από το ένα σημείο στο άλλο, μαζί ευθείαγραμμές?
- ακτινικός: τα χρώματα πηγαίνουν από το κέντρο του κύκλου στις άκρες του, μέσα Ολοικατευθύνσεις.
Η κλίση θεωρείται εικόνα φόντουκαι πρέπει να χρησιμοποιείται με την κατάλληλη ιδιότητα.
γραμμική κλίση
Η σύνταξη για τις γραμμικές διαβαθμίσεις είναι αρκετά περίπλοκο, αλλά η βασική ιδέα είναι η εξής:
- καθορίσει το επιθυμητό χρωματιστά;
- όπου πρέπει να εμφανίζονται αυτά τα χρώματα κατά μήκος του άξονα(στην αρχή, μέση, τέλος κ.λπ.)
- στο οποίο κατεύθυνσηθα πρέπει να υπάρχει μια κλίση.
Ας ξεκινήσουμε με μια απλή κλίση δύο χρωμάτων:
Div (εικόνα φόντου: γραμμική διαβάθμιση (κόκκινο, μπλε); )
Προκαθορισμένο:
- κατακόρυφη κατεύθυνση, από πάνω προς τα κάτω;
- πρώταχρώμα μέσα αρχή(πάνω);
- δεύτεροςχρώμα μέσα τέλος(στον πάτο).
Αλλαγή κατεύθυνσης
Εάν η κατεύθυνση από πάνω προς τα κάτω δεν σας ταιριάζει, μπορείτε να την αλλάξετε σε μία από τις επιλογές:
- καθορίζω ανάθεση κλίσης, χρησιμοποιώντας λέξεις-κλειδιά όπως στην αριστερή κορυφή?
- καθορίζουν συγκεκριμένα γωνίασε μοίρες, όπως 45 μοίρες.
Αυτή η κατεύθυνση πρέπει να οριστεί πρινχρώμα:
Div (εικόνα φόντου: γραμμική διαβάθμιση (κάτω δεξιά, κίτρινο, μωβ); πλάτος: 200 εικονοστοιχεία; )
Αν θέλετε ρωτήστε συγκεκριμένη γωνία, τότε μπορείτε να χρησιμοποιήσετε την τιμή in βαθμούς:
- 0 μοίρες - από κάτω προς τα πάνω.
- 20 μοίρες - ελαφρώς διαγώνια, δεξιόστροφα.
- 90 μοίρες - σαν 15 η ώρα, από αριστερά προς τα δεξιά.
- Οι 180 μοίρες είναι η προεπιλογή, από πάνω προς τα κάτω.
Div (εικόνα φόντου: γραμμική διαβάθμιση (20 μοίρες, πράσινο, μπλε); πλάτος: 150 εικονοστοιχεία; )
Προσθήκη περισσότερων χρωμάτων
Μπορείτε να εισάγετε όσα χρώματα θέλετε. Αυτοί θα ομοιόμορφα κατανεμημένακατά μήκος του άξονα:
- δύο χρώματα: 0% και 100%
- τρία χρώματα: 0%, 50% και 100%
- τέσσερα χρώματα: 0%, 33%, 67% και 100%
Div (εικόνα φόντου: γραμμική διαβάθμιση (πορτοκαλί, γκρι, κίτρινο); πλάτος: 150 εικονοστοιχεία; )
Καθορισμός συγκεκριμένων χρωματικών σημείων
Εάν δεν θέλετε το χρώμα να κατανέμεται ομοιόμορφα, μπορείτε να ορίσετε ορισμένες χρωματικές θέσειςχρησιμοποιώντας είτε ποσοστά (%) είτε pixel (px):
Div (εικόνα φόντου: γραμμική διαβάθμιση (πορτοκαλί, γκρι 10%, κίτρινο 50%); πλάτος: 150 εικονοστοιχεία; )
Σε αυτές τις παραμέτρους:
- Το πορτοκαλί δεν έχει καθορισμένη θέση χρώματος, επομένως η προεπιλεγμένη τιμή είναι 0%.
- το γκρι χρώμα είναι πιο κοντά στην κορυφή, 10% αντί για 50%.
- Το κίτρινο χρώμα καταλαμβάνει το μισό της κλίσης, από το 50% έως το τέλος του 100%.
ακτινική κλίση
Ενώ οι γραμμικές διαβαθμίσεις ακολουθούν έναν μόνο άξονα, ακτινικές κλίσεις εξαπλωθεί προς όλες τις κατευθύνσεις. Η σύνταξή τους μοιάζει πολύ με τις γραμμικές διαβαθμίσεις, αφού και οι δύο έχουν κουκκίδες χρώματος. Αλλά αντί να καθορίσετε μια κατεύθυνση, πρέπει να καθορίσετε:
- μορφή: κύκλος ή έλλειψη.
- αφετηρία: που θα είναι το κέντρο ενός κύκλου ή έλλειψης.
- τελικό σημείο: όπου θα βρίσκεται η άκρη του κύκλου ή της έλλειψης.
Div (εικόνα φόντου: ακτινική διαβάθμιση (κόκκινο, κίτρινο); padding: 1rem; πλάτος: 300 px; )
Προκαθορισμένο:
- κλίση είναι έλλειψη;
- το πρώτο χρώμα αρχίζει στο κέντρο;
- το τελευταίο χρώμα τελειώνει σε η πιο απομακρυσμένη γωνία.
Θέση εκκίνησης
Θέση εκκίνησηςλειτουργεί όπως φόντο-θέση. Μπορείτε να το ορίσετε μέσω της λέξης-κλειδιού at.
Div (εικόνα φόντου: ακτινική διαβάθμιση (επάνω δεξιά, μαύρο, ανοιχτό γκρι); padding: 1rem; πλάτος: 300px; )
Τελική θέση
Από προεπιλογή, η φόρμα τελειώνει στο η πιο απομακρυσμένη γωνία. Μπορείς να διαλέξεις:
- πλησιέστερη πλευρά
- πλησιέστερη γωνία
- πιο απομακρυσμένη πλευρά
- πιο απομακρυσμένη γωνία
Div ( φόντο-εικόνα: ακτινική διαβάθμιση (πλησιέστερη γωνία στα 20 εικονοστοιχεία 20 εικονοστοιχεία, πράσινο, μπλε); Επένδυση: 1 εκ. πλάτος: 300 εικονοστοιχεία; ) div:hover (εικόνα φόντου: ακτινική διαβάθμιση (πιο απομακρυσμένη πλευρά στα 20 px 20 px, πράσινο μπλε)
Σταθερό μέγεθος
Αντί να ορίσετε τις θέσεις έναρξης και λήξης, μπορείτε απλά να ορίσετε συγκεκριμένα μεγέθη:
Div (εικόνα φόντου: ακτινική διαβάθμιση (20 εικονοστοιχεία 10 εικονοστοιχεία σε 75% 50%, σκούρο βιολετί, ροζ); επένδυση: 1 εκ. πλάτος: 300 εικονοστοιχεία; )
Οι διαβαθμίσεις στο CSS είναι ισχυρές άπειρος αριθμόςεπιλογές.
