Funcția CSS conic-gradient()
Într-un gradient conic, culorile se rotesc în jurul unui punct central.
Funcția CSS conic-gradient() creează acest tip de gradient și are nevoie de cel puțin două culori.
Sintaxa gradientului conic
Dacă le omiți, unghiul revine la 0deg, iar poziția revine la center.
Culorile fără un grad sunt distribuite egal în jurul punctului central.
styles.css
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
Gradient Conic: Trei Culori
Următorul exemplu creează un gradient din trei culori.
Exemplu
Roșu, galben și verde împart cercul în mod egal:
Prompt
Creează o pagină cu un div care folosește un gradient conic cu trei culori: roșu, galben și verde. Div-ul trebuie să fie 200px pe 200px.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic Gradient - Three Colors</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(red, yellow, green);
}
</style>
</head>
<body>
<h2>Conic Gradient - Three Colors</h2>
<div id="grad"></div>
</body>
</html>
Gradient Conic: Cinci Culori
Adăugarea mai multor culori funcționează la fel, iar acest gradient folosește cinci.
Exemplu
Roșu, galben, verde, albastru și negru în jurul unui singur punct central:
Prompt
Creează o pagină cu un div care folosește un gradient conic cu cinci culori: roșu, galben, verde, albastru și negru. Div-ul trebuie să fie 200px pe 200px.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic Gradient - Five Colors</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(red, yellow, green, blue, black);
}
</style>
</head>
<body>
<h2>Conic Gradient - Five Colors</h2>
<div id="grad"></div>
</body>
</html>
Gradient Conic: Trei Culori și Grade
Fiecare dintre cele trei culori de mai jos are și propriul grad.
Exemplu
Aici roșu primește 45deg, galben 90deg, iar verde 210deg:
Prompt
Creează o pagină cu un div care folosește un gradient conic cu trei culori la grade specifice: roșu la 45deg, galben la 90deg și verde la 210deg. Div-ul trebuie să fie 200px pe 200px.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic Gradient - Three Colors and Degrees</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
</style>
</head>
<body>
<h2>Conic Gradient - Three Colors and Degrees</h2>
<div id="grad"></div>
</body>
</html>
Crearea Diagramelor Circulare
Ca să faci un gradient conic să arate ca o diagramă circulară, trebuie doar să adaugi border-radius: 50%.
Diagramă circulară de bază
Prompt
Creează o pagină cu un div care folosește un gradient conic cu cinci culori (roșu, galben, verde, albastru, negru) și border-radius 50% pentru a arăta ca o diagramă circulară. Div-ul trebuie să fie 200px pe 200px.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pie Chart with Conic Gradient</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Pie Chart with Conic Gradient</h2>
<div id="grad"></div>
</body>
</html>
Diagramă circulară cu grade definite
Toate culorile din această a doua diagramă circulară au grade definite:
Prompt
Creează o pagină cu un div care folosește un gradient conic cu opriri de culoare definite pentru a crea o diagramă circulară cu patru secțiuni: roșu 0-90deg, galben 90-180deg, verde 180-270deg, albastru 270-360deg. Folosește border-radius 50%. Div-ul trebuie să fie 200px pe 200px.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pie Chart with Defined Degrees</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Pie Chart with Defined Degrees</h2>
<div id="grad"></div>
</body>
</html>
Gradient Conic cu Unghi de Pornire Specificat
Ca să rotești întregul gradient conic cu un anumit unghi, completează [from angle].
Exemplu
Aici întregul gradient este rotit cu un unghi de pornire de 90deg:
Prompt
Creează o pagină cu un div care folosește un gradient conic care începe de la 90 de grade, cu trei culori: roșu, galben și verde. Div-ul trebuie să fie 200px pe 200px.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic Gradient - From Angle</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(from 90deg, red, yellow, green);
}
</style>
</head>
<body>
<h2>Conic Gradient - From Angle</h2>
<div id="grad"></div>
</body>
</html>
Gradient Conic cu Poziție a Centrului Specificată
De mutarea centrului gradientului conic se ocupă [at position].
Exemplu
Aici poziția centrului este mutată la 60% 45%:
Prompt
Creează o pagină cu un div care folosește un gradient conic cu poziția centrului la 60% 45%, cu trei culori: roșu, galben și verde. Div-ul trebuie să fie 200px pe 200px.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic Gradient - Center Position</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(at 60% 45%, red, yellow, green);
}
</style>
</head>
<body>
<h2>Conic Gradient - Center Position</h2>
<div id="grad"></div>
</body>
</html>
Funcția CSS repeating-conic-gradient()
Când un gradient conic trebuie să se repete, folosește funcția CSS repeating-conic-gradient().
Gradient repetat de bază
Roșu și galben care se repetă în jurul centrului:
Prompt
Creează o pagină cu un div care folosește un gradient conic repetat cu roșu la 10% și galben la 20%, cu border-radius 50%. Div-ul trebuie să fie 200px pe 200px.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repeating Conic Gradient</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Repeating Conic Gradient</h2>
<div id="grad"></div>
</body>
</html>
Gradient repetat cu opriri de culoare
Fiecare culoare din acest gradient repetat are definite pornirea și oprirea de culoare:
Prompt
Creează o pagină cu un div care folosește un gradient conic repetat cu porniri și opriri de culoare definite: roșu 0deg 10deg, galben 10deg 20deg, albastru 20deg 30deg. Folosește border-radius 50%. Div-ul trebuie să fie 200px pe 200px.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repeating Conic Gradient with Color Stops</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Repeating Conic Gradient with Color Stops</h2>
<div id="grad"></div>
</body>
</html>
Funcțiile de Gradient CSS
Iată toate funcțiile de gradient CSS și ce face fiecare:
conic-gradient()- Creează un gradient conic în jurul unui punct central. Sunt necesare cel puțin două culori.linear-gradient()- Creează un gradient liniar de sus în jos. Sunt necesare cel puțin două culori.radial-gradient()- Creează un gradient radial din centru spre margini. Sunt necesare cel puțin două culori.repeating-conic-gradient()- Face un gradient conic să se repete.repeating-linear-gradient()- Face un gradient liniar să se repete.repeating-radial-gradient()- Face un gradient radial să se repete.