Συνάρτηση radial-gradient
Η συνάρτηση radial-gradient ορίζει μια ακτινωτή
διαβάθμιση. Αυτή η συνάρτηση εφαρμόζεται σε ιδιότητες που
ορίζουν εικόνα φόντου: background,
background-image
ή εικόνα περιγράμματος: border-image,
background-image-source.
Σύνταξη
επιλογέας {
background: radial-gradient([σχήμα τύπος θέση], χρώμα1 μέγεθος1, χρώμα2 μέγεθος2...);
}
Τιμές
| Τιμή | Περιγραφή |
|---|---|
| σχήμα |
Αποδεκτές τιμές:
ellipse ελλειπτική διαβάθμιση (από προεπιλογή),
circle κυκλική διαβάθμιση.
|
| τύπος |
Ορίζει την επέκταση της διαβάθμισης.
Αποδεκτές τιμές:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| θέση |
Μετά την λέξη-κλειδί at
ορίζεται η θέση σε οποιεσδήποτε μονάδες μεγέθους
ή με τη χρήση λέξεων-κλειδιών top, bottom,
left, right, center
σε διάφορους συνδυασμούς.
|
| χρώμα1 | Αρχικό χρώμα της διαβάθμισης σε οποιεσδήποτε μονάδες χρώματος. |
| χρώμα2 | Τελικό χρώμα της διαβάθμισης σε οποιεσδήποτε μονάδες χρώματος. |
| μέγεθος | Ορίζει την έκταση ενός συγκεκριμένου χρώματος της διαβάθμισης σε οποιεσδήποτε μονάδες μεγέθους. |
Τιμές για τύπο
| Τιμή | Περιγραφή |
|---|---|
closest-side |
Το σχήμα της διαβάθμισης συμπίπτει με την πλησιέστερη πλευρά του μπλοκ. |
closest-corner |
Το σχήμα της διαβάθμισης υπολογίζεται βάσει πληροφοριών για την απόσταση από την πλησιέστερη γωνία του μπλοκ. |
farthest-side |
Η διαβάθμιση επεκτείνεται μέχρι την πιο μακρινή πλευρά του μπλοκ. |
farthest-corner |
Το σχήμα της διαβάθμισης υπολογίζεται βάσει πληροφοριών για την απόσταση από την μακρινή γωνία του μπλοκ. |
Παρατήρηση
Ο τύπος και το σχήμα μπορούν να αλλάξουν θέσεις, αλλά η θέση πρέπει να βρίσκεται στο τέλος της πρώτης παραμέτρου. Ο τύπος διαβάθμισης και το μέγεθός της δεν λειτουργούν μεταξύ τους (λογικά, αφού έρχονται σε σύγκρουση). Κερδίζει το μέγεθος.
Παράδειγμα . Η πιο απλή παραλλαγή
Ας ορίσουμε απλώς το αρχικό και το τελικό χρώμα:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Παράδειγμα . Προσθήκη θέσης
Ας ορίσουμε τη θέση του κέντρου:
30px - περιθώριο αριστερά, 100px - περιθώριο πάνω:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Παράδειγμα . Θέση σε ποσοστά
Ας ορίσουμε τη θέση του κέντρου σε ποσοστά:
30% - περιθώριο αριστερά, 50% - περιθώριο πάνω:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Παράδειγμα . Θέση με λέξη-κλειδί
Μπορούν να χρησιμοποιηθούν λέξεις-κλειδιά
top, bottom, left,
right, center σε διάφορους
συνδυασμούς. Ας τοποθετήσουμε, για παράδειγμα, τη διαβάθμιση
δεξιά στο κέντρο:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Παράδειγμα . Μέγεθος διαβάθμισης
Σε αυτήν την περίπτωση η διαβάθμιση θα λειτουργεί ως εξής:
από 0px έως 20px θα υπάρχει καθαρό
κόκκινο χρώμα, από 20px έως 60px - διαβάθμιση
από κόκκινο σε μπλε, μετά τα 60px - καθαρό
μπλε:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Παράδειγμα . Πολλά χρώματα στη σειρά
Σε αυτήν την περίπτωση η διαβάθμιση θα λειτουργεί ως εξής:
από 0px έως 20px θα υπάρχει καθαρό
κόκκινο χρώμα, από 20px έως 40px
θα υπάρχει καθαρό μπλε χρώμα, από 40px
έως 60px - διαβάθμιση από μπλε σε πράσινο,
μετά τα 60px - καθαρό πράσινο:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Παράδειγμα . Μέγεθος + θέση
Ας ορίσουμε ταυτόχρονα μεγέθη για διαφορετικά χρώματα και τη θέση του κέντρου της διαβάθμισης:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Παράδειγμα . Σχήμα διαβάθμισης
Το σχήμα της διαβάθμισης ορίζεται από την πρώτη παράμετρο
και μπορεί να πάρει 2 τιμές: circle
(κυκλική διαβάθμιση) ή ellipse (ελλειπτική
διαβάθμιση, από προεπιλογή). Γιατί μέχρι τώρα
δεν είδαμε ελλειπτικές διαβαθμίσεις, αν και
ορίζονται από προεπιλογή; Επειδή μέχρι τώρα
το σχήμα των μπλοκ ήταν τετράγωνο. Αν αλλάξουμε
το σχήμα σε ορθογώνιο, τότε θα δούμε ελλειπτική
διαβάθμιση:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Παράδειγμα . Κυκλική διαβάθμιση
Ας κάνουμε κυκλική διαβάθμιση σε ένα ορθογώνιο
μπλοκ. Για αυτό, ας ορίσουμε την πρώτη παράμετρο
το σχήμα της διαβάθμισης με τη λέξη-κλειδί
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Παράδειγμα . Προσθήκη θέσης
Ας προσθέσουμε στον προηγούμενο κώδικα και τη θέση της διαβάθμισης:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Παράδειγμα . Τύπος farthest-corner + circle
Το σχήμα της διαβάθμισης υπολογίζεται βάσει πληροφοριών για την απόσταση από την μακρινή γωνία του μπλοκ:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Παράδειγμα . Τύπος farthest-corner + ellipse
Το σχήμα της διαβάθμισης υπολογίζεται βάσει πληροφοριών για την απόσταση από την μακρινή γωνία του μπλοκ:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Παράδειγμα . Τύπος farthest-side + circle
Η διαβάθμιση επεκτείνεται μέχρι την πιο μακρινή πλευρά του μπλοκ:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Παράδειγμα . Τύπος farthest-side + ellipse
Η διαβάθμιση επεκτείνεται μέχρι την πιο μακρινή πλευρά του μπλοκ:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Παράδειγμα . Τύπος closest-corner + circle
Το σχήμα της διαβάθμισης υπολογίζεται βάσει πληροφοριών για την απόσταση από την πλησιέστερη γωνία του μπλοκ:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Παράδειγμα . Τύπος closest-corner + ellipse
Το σχήμα της διαβάθμισης υπολογίζεται βάσει πληροφοριών για την απόσταση από την πλησιέστερη γωνία του μπλοκ:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Παράδειγμα . Τύπος closest-side + circle
Το σχήμα της διαβάθμισης συμπίπτει με την πλησιέστερη πλευρά του μπλοκ:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Παράδειγμα . Τύπος closest-side + ellipse
Το σχήμα της διαβάθμισης συμπίπτει με την πλησιέστερη πλευρά του μπλοκ:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Δείτε επίσης
-
τη συνάρτηση
linear-gradient,
που δημιουργεί γραμμική διαβάθμιση -
τη συνάρτηση
repeating-linear-gradient,
που δημιουργεί επαναλαμβανόμενη γραμμική διαβάθμιση -
τη συνάρτηση
repeating-radial-gradient,
που δημιουργεί επαναλαμβανόμενη ακτινωτή διαβάθμιση
