CSS Lastnost: conic-gradient()

Funkcija conic-gradient() ustvari stožčasti gradient, kjer barve prehajajo okoli središčne točke. Za razliko od radialnega gradienta, kjer barve izhajajo iz središča navzven, se pri stožčastem gradientu barve vrtijo okoli središča. Ta vrsta gradienta je posebej primerna za ustvarjanje barvnih koles, krožnih diagramov in drugih krožnih vzorcev.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Primeri uporabe conic-gradient()</title>
    <style>
        .gradient-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 20px 0;
        }

        .gradient-box {
            width: 200px;
            height: 200px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }

        .color-wheel {
            background: conic-gradient(
                from 0deg,
                red, 
                yellow, 
                lime, 
                cyan, 
                blue, 
                magenta, 
                red
            );
            border-radius: 50%;
        }

        .pie-chart {
            background: conic-gradient(
                from 0deg,
                #FF6B6B 0deg 90deg,
                #4ECDC4 90deg 180deg,
                #45B7D1 180deg 270deg,
                #96CEB4 270deg
            );
            border-radius: 50%;
        }

        .radar {
            background: conic-gradient(
                from 0deg at 50% 50%,
                rgba(255, 255, 255, 0.8) 0deg,
                transparent 60deg,
                rgba(255, 255, 255, 0.8) 120deg,
                transparent 180deg,
                rgba(255, 255, 255, 0.8) 240deg,
                transparent 300deg,
                rgba(255, 255, 255, 0.8) 360deg
            ),
            #2C3E50;
        }

        .sunburst {
            background: conic-gradient(
                from 45deg,
                #FFD93D 0deg 40deg,
                transparent 40deg 50deg,
                #FFD93D 50deg 90deg,
                transparent 90deg 100deg,
                #FFD93D 100deg 140deg,
                transparent 140deg 150deg,
                #FFD93D 150deg 190deg,
                transparent 190deg 200deg,
                #FFD93D 200deg 240deg,
                transparent 240deg 250deg,
                #FFD93D 250deg 290deg,
                transparent 290deg 300deg,
                #FFD93D 300deg 340deg,
                transparent 340deg 350deg,
                #FFD93D 350deg
            );
        }
    </style>
</head>
<body>
    <h2>Osnovni primeri conic-gradient()</h2>
    <div class="gradient-container">
        <div class="gradient-box color-wheel">
            Barvno kolo
        </div>
        
        <div class="gradient-box pie-chart">
            Tortni diagram
        </div>
        
        <div class="gradient-box radar">
            Radar efekt
        </div>
        
        <div class="gradient-box sunburst">
            Sončni žarki
        </div>
    </div>

    <h3>Razlaga primerov:</h3>
    <ul>
        <li><strong>Barvno kolo:</strong> Prikazuje gladek prehod med osnovnimi barvami.</li>
        <li><strong>Tortni diagram:</strong> Demonstrira uporabo kotov za ustvarjanje delov diagrama.</li>
        <li><strong>Radar efekt:</strong> Kombinira prosojnost in ponavljajoč vzorec.</li>
        <li><strong>Sončni žarki:</strong> Prikazuje izmenjavanje barve in prosojnosti za posebne učinke.</li>
    </ul>
</body>
</html>

REZULTAT