CSS Radial Gradients

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

CSS Radial Gradients

Μια ακτινική κλίση ορίζεται από το κέντρο της.

Για να δημιουργήσετε μια ακτινωτή κλίση πρέπει επίσης να ορίσετε τουλάχιστον δύο χρωματικές στάσεις.

Σύνταξη

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Από προεπιλογή, το σχήμα είναι έλλειψη, το μέγεθος είναι η πιο μακρινή γωνία και η θέση είναι στο κέντρο.

Ακτινική κλίση - Σταματά το χρώμα ομοιόμορφης απόστασης (αυτό είναι προεπιλεγμένο)

Το ακόλουθο παράδειγμα δείχνει μια ακτινωτή κλίση με ομοιόμορφα διαστήματα χρωματικών στάσεων:

Παράδειγμα

   #grad {
  background-image: radial-gradient(red, yellow, green);
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>

<h1>Radial Gradient - Evenly Spaced Color Stops</h1>

<div id="grad1"></div>

</body>
</html>

Ακτινική κλίση - Διακοπή χρώματος σε διαφορετική απόσταση

Το ακόλουθο παράδειγμα δείχνει μια ακτινωτή κλίση με διαφορετικές αποστάσεις χρωμάτων:

Παράδειγμα

   #grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
</style>
</head>
<body>

<h1>Radial Gradient - Differently Spaced Color Stops</h1>

<div id="grad1"></div>

</body>
</html>

Ορισμός σχήματος

Η παράμετρος σχήματος καθορίζει το σχήμα. Μπορεί να πάρει τον κύκλο ή την έλλειψη. Η προεπιλεγμένη τιμή είναι έλλειψη.

Το ακόλουθο παράδειγμα δείχνει μια ακτινωτή κλίση με σχήμα κύκλου:

Παράδειγμα

   #grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(red, yellow, green);
}

#grad2 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>

<h1>Radial Gradient - Shapes</h1>

<h2>Ellipse (this is default):</h2>
<div id="grad1"></div>

<h2><strong>Circle:</strong></h2>
<div id="grad2"></div>

</body>
</html>

Χρήση λέξεων-κλειδιών διαφορετικού μεγέθους

Η παράμετρος size καθορίζει το μέγεθος της διαβάθμισης. Μπορεί να πάρει τέσσερις τιμές:

closest-side
farthest-side
closest-corner
farthest-corner

Παράδειγμα

Μια ακτινική κλίση με λέξεις-κλειδιά διαφορετικού μεγέθους:

   #grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, 
black);
}

#grad2 {
      background-image: radial-gradient(farthest-side at 60% 
55%, red, yellow, black);
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

#grad3 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}

#grad4 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
}
</style>
</head>
<body>

<h1>Radial Gradients - Different size keywords</h1>

<h2>closest-side:</h2>
<div id="grad1"></div>

<h2>farthest-side:</h2>
<div id="grad2"></div>

<h2>closest-corner:</h2>
<div id="grad3"></div>

<h2>farthest-corner (default):</h2>
<div id="grad4"></div>

</body>
</html>

Επανάληψη ακτινικής κλίσης

Η συνάρτηση repeating-radial-gradient() χρησιμοποιείται για την επανάληψη ακτινικών διαβαθμίσεων:

Παράδειγμα

Μια επαναλαμβανόμενη ακτινική κλίση:

   #grad {
  background-image: 
repeating-radial-gradient(red, yellow 10%, green 15%);
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>

<h1>Repeating Radial Gradient</h1>

<div id="grad1"></div>

</body>
</html>