CSS Lastnost: repeating-linear-gradient()

Funkcija repeating-linear-gradient() ustvari vzorec, kjer se linearni gradient periodično ponavlja. To je posebej uporabno za ustvarjanje črtastih vzorcev, progastih ozadij in drugih ponavljajočih se linearnih efektov, ne da bi morali definirati vsako progo posebej.
PRIMER
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Primeri repeating-linear-gradient()</title>
    <style>
        .pattern-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .pattern-box {
            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);
            transition: transform 0.3s ease;
        }

        .pattern-box:hover {
            transform: scale(1.05);
        }

        /* Osnovne črte */
        .pattern-1 {
            background: repeating-linear-gradient(
                45deg,
                #ff6b6b 0px,
                #ff6b6b 10px,
                #4ecdc4 10px,
                #4ecdc4 20px
            );
        }

        /* Progasta zastava */
        .pattern-2 {
            background: repeating-linear-gradient(
                to right,
                #ff6b6b 0px,
                #ff6b6b 30px,
                #ffffff 30px,
                #ffffff 60px
            );
        }

        /* Mavrični vzorec */
        .pattern-3 {
            background: repeating-linear-gradient(
                -45deg,
                #ff6b6b 0px,
                #ff6b6b 20px,
                #ffe66d 20px,
                #ffe66d 40px,
                #4ecdc4 40px,
                #4ecdc4 60px
            );
        }

        /* Prosojne črte */
        .pattern-4 {
            background: repeating-linear-gradient(
                0deg,
                rgba(78, 205, 196, 0.5) 0px,
                rgba(78, 205, 196, 0.5) 10px,
                transparent 10px,
                transparent 20px
            ),
            #2c3e50;
        }

        /* Gradient z mehkimi prehodi */
        .pattern-5 {
            background: repeating-linear-gradient(
                90deg,
                #ff6b6b 0%,
                #4ecdc4 50%,
                #ff6b6b 100% 
            );
            background-size: 200% 100%;
            animation: slide 3s linear infinite;
        }

        /* Zebra vzorec */
        .pattern-6 {
            background: repeating-linear-gradient(
                -45deg,
                #000 0px,
                #000 10px,
                #fff 10px,
                #fff 20px
            );
        }

        /* Animacija za pattern-5 */
        @keyframes slide {
            0% {
                background-position: 100% 0;
            }
            100% {
                background-position: -100% 0;
            }
        }

        /* Interaktivni gumb */
        .striped-button {
            padding: 15px 30px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            background: repeating-linear-gradient(
                45deg,
                #ff6b6b 0px,
                #ff6b6b 10px,
                #4ecdc4 10px,
                #4ecdc4 20px
            );
            transition: all 0.3s ease;
        }

        .striped-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            background: repeating-linear-gradient(
                -45deg,
                #ff6b6b 0px,
                #ff6b6b 10px,
                #4ecdc4 10px,
                #4ecdc4 20px
            );
        }

        .striped-button span {
            color: white;
            font-weight: bold;
            mix-blend-mode: difference;
        }
    </style>
</head>
<body>
    <h2>Osnovni primeri repeating-linear-gradient()</h2>
    <div class="pattern-container">
        <div class="pattern-box pattern-1">
            Poševne črte
        </div>
        
        <div class="pattern-box pattern-2">
            Progasta zastava
        </div>
        
        <div class="pattern-box pattern-3">
            Mavrični vzorec
        </div>
        
        <div class="pattern-box pattern-4">
            Prosojne črte
        </div>
        
        <div class="pattern-box pattern-5">
            Animirani gradient
        </div>
        
        <div class="pattern-box pattern-6">
            Zebra vzorec
        </div>
    </div>

    <h3>Interaktivni primer</h3>
    <button class="striped-button">
        <span>Črtasti gumb</span>
    </button>

    <h3>Razlaga primerov:</h3>
    <ul>
        <li><strong>Poševne črte:</strong> Osnovni vzorec s poševnimi črtami pod kotom 45 stopinj</li>
        <li><strong>Progasta zastava:</strong> Vodoravne proge enake širine</li>
        <li><strong>Mavrični vzorec:</strong> Kompleksnejši vzorec s tremi barvami</li>
        <li><strong>Prosojne črte:</strong> Kombinacija prosojnih črt z osnovnim ozadjem</li>
        <li><strong>Animirani gradient:</strong> Dinamični gradient z neskončno animacijo</li>
        <li><strong>Zebra vzorec:</strong> Klasični črno-beli vzorec</li>
        <li><strong>Črtasti gumb:</strong> Interaktivni element s spremembo smeri črt ob prehodu miške</li>
    </ul>
</body>
</html>
REZULTAT