Rezultate pentru tag: tranzitii
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 Tranziții
Tranziții CSS
Tranzițiile CSS vă permit să modificați valorile proprietății fără probleme, pe o durată dată.
În acest capitol veți afla despre următoarele proprietăți: transition, transition-delay, transition-duration, transition-property, transition-timing-function
Asistență browser pentru tranziții
Prefixuri specifice browserului
Unele browsere mai vechi au nevoie de prefixuri specifice (-webkit-) pentru a înțelege proprietățiile de tranziție
Cum se utilizează tranzițiile CSS?
Pentru a crea un efect de tranziție, trebuie să specificați două lucruri:
proprietatea CSS la care doriți să adăugați un efect
durata efectului
Dacă partea de durată nu este specificată, tranziția nu va avea nici un efect, deoarece valoarea implicită este 0.
Un element <div> 100px * 100px red. Elementul <div> a specificat, de asemenea, un efect de tranziție pentru proprietatea de lățime, cu o durată de 2 secunde.
Efectul de tranziție va începe atunci când proprietatea CSS (lățimea/width) specificată modifică valoarea.
Acum, să specificăm o nouă valoare pentru proprietatea de lățime/width atunci când un utilizator se alătură peste elementul <div>:
Atunci când cursorul se decuplează din element, acesta se va schimba treptat înapoi la stilul său original.
Modificați mai multe valori ale proprietății
Efect de tranziție atât pentru proprietatea lățimii (width), cât și pentru înălțime (height), cu o durată de 2 secunde pentru lățime (width) și 4 secunde pentru înălțime (height).
Specificați curba de viteză (speed curve) a tranziției
Proprietatea transition-timing-function specifică curba de viteză (speed curve) a efectului de tranziție.
Proprietatea transition-timing-function poate avea următoarele valori:
ease - specifică un efect de tranziție cu început lent, apoi rapid, apoi sfârșit lent (acest lucru este implicit)
linear - specifică un efect de tranziție cu aceeași viteză de la început până la sfârșit
ease-in - specifică un efect de tranziție cu pornire lentă
ease-out - specifică un efect de tranziție cu sfârșit lent
ease-in-out - specifică un efect de tranziție cu început și sfârșit lent
cubic-bezier(n,n,n,n) - vă permite să definiți propriile valori într-o funcție cub-bezier
Întârzie efectul de tranziție (Delay the Transition Effect)
Proprietatea transition-delay specifică o întârziere (în secunde) pentru efectul de tranziție.
Tranziție + transformare (Transition + Transformation)
Proprietățiile CSS transition pot fi specificate una câte una
Proprietatea shorthand transition
Proprietăți CSS transition:
transition - O proprietate scurtă pentru setarea celor patru proprietăți de tranziție într-o singură proprietate
transition-delay - Specifică o întârziere (în secunde) pentru efectul de tranziție
transition-duration - Specifică câte secunde sau milisecunde durează un efect de tranziție
transition-property - Specifică numele proprietății CSS pentru care este efectul de tranziție
transition-timing-function - Specifică curba de viteză a efectului de tranziție
