Rezultate pentru tag: unghiuri
CSS Gradienți
Gradienți CSS
Gradienții CSS vă permit să afișați tranziții netede între două sau mai multe culori specificate.
CSS definește două tipuri de gradienți:
Gradienți liniari/Linear Gradients (coboară / în sus / stânga / dreapta / în diagonală)
Gradienți radiali/Radial Gradients (definiți de centrul lor)
Gradienți liniari CSS
Pentru a crea un gradient liniar trebuie să definiți cel puțin două opriri de culoare (color stops). Oprirea culorilor (color stops) se referă la culorile dintre care doriți să faceți tranziții netede. Puteți seta, de asemenea, un punct de plecare și o direcție (sau un unghi) împreună cu efectul de gradient.
Gradient liniar - de sus în jos (aceasta este implicit)
Gradient liniar care începe de sus. Începe roșu, iar trecerea se face la galben
Gradient liniar - de la stânga la dreapta (Linear Gradient - Left to Right)
Gradient liniar care pornește de la stânga. Începe roșu, trecerea se face la galben.
Gradient liniar - diagonală (Linear Gradient - Diagonal)
Puteți face un gradient în diagonală specificând atât pozițiile de pornire orizontale, cât și cele verticale.
Gradient liniar care începe în stânga sus (și merge spre dreapta jos). Începe roșu, trecerea se face la galben.
Utilizarea unghiurilor (Using Angles)
Dacă doriți un control mai mare asupra direcției gradientului, puteți defini un unghi, în loc de direcțiile predefinite (în jos, în sus, în dreapta, în stânga, în dreapta jos etc.).
Unghiul este specificat ca un unghi între o linie orizontală și linia de gradient.
Modul de utilizare a unghiurilor pe gradienți liniari.
Folosirea mai multor opriri de culori (Using Multiple Color Stops)
Un gradient liniar (de sus în jos) cu mai multe opriri de culoare(multiple color stops).
Un gradient liniar (de la stânga la dreapta) cu culoarea curcubeului și cu un text.
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ță).
Un gradient liniar care pornește de la stânga. Începe complet transparent, trecând la roșu complet.
Repetarea unui gradient liniar (Repeating a linear-gradient)
Funcția repeating-linear-gradient() este utilizată pentru a repeta gradienți liniari:
Gradienți radiali CSS (CSS Radial Gradients)
Un gradient radial este definit de centrul său.
Pentru a crea un gradient radial trebuie să definiți, de asemenea, cel puțin două opriri de culoare (color stops).
În mod implicit, forma este de elipsă, dimensiunea este cea mai îndepărtată de colț, iar poziția este centrală.
Gradient radial - Opriri uniforme ale culorilor/ Radial Gradient - Evenly Spaced Color Stops (aceasta este implicită)
Un gradient radial cu opriri uniforme de culoare distanțate.
Gradient radial - Opriri de culori distanțate diferit / Radial Gradient - Differently Spaced Color Stops
Un gradient radial cu opriri de culoare distanțate diferit.
Setați forma (Set Shape)
Parametrul shape definește forma. Poate lua cercul de valori sau elipsa. Valoarea implicită este elipsa.
Un gradient radial sub forma unui cerc.
Utilizarea cuvintelor cheie de dimensiuni diferite (Use of Different Size Keywords)
Parametrul size definește dimensiunea gradientului. Poate lua patru valori: closest-side, farthest-side, closest-corner, farthest-corner.
Un gradient radial cu cuvinte cheie de dimensiuni diferite.
Repetarea unui gradient radial (Repeating a radial-gradient)
Funcția repeating-radial-gradient() este utilizată pentru a repeta gradienți radiali.
Proprietăți CSS pentru gradient
background-image - Setează una sau mai multe imagini de fundal pentru un element.
CSS Transformări 2D
Transformări 2D CSS
Transformările CSS vă permit să vă deplasați, să rotiți, să scalați și să înlăturați elemente.
Proprietăți CSS: transform.
Asistență browser (Browser Support)
Numerele din tabel specifică prima versiune a browserului care acceptă integral proprietatea.
Prefixuri specifice browserului
Unele browsere mai vechi au nevoie de prefixe specifice (-ms- sau -webkit-) pentru a înțelege proprietățile de transformare 2D.
CSS Metode de transformare 2D
Cu proprietatea de transformare CSS puteți utiliza următoarele metode de transformare 2D: translate(), rotate(), scaleX(), scaleY(), scale(), skewX(), skewY(), skew(), matrix()
Metoda translate() mută un element din poziția sa curentă (în funcție de parametrii indicați pentru axa X și axa Y).
Metoda rotate() roteste un element în sensul acelor de ceasornic sau în sens contrar acelor de ceasornic, în conformitate cu un anumit grad.
Utilizarea valorilor negative va roti elementul în sensul acelor de ceasornic.
Metoda scale() crește sau scade dimensiunea unui element (în funcție de parametrii dați pentru lățime și înălțime).
Metoda scaleX() crește sau scade lățimea unui element.
Metoda scaleY() crește sau scade înălțimea unui element.
Metoda skewX() frânează un element de-a lungul axei X cu unghiul dat.
Metoda skewY() frânează un element de-a lungul axei Y de unghiul dat.
Metoda skew() frânează un element de-a lungul axelor X și Y de unghiurile date.
Metoda matrix() combină toate metodele de transformare 2D într-una.
Metoda matrix() ia șase parametri, care conțin funcții matematice, ceea ce vă permite să rotiți, să scalați, să mutați (să translați) și să înlăturați elemente.
Parametrii sunt următorii: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Proprietăți de transformare CSS
transform - Aplică o transformare 2D sau 3D la un element.
transform-origin - Vă permite să schimbați poziția asupra elementelor transformate.
CSS Metode de transformare 2D
matrix(n, n, n, n, n, n) - Definește o transformare 2D, folosind o matrice de șase valori
translate(x, y) - Definește o transformare 2D, mutând elementul de-a lungul axei X și Y
translateX(n) - Definește o transformare 2D, mutând elementul de-a lungul axei X
translateY(n) - Definește o transformare 2D, mutând elementul de-a lungul axei Y
scale(x, y) - Definește o transformare la scară 2D, modificând lățimea și înălțimea elementelor
scaleX(n) - Definește o transformare la scară 2D, modificând lățimea elementului
scaleY(n) - Definește o transformare la scară 2D, schimbând înălțimea elementului
rotate(angle) - Definește o rotație 2D, unghiul este specificat în parametru
skew(angle x, angle y) - Definește o transformare în 2D de-a lungul axei X și Y
skewX(angle) - Definește o transformare în 2D de-a lungul axei X
skewY(angle) - Definește o transformare în 2D de-a lungul axei Y
