CSS Conic Gradients

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

CSS Conic Gradients

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

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

Σύνταξη

background-image: conic-gradient([from angle] [at position,] color 
  [degree], color [degree], ...);

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

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

Κωνική κλίση: Τρία χρώματα

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

Παράδειγμα

Μια κωνική κλίση με τρία χρώματα:

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

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

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

<h1>Conic Gradient - Three Colors</h1>

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

</body>
</html>

Κωνική κλίση: Πέντε χρώματα

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

Παράδειγμα

Μια κωνική κλίση με πέντε χρώματα:

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

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

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

<h1>Conic Gradient - Five Colors</h1>

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

</body>
</html>

Κωνική κλίση: Τρία χρώματα και μοίρες

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

Παράδειγμα

Μια κωνική κλίση με τρία χρώματα και μια μοίρα για κάθε χρώμα:

   #grad {
  background-image: conic-gradient(red 45deg, yellow 
    90deg, green 210deg);
}

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

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

<h1>Conic Gradient - Defined degree for each color</h1>

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

</body>
</html>

Δημιουργήστε γραφήματα πίτας

Απλώς προσθέστε border-radius: 50% για να κάνετε την κωνική διαβάθμιση να μοιάζει με πίτα:

Παράδειγμα

   #grad {
  background-image: conic-gradient(red, yellow, green, blue, 
    black);
  
    border-radius: 50%;
}

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

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

<h1>Conic Gradient - Pie Chart</h1>

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

</body>
</html>

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

Παράδειγμα

   #grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 
    180deg, green 180deg, green 270deg, blue 270deg);
  
    border-radius: 50%;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - Pie Chart</h1>

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

</body>
</html>

Κωνική κλίση με καθορισμένο από γωνία

Το [from γωνία] καθορίζει μια γωνία που ολόκληρη η κωνική κλίση είναι περιστρέφεται από.

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

Παράδειγμα

Μια κωνική κλίση με μια από γωνία:

   #grad {
  background-image: conic-gradient(from 90deg, red, yellow, 
    green);
}

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

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - With a from angle</h1>

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

</body>
</html>

Κωνική κλίση με καθορισμένη κεντρική θέση

Το [στη θέση] καθορίζει το κέντρο της κωνικής κλίσης.

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

Παράδειγμα

Μια κωνική κλίση με καθορισμένη κεντρική θέση:

   #grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, 
    green);
}

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

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

<h1>Conic Gradient - With a specified center position</h1>

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

</body>
</html>

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

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

Παράδειγμα

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

   #grad {
  background-image: 
repeating-conic-gradient(red 10%, yellow 20%);
  
    border-radius: 50%;
}

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

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

<h1>Repeating a Conic Gradient</h1>

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

</body>
</html>

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

Παράδειγμα

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

   #grad {
  background-image: 
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
  
    border-radius: 50%;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Repeating a Conic Gradient with color-starts and -stops</h1>

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

</body>
</html>

CSS Gradient Λειτουργίες

Ο παρακάτω πίνακας παραθέτει τις συναρτήσεις διαβάθμισης CSS:

conic-gradient(): Δημιουργεί μια κωνική κλίση. Ορίστε τουλάχιστον δύο χρώματα (γύρω από ένα κεντρικό σημείο)
linear-gradient(): Δημιουργεί μια γραμμική κλίση. Ορίστε τουλάχιστον δύο χρώματα (από πάνω προς τα κάτω)
radial-gradient(): Δημιουργεί μια ακτινωτή κλίση. Ορίστε τουλάχιστον δύο χρώματα (από το κέντρο προς τις άκρες)
repeating-conic-gradient(): Επαναλαμβάνει μια κωνική κλίση
repeating-linear-gradient(): Επαναλαμβάνει μια γραμμική κλίση
repeating-radial-gradient(): Επαναλαμβάνει μια ακτινωτή κλίση