Gradienți CSS. Utilizarea transparenței. Repetarea unui gradient liniar. Funcția repeating-linear-gradient().
Utilizarea transparenței (Using Transparency)
De asemenea, gradienții CSS acceptă transparența, care poate fi utilizată pentru a crea efecte de decolorare.
Pentru a adăuga transparență, folosim funcția rgba() pentru a defini oprirea culorii (color stops). Ultimul parametru din funcția rgba () poate fi o valoare de la 0 la 1 și definește transparența culorii: 0 indică transparență completă, 1 indică culoarea completă (fără transparență).
Următorul exemplu arată un gradient liniar care pornește de la stânga. Începe complet transparent, trecând la roșu complet:
Exemplu:
Repetarea unui gradient liniar (Repeating a linear-gradient)
Funcția repeating-linear-gradient() este utilizată pentru a repeta gradienți liniari:
Exemplu:
Un gradient liniar repetat:
De asemenea, gradienții CSS acceptă transparența, care poate fi utilizată pentru a crea efecte de decolorare.
Pentru a adăuga transparență, folosim funcția rgba() pentru a defini oprirea culorii (color stops). Ultimul parametru din funcția rgba () poate fi o valoare de la 0 la 1 și definește transparența culorii: 0 indică transparență completă, 1 indică culoarea completă (fără transparență).
Următorul exemplu arată un gradient liniar care pornește de la stânga. Începe complet transparent, trecând la roșu complet:
Exemplu:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Repetarea unui gradient liniar (Repeating a linear-gradient)
Funcția repeating-linear-gradient() este utilizată pentru a repeta gradienți liniari:
Exemplu:
Un gradient liniar repetat:
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}