Συνάρτηση linear-gradient
Η συνάρτηση linear-gradient ορίζει μια γραμμική
κλίση. Εφαρμόζεται σε ιδιότητες που
ορίζουν εικόνα φόντου: background,
background-image
ή εικόνα περιγράμματος: border-image,
background-image-source.
Σύνταξη
επιλογέας {
background: linear-gradient([γωνία ή κατεύθυνση], χρώμα1 μέγεθος1, χρώμα2 μέγεθος2...);
}
Τιμές
| Τιμή | Περιγραφή |
|---|---|
| κατεύθυνση |
Ορίζει μια συγκεκριμένη κατεύθυνση της κλίσης σε οποιεσδήποτε μονάδες για γωνίες
ή με τις λέξεις-κλειδιά top, left, right, bottom
ή συνδυασμό τους: top left, top right και ούτω καθεξής.
Η σειρά των λέξεων δεν έχει σημασία: μπορείτε να γράψετε top left και left top,
δεν υπάρχει διαφορά. Η παράμετρος είναι προαιρετική: αν δεν γραφεί, η κλίση θα
πηγαίνει από πάνω προς τα κάτω (όπως με το to top). Πριν από την κατεύθυνση τοποθετείται η λέξη to.
|
| γωνία | Γωνία σε οποιεσδήποτε μονάδες για γωνίες. Μπορεί να είναι θετική ή αρνητική. Η παράμετρος είναι προαιρετική. Ταυτόχρονα μπορεί να οριστεί ή γωνία, ή κατεύθυνση (ή τίποτα απολύτως). |
| χρώμα1 | Αρχικό χρώμα της κλίσης σε οποιεσδήποτε μονάδες για χρώμα. |
| χρώμα2 | Τελικό χρώμα της κλίσης σε οποιεσδήποτε μονάδες για χρώμα. |
| μέγεθος | Ορίζει την έκταση ενός συγκεκριμένου χρώματος της κλίσης σε οποιεσδήποτε μονάδες για μέγεθος. |
Παράδειγμα . Η πιο απλή παραλλαγή
Σύνταξη:
επιλογέας {
background: linear-gradient(αρχικό χρώμα, τελικό χρώμα);
}
Ας δούμε ένα παράδειγμα:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Παράδειγμα . Προσθέτουμε γωνία
Σύνταξη:
επιλογέας {
background: linear-gradient(γωνία, αρχικό χρώμα, τελικό χρώμα);
}
Ας δούμε ένα παράδειγμα:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Παράδειγμα . Προσθέτουμε κατεύθυνση
Αντί για γωνία μπορείτε να προσθέσετε κατεύθυνση
top, left, right, bottom
ή συνδυασμό τους: top left, top right
Πριν από την κατεύθυνση τοποθετείται η λέξη to.
Σύνταξη:
επιλογέας {
background: linear-gradient(κατεύθυνση, αρχικό χρώμα, τελικό χρώμα);
}
Ας δούμε ένα παράδειγμα:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Παράδειγμα . Προσθέτουμε κατεύθυνση
Ας ορίσουμε διαφορετική κατεύθυνση:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Παράδειγμα . Προσθέτουμε μέγεθος
Σύνταξη:
επιλογέας {
background: linear-gradient(χρώμα1 μέγεθος1, χρώμα2 μέγεθος2);
}
Στο επόμενο παράδειγμα η συμπεριφορά θα είναι η εξής:
καθαρό κόκκινο χρώμα θα είναι από 0px έως
30px, από 30px έως 50px
θα υπάρχει κλίση από κόκκινο σε μπλε, και
από 50px και μέχρι το τέλος - καθαρό μπλε:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Παράδειγμα . Προσθέτουμε περισσότερα από 2 χρώματα
Σύνταξη:
επιλογέας {
background: linear-gradient(χρώμα1 μέγεθος1, χρώμα2 μέγεθος2, χρώμα3 μέγεθος3...);
}
Στο επόμενο παράδειγμα η συμπεριφορά θα είναι η εξής:
καθαρό κόκκινο χρώμα θα είναι από 0px έως
30px, από 30px έως 50px
θα υπάρχει κλίση από κόκκινο σε μπλε, και
από 50px έως 70px - κλίση από μπλε
σε πράσινο, και μετά τα 70px - καθαρό πράσινο:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Παράδειγμα . Απότομες μεταβάσεις
Στο επόμενο παράδειγμα η συμπεριφορά θα είναι η εξής:
καθαρό κόκκινο χρώμα θα είναι από 0px έως
30px, καθαρό μπλε - από 30px
έως 60px, καθαρό πράσινο - μετά τα 60px
(το red 0px μπορείτε και να μην το γράψετε):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Παράδειγμα . Τα μεγέθη μπορούν να οριστούν και σε ποσοστά
Στο επόμενο παράδειγμα η συμπεριφορά θα είναι η εξής:
καθαρό κόκκινο χρώμα θα είναι από 0% έως
30%, καθαρό μπλε - από 30%
έως 60%, καθαρό πράσινο - μετά τα 60%
(το red 0% μπορείτε και να μην το γράψετε):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Παράδειγμα . Συνδυασμός με background-size
Στο επόμενο παράδειγμα η συμπεριφορά θα είναι η εξής:
καθαρό κόκκινο χρώμα θα είναι από 0px έως
30px, καθαρό μπλε - από 30px
έως 60px, ενώ όλα αυτά θα επαναλαμβάνονται
σε κομματάκια των 60px (λόγω του background-size:
60px;):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Δείτε επίσης
-
τη συνάρτηση
radial-gradient,
που δημιουργεί μια ακτινική κλίση -
τη συνάρτηση
repeating-linear-gradient,
που δημιουργεί μια επαναλαμβανόμενη γραμμική κλίση -
τη συνάρτηση
repeating-radial-gradient,
που δημιουργεί μια επαναλαμβανόμενη ακτινική κλίση
