ildar-k
7/18/2019 - 8:38 PM

Gradient

.box {
        width: 20rem;
        height: 20rem;
        // gradient peab olema background-image, saab anda sellele algusvärv, lõppvärv ja vahepealsed värvid. Värvi järel protsendi või mõnes muutühikus suurust andes saab määrata, kus on värvi alguspunkt
        // background-image: linear-gradient(#2e3192, #1bffff);
        // saab anda gradiendi suunda ja alguspunkti
        // background-image: linear-gradient(to top right, #2e3192, #1bffff);
        // gradient võib olla kas radial või linear
        // background-image: radial-gradient(#2e3192 50%, #1bffff);
        // Selleks, et värvid läheks järsult üle ühest teiseks peab esimese värvi alguspunkt ühtima teise värvi alguspunktiga
        // background-image: radial-gradient( black 10%, yellow 10%, yellow 20%, black 20%);
        // Kui on vaja, et gradiendis värvid korduks pidevalt saab kasutada repeating gradient.
        // background-image: repeating-linear-gradient( 45deg, black 10px, yellow, yellow 10px, black 20px);
        background-color: #db7a5a;
        // olemasoleva värvi tumedamaks gradiendiks muutmiseks anname algusvärviks musta ja täiesti läbipaistev ning lõppvärv on must ja läbipaistvus vastavalt vajadusele
        // background-image: linear-gradient( 145deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
        // sama toimib ka heledamaks gradiendiks muutmisel, kuid alg-ja lõppvärv on valge
        background-image: linear-gradient( 145deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
    }