Γραμμική διαβάθμιση CSS που εξηγείται με παραδείγματα

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

Μια κλίση με δύο στάσεις χρώματος

Σύνταξη

Για να δημιουργήσετε μια γραμμική κλίση πρέπει να ορίσετε τουλάχιστον δύο στάσεις χρώματος. Είναι τα χρώματα στα οποία δημιουργούνται οι μεταβάσεις. Δηλώνεται είτε στις ιδιότητες του φόντου είτε της εικόνας φόντου .

background: linear-gradient(direction, colour-stop1, colour-stop2, ...);

Εάν δεν έχει καθοριστεί κατεύθυνση, η προεπιλεγμένη μετάβαση είναι από πάνω προς τα κάτω.

Παραδείγματα

Πάνω προς τα κάτω:

background: linear-gradient(red, yellow);
Πάνω προς τα κάτω

Αριστερό Για r ight:

Για να το κάνετε αριστερά προς τα δεξιά, προσθέτετε μια επιπλέον παράμετρο στην αρχή της linear-gradient()έναρξης με τη λέξη στην οποία υποδεικνύεται η κατεύθυνση:

background: linear-gradient(to right, red , yellow);
Από αριστερά προς τα δεξιά

Διαγώνιες κλίσεις :

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

Ακολουθεί ένα δείγμα για μια κλίση που ξεκινά από πάνω αριστερά:

 background: linear-gradient(to bottom right, red, yellow);
Πάνω αριστερά

Χρησιμοποιώντας γωνίες για να καθορίσετε την κατεύθυνση της κλίσης

Μπορείτε επίσης να χρησιμοποιήσετε γωνίες, για να είστε πιο ακριβείς στον καθορισμό της κατεύθυνσης της κλίσης:

background: linear-gradient(angle, colour-stop1, colour-stop2);

Η γωνία καθορίζεται ως γωνία μεταξύ μιας οριζόντιας γραμμής και της γραμμής κλίσης.

background: linear-gradient(90deg, red, yellow);
90 μοίρες

Χρησιμοποιώντας περισσότερα από δύο χρώματα

Δεν περιορίζεστε σε δύο μόνο χρώματα - μπορείτε να χρησιμοποιήσετε όσα χρώματα διαχωρίζονται με κόμμα, όπως θέλετε.

background: linear-gradient(red, yellow, green); 
Μια κλίση με 3 στάσεις χρώματος

Μπορείτε επίσης να χρησιμοποιήσετε άλλες σύνταξη χρωμάτων όπως RGB ή δεκαεξαδικούς κωδικούς για να καθορίσετε τα χρώματα.

Το σκληρό χρώμα σταματά

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

background: linear-gradient(to right,red 15%, yellow 15%);
Το σκληρό χρώμα σταματά

Περισσότερες πληροφορίες:

  • Το Εγχειρίδιο CSS: ένας εύχρηστος οδηγός για το CSS για προγραμματιστές