Animație cu mișcare lină folosind CSS. Animarea fără probleme a obiectelor folosind numai CSS (5 exemple)

si asta e! Să vedem cum arată în realitate.

Mai întâi marcajul HTML. Este foarte simplu pentru că lucrăm doar cu un element pe pagină.

1	<div class = "laSmallWidth" >

Și iată ce este în fișierul de stil:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth ( marja : 20px automat ; /*marginile externe în partea de sus și de jos de 20px și alinierea în mijloc*/ fundal: roșu; /*fondul roșu al blocului*/înălțime: 100px; /*înălțimea blocului 100px*/ latime: 800px; /*latime initiala 800px*/-webkit-animation-name : animWidthSitehere; -webkit-animatie-durata : 5s; /* proprietate cu un prefix pentru browserele Chrome, Safari, Opera */ animation-name: animWidthSitehere; /* indică numele cadrelor cheie (situate mai jos)*/ animatie-durata: 5s; /*setează durata animației*/ } /* cadre cheie cu prefix pentru browserele Chrome, Safari, Opera */ @-webkit-keyframes animWidthSiteici ( de la (lățime: 800px;) la (lățime: 100px;)) @keyframes animWidthSiteaici ( de la (lățime: 800px;) /*primul cadru cheie în care lățimea blocului este de 800 px*/ la (lățime: 100px;) /*ultimul cadru cheie, unde lățimea blocului este de 100px*/ }

După cum puteți vedea, am specificat doar primul și ultimul cadru cheie, iar toate cele intermediare au fost „construite” automat.

Prima animație CSS3 este gata. Pentru a consolida cunoștințele acumulate, creați un document HTML și un fișier CSS și introduceți acolo (sau mai bine, introduceți-l manual) codul din exemplu. Atunci cu siguranță vei înțelege totul. Apoi încercați același lucru cu înălțimea blocului (ar trebui să scadă în înălțime) pentru a asigura materialul.

3. Exemple de animație CSS3 mai complexe

Mai sus ați învățat cum să creați cu ușurință animație CSS3. Dacă ați încercat să faceți acest lucru cu propriile mâini, ați înțeles deja întregul proces și acum doriți să aflați cum puteți crea o animație mai complexă și mai frumoasă. Și chiar este posibil să-l creezi. Mai jos sunt 3 lecții în care animația este creată în același mod ca în exemplul de mai sus.

3 lecții despre animația CSS (transformări)

Lecțiile vă vor ajuta să înțelegeți și mai bine animația CSS. Principalul lucru este să încerci să repeți ceea ce vezi în lecții. Sau măcar încercați să schimbați valorile proprietății și să vedeți ce se întâmplă, atunci veți deveni mai puțin frică de CSS.

Această colecție conține cele mai bune și de cea mai înaltă calitate funcții CSS. Aici puteți găsi exemple și tehnici demonstrative diverse și uimitoare de la designeri și designeri de layout celebri care încearcă să demonstreze că acum este posibil să faceți aproape totul folosind doar CSS pur. De asemenea, puteți găsi aici câteva lecții care vă spun în detaliu cum să realizați o astfel de creație. Sper că această colecție vă va fi de folos.

CSS nori 3D

În această demonstrație, veți putea crea și edita nori fantastici în 3D. Aceste nori CSS ne arată clar că posibilitățile tehnologiilor web sunt aproape nelimitate.

Logo-uri CSS pure

Acestea sunt exemple de logo-uri realizate numai cu CSS pur. Gândește-te la asta, nu au fost folosite imagini la crearea sa. E doar ceva.

Alfabet cu animație CSS

Exemplu minunat și artistic de utilizare a CSS în alfabet

Navigare 3D pentru site

O bară de navigare simplă, dar foarte elegantă pentru site, bineînțeles realizată folosind doar CSS3. fără imagini sau scripturi.

Doodle Google cu CSS

Unul dintre numeroasele doodle-uri din motorul de căutare Google, realizat în CSS. Acesta este un exemplu excelent de bună utilizare a animației CSS.

Glisor

Un glisor de imagine bine realizat și de înaltă calitate. Plus 4 exemple în demo.

Inel dublu animat

Un inel frumos animat și multicolor, cu puțin cod CSS

Estompare în CSS

Mi se pare că acest filtru este foarte necesar, mai ales că este realizat folosind CSS pur. Folosind estomparea, puteți atrage atenția utilizatorului asupra unui anumit punct.

Ghidul complet pentru Flexbox

Acest articol este despre blocurile Flexbox receptive. Vorbește complet despre aceste blocuri, deși articolul este în engleză.

Meniu colorat și animat pe CSS3

Un meniu derulant frumos pentru un site web cu pictograme. Un mare plus este că este realizat în întregime în CSS.

filtre CSS

Material de înaltă calitate în limba engleză, care vorbește despre utilizarea filtrelor CSS pe imagini.

Forme CSS

O postare despre formularele CSS cu numeroase exemple

Bare de progres în CSS

O lecție despre cum să creați bare de progres elegante folosind CSS pur și animație. De asemenea, puteți să vă uitați la exemplu și să descărcați sursele.

Animație - Animate.css

Cel mai popular proiect de animație CSS de pe Internet astăzi. Și probabil cel mai simplu și de cea mai înaltă calitate, și, de asemenea, gratuit.

Indicatori de încărcare - Spinkit

Sincer să fiu, acești indicatori au fost deja văzuți pe blog, dar mi se pare că merită să vă arăt din nou. Pentru că aceștia sunt cei mai frumoși indicatori CSS de pe Internet.

Butoane

În zilele noastre este greu să surprinzi cu butoanele CSS, dar aceasta este o opțiune destul de decentă

Generator pentru crearea comutatoarelor

O aplicație de internet mică și de înaltă calitate cu care puteți crea comutatoare frumoase pentru a fi utilizate pe site.

Sfaturi instrumente

Biblioteca CSS pentru sfaturi gratuite - Hint.css

Scheme de culori

Scheme de culori pentru persoanele cărora nu le place să sape în cod

| 18.02.2016

CSS3 deschide posibilități nelimitate pentru designerii UI, iar principalul avantaj este că aproape orice idee poate fi implementată și adusă la viață cu ușurință fără a recurge la utilizarea JavaScript.

Este uimitor cât de simple lucruri pot anima o pagină web obișnuită și o pot face mai accesibilă pentru utilizatori. Vorbim despre tranziții CSS3, cu care poți permite unui element să se transforme și să schimbe stilul, de exemplu, la hover. Cele nouă exemple de animație CSS3 disponibile mai jos vă vor ajuta să creați o senzație de receptivitate pe site-ul dvs., precum și să îmbunătățiți aspectul general al paginii cu tranziții frumoase și netede.

Pentru informații mai detaliate, puteți descărca arhiva cu fișiere.

Toate efectele funcționează folosind proprietatea de tranziție. tranziție- „tranziție”, „transformare”) și pseudo-clasa:hover, care determină stilul elementului atunci când cursorul mouse-ului trece peste el (în tutorialul nostru). Pentru exemplele noastre, am folosit un div de 500x309 px, o culoare inițială de fundal de #6d6d6d și o durată de tranziție de 0,3 secunde.

Corp > div ( lățime: 500px; înălțime: 309px; fundal: #6d6d6d; -webkit-transition: toate 0.3s ease;; -moz-transition: toate 0.3s ease;; -o-transition: toate 0.3s ease;; tranziție: toate 0.3s ușurință)

1. Schimbați culoarea la trecerea cursorului

Pe vremuri, implementarea unui astfel de efect a fost o treabă destul de minuțioasă, cu calcule matematice ale anumitor valori RGB. Acum este suficient să scrieți un stil CSS în care trebuie să adăugați o pseudo-clasă:hover la selector și să setați o culoare de fundal care va înlocui fără probleme (în 0,3 secunde) culoarea originală de fundal atunci când treceți cu mouse-ul peste bloc:

Culoare: hover ( fundal:#53ea93; )

2. Aspectul cadrului

O transformare interesantă și izbitoare este cadrul interior care apare fără probleme atunci când treceți cu mouse-ul. Potrivit pentru decorarea diferitelor nasturi. Pentru a obține acest efect, folosim pseudo-class:hover și proprietatea box-shadow cu parametrul inset (setează umbra în interiorul elementului). În plus, va trebui să setați întinderea umbrei (în cazul nostru este de 23 px) și culoarea acesteia:

Border:hover (box-shadow: insert 0 0 0 23px #53ea93; )

3. Leagăn

Această animație CSS este o excepție, deoarece proprietatea de tranziție nu este folosită aici. În schimb am folosit:

• @keyframes este o directivă de bază pentru crearea animației CSS cadru cu cadru, care vă permite să faceți așa-numita. storyboard și descrie animația ca o listă de puncte cheie;
• animation and animation-iteration-count - proprietati pentru setarea parametrilor de animatie (durata si viteza) si numarul de cicluri (repetitii). În cazul nostru, repetați 1.

@-webkit-keyframes swing ( 15% ( -webkit-transform: translateX(9px); transform: translateX(9px); ) 30% ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); transform: translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); transform: translateX(-6px); ) 65% ( -webkit -transform: translateX(3px); transform: translateX(3px) 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) ) @keyframes swing ( 15% ( -webkit-transform: translateX() 9px); transform: translateX(9px) 30% ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); (6px); ) 50% ( -webkit-transform: translateX(-6px); transform: translateX(-6px); ) 65% ( -webkit-transform: translateX(3px); transform: translateX(3px); ) 100 % ( -webkit-transform: translateX(0); transform: translateX(0); ) ) .swing:hover ( -webkit-animation: swing 0.6s ease; animație: swing 0.6s ușurință; -webkit-animație-număr-iterații: 1; animație-număr-iterație: 1; )

4. Atenuare

Efectul de estompare este în esență o simplă schimbare a transparenței unui element. Animația este creată în două etape: mai întâi trebuie să setați starea inițială de transparență la 1 - adică opacitatea completă, apoi specificați valoarea acesteia atunci când treceți mouse-ul - 0,6:

Fade ( opacitate: 1; ) .fade:hover ( opacitate: 0,6; )

Pentru rezultatul opus, schimbați valorile:

5. Mărire

Pentru a mări blocul atunci când trecem cu mouse-ul peste, vom folosi proprietatea transform și o vom seta la scale(1.2) . În acest caz, blocul va crește cu 20 la sută, menținându-și proporțiile:

Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )

6. Reducere

A face un element mai mic este la fel de ușor ca și a-l mări. Dacă în al cincilea punct pentru a mări scara trebuia să specificăm o valoare mai mare decât 1, atunci pentru a reduce blocul vom specifica pur și simplu o valoare care va fi mai mică de unu, de exemplu, scale(0,7) . Acum, când treceți mouse-ul, blocul se va micșora proporțional cu 30% din dimensiunea sa inițială:

Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )

7. Transformarea în cerc

Una dintre animațiile utilizate în mod obișnuit este un element dreptunghiular care se transformă într-un cerc atunci când trece cu mouse-ul deasupra. Folosind proprietatea CSS border-radius, folosită împreună cu :hover și transition , acest lucru poate fi realizat fără probleme:

Cerc: hover ( raza de frontieră: 70%; )

8. Rotire

O opțiune de animație distractivă este să rotiți un element cu un anumit număr de grade. Pentru a face acest lucru, vom avea nevoie din nou de proprietatea transform, dar cu o valoare diferită - rotateZ(20deg) . Cu acești parametri, blocul va fi rotit cu 20 de grade în sensul acelor de ceasornic față de axa Z:

Rotire:hover ( -webkit-transform: rotireZ(20deg); -ms-transform: rotireZ(20deg); transformare: rotireZ(20deg); )

9. Umbra 3D

Opiniile designerilor diferă dacă acest efect este adecvat în designul plat. Cu toate acestea, această animație CSS3 este destul de originală și este folosită și pe paginile web. Vom obține un efect tridimensional folosind proprietățile deja familiare box-shadow (vom crea o umbră cu mai multe straturi) și vom transforma cu parametrul translateX(-7px) (va asigura o deplasare orizontală a blocului la stânga cu 7 pixeli). ):

Threed:hover (box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 6px 6px #53ea93, 5pxlate 7px #53ea93, 4px 4px #53ea93; -7px; transformare: translateX(-7px )

Suport pentru browser

Următoarele browsere acceptă în prezent proprietatea de tranziție:

Browsere desktop
Internet Explorer	Sprijinit de IE 10 și versiuni ulterioare
Crom	Suportat din versiunea 26 (până când versiunea 25 funcționează cu prefixul -webkit-)
Firefox	Suportat din versiunea 16 (în versiunile 4-15 funcționează cu prefixul -moz-)
Operă	Suportat din versiunea 12.1
Safari	Suportat din versiunea 6.1 (în versiunile 3.1-6 funcționează cu prefixul -webkit-)

Proprietățile rămase utilizate în aceste exemple, cum ar fi transform , box-shadow etc., sunt, de asemenea, acceptate de aproape toate browserele moderne. Cu toate acestea, dacă intenționați să utilizați aceste idei pentru proiectele dvs., vă recomandăm insistent să verificați din nou compatibilitatea între browsere.

Sperăm că ați găsit utile aceste exemple de animație CSS3. Vă dorim succes creativ!

Bună ziua, dragi cititori. În această zi, să vorbim despre un lucru destul de interesant numit animație CSS. Adică, această animație a elementelor se face doar folosind stiluri și nu sunt folosite scripturi aici.

După cum puteți vedea, aici există un atribut :planare, care schimbă stilul de fundal la trecerea cu mouse-ul în unele exemple ar trebui să fie necesar.

Schimbați ușor culoarea unui element la trecerea cu mouse-ul folosind tranziția

#box1 (
margine-jos: 5px;
culoare de fundal: #ccc;

umplutură: 10px;
text-align: centru;
lățime: 200px;
înălțime: 100px;

text-indent: 0px;
chenar: 1px solid #888;
-moz-tranziție: culoare de fundal 0.8s 0.1s ușurință;
-o-tranziție: culoare de fundal 0.8s 0.1s ușurință;
-webkit-tranziție: fundal-culoare 0.8s 0.1s ușurință;
cursor: pointer;)

#caseta1 :planare {
culoare de fundal: #97CE68;
culoare: #333;
}

După cum puteți vedea, am realizat această animație folosind atributul tranziție. Aici puteți schimba viteza animației în secunde, în acest caz costă 0,8 s înainte ca culoarea să se schimbe complet la trecerea cu mouse-ul și 0,1 s înainte ca animația să funcționeze după trecerea cu mouse-ul și eliminarea cursorului. (Ne pare rău pentru puzzle :-)) Această valoare poate fi schimbată după cum aveți nevoie.

Culoarea de fundal la trecerea cursorului este setată ca atribut :planare, este necesar aici, altfel animația nu va funcționa.

Redimensionarea unui element

#box2 (
margine-jos: 5px;
culoare de fundal: #ccc;
culoare: #333;

umplutură: 10px;
text-align: centru;
lățime: 200px;
înălțime: 100px;

text-indent: 0px;
chenar: 1px solid #888;
-moz-tranziție: toate cele 1 liniare;
-o-tranziție: toate cele 1 liniare;
-webkit-tranziție: toate cele 1 liniare;
cursor: pointer;)

#box2 :planare {
culoare de fundal: #97CE68;
culoare: #000;
latime: 150px;
înălțime: 50px;
}

În acest exemplu, am obținut o schimbare lină a dimensiunii blocului la hover. Valoarea standard este 200 pe 100, iar valoarea hoverului este 150 pe 50, care este specificată de atribut :planare.

Aici puteți schimba și blocul doar în lățime sau înălțime, doar trebuie :planareșterge lăţime:— blocul se modifică numai în înălțime, înălţime:— blocul se modifică numai în lățime.

De asemenea, puteți modifica rata de schimbare. În acest caz este 1s.

Torsiunea obiectului

#box3 (
margine-jos: 5px;
culoare de fundal: #ccc;
culoare: #333;

umplutură: 10px;
text-align: centru;
lățime: 200px;
înălțime: 100px;

text-indent: 0px;
chenar: 1px solid #888;
-moz-tranziție: toate 1s 0.1s ease-in;
-o-tranziție: toate 1s 0.1s ease-in;
-webkit-tranziție: toate 1s 0.1s ease-in;
cursor: pointer;)

#box3:hover (
culoare de fundal: #97CE68;
culoare: #000;
-webkit-transform: rotire(360deg);
-moz-transform: rotire(360deg);
-o-transform: rotire(360deg);
}

Torsiunea are loc folosind transformaȘi tranziție. În acest caz, obiectul se rotește în sensul acelor de ceasornic la 360 de grade cu o viteză de o secundă. Dacă doriți ca blocul să se rotească în sens invers acelor de ceasornic, transforma valoarea trebuie setată la - (minus). Desigur, gradul de rotație poate fi modificat.

Mărirea și micșorarea fără probleme a unui obiect

#box4 (
margine-jos: 5px;
culoare de fundal: #ccc;
culoare: #333;
umplutură: 10px;
text-align: centru;
lățime: 200px;
înălțime: 100px;

text-indent: 0px;
chenar: 1px solid #888;
-moz-tranziție: toate cele 3 ease-out;
-o-tranziție: toate cele 3 ease-out;
-webkit-tranziție: toate cele 3 ease-out;
cursor: pointer;)

#box4:hover (
culoare de fundal: #97CE68;
culoare: #000;
-webkit-transform: scară(2);
-moz-transform: scara(2);
-o-transforma: scara(2);
}

În acest exemplu, blocul crește ușor în dimensiune de 2 ori. Această valoare este setată transforma: scară(2). Dacă setați valoarea la 1,5, blocul va fi mărit de 1,5 ori.

În același mod poți reduce dimensiunea bloc, de exemplu setați valoarea la 0,5.

Comutare lină în jos

#box5 (
margine-jos: 5px;
culoare de fundal: #ccc;
culoare: #333;
umplutură: 10px;
text-align: centru;
lățime: 200px;
înălțime: 100px;

text-indent: 0px;
chenar: 1px solid #888;
-moz-tranziție: toate cele 1 ease-in-out;
-o-tranziție: toate cele 1 ease-in-out;
-webkit-tranziție: toate cele 1 ease-in-out;
cursor: pointer;)

#box5:hover (
culoare de fundal: #97CE68;
culoare: #000;
-webkit-transform: translate(0.50px);
-moz-transform: translate(0.50px);
-o-transform: translate(0.50px);
}

Aici mișcarea este specificată în pixeli. În acest caz (0,50px). De asemenea, puteți face ca blocul să se ridice cu această valoare de 0,-50px. Sau în diagonală în jos 50px, 50px. Într-un cuvânt, blocul poate fi făcut să se mute oriunde.

Asta e practic tot ce am vrut să spun. Nu, nu totul :-) Am uitat să vă reamintesc că această animație CSS poate fi aplicată oricăror obiecte de pe site: imagini, text, titluri, pictograme etc. Pentru linkuri, o schimbare lină de culoare este perfectă, după părerea mea, este foarte frumoasă. :-)

Și, de asemenea, această informație ne-a fost împărtășită de site-ul shpargalkablog.ru. Pentru care îi mulțumesc foarte mult.

Asta e totul sigur acum :-) Ne vedem curând, prieteni.

Rezultatul acestei lecții funcționează în browserele Safari, Chrome, Opera, Firefox, începând cu versiunea 4 (unde vei vedea transformări, dar fără animație). De asemenea, folosind prefixul browserului -ms-, puteți vedea rezultate pozitive în IE, începând cu versiunea 9.

Pentru a implementa animația CSS, trebuie să setați setări speciale de transformare care vor răspunde la evenimentele mouse-ului. De asemenea, este necesar să specificați o funcție specială care va fi responsabilă de timpul de execuție al animației.

Pentru ca transformările să funcționeze în Firefox și Opera, pur și simplu înlocuiți prefixul -webkit cu -moz și -o. Pentru IE - la -ms.

1. Introducere în Transformările CSS

Transformările CSS sunt folosite pentru a schimba aspectul, rotația și alte transformări ale unui element. Toate aceste setări sunt setate în foi de stil obișnuite, iar când deschideți pagina, vedeți deja rezultatul final al transformării. Pentru a vedea transformarea în sine de la o vedere la alta (animație de transformare), puteți atașa un fel de eveniment la element (de exemplu, evenimentul mouseover);

În exemplul de mai jos, am plasat 4 div-uri absolut identice cu un chenar de 2px. Pentru a transforma aceste elemente în browsere care rulează pe webkit, adăugați prefixul -webkit-transform:

Fără aceste transformări, div-urile vor arăta exact la fel.

2. Animație

Pentru a anima transformările în browserele Webkit, puteți utiliza prefixul -webkit-transition. Demo-ul este prezentat mai jos:

Există 4 div-uri identice în fața ta. Pentru a începe animația, trebuie să mutați mouse-ul înăuntru/în afara. Cu toate acestea, fără JavaScript. Numai HTML și CSS.

Animația CSS poate fi aplicată nu numai transformărilor, ci și altor proprietăți, cum ar fi transparența, culoarea și multe altele. Acest lucru este demonstrat în exemplul următor. Un element este convertit în altul și invers:

Din nou, folosim doar HTML și CSS. În acest caz, modificați setările border-color, border-radius.

4. Transformări multiple pe un element

Pentru a aplica mai multe transformări la același element, pur și simplu enumerați setările separate printr-un spațiu. De exemplu:

Aceste setări, când treceți mouse-ul peste 1 secundă, vor schimba culoarea submeniului, îl vor roti și îi vor crește dimensiunea.

4. Animația în acțiune

Iată un alt exemplu interesant de combinare a diferitelor tipuri de transformări într-o singură animație:

Este posibil ca acest exemplu să nu funcționeze foarte bine în Safari 3 și versiunile anterioare ale Opera.

Caseta înconjurată de un cadru punctat care apare în timpul redării animației reprezintă poziția elementului div. Pur și simplu îl schimbăm și îi rotim conținutul. E simplu!

Pentru a crea animații mai complexe, trebuie să utilizați cadre cheie speciale.

5. Utilizarea diferitelor tipuri de animație

În acest exemplu, vom adăuga mai multe transformări de elemente, fiecare dintre ele va fi jucată într-o anumită perioadă de timp.

Când are loc un eveniment de trecere, pătratul albastru se va întoarce, își va schimba culoarea în roșu și se va muta din colțul din stânga sus în dreapta jos.

Primul lucru pe care probabil ar fi trebuit să-l observați este particularitatea mișcării pătratului. Acum nu este ascuțit, ci mai „curbat”. Toate datorită funcțiilor ease-out și ease-in.

De asemenea, rețineți că schimbarea culorii are loc înainte de rotație.

Trucul este că puteți împărți -webkit-transition în mai multe intrări:

#bloc ( ... fundal: albastru; ... -webkit-transition-property: stânga, sus, fundal, -webkit-transform; -webkit-transition-duration: 2s, 2s, 1s, 1s; -webkit-transition -funcție de sincronizare: ease-out, ease-in, linear, ease-in-out -webkit-tranziție-delay: 0, 0, 0, 1s ... ) #stage:hover #block ( stânga: 100px ; partea de sus: 100px;

6. Evenimentul unui element îl transformă pe altul

Mulți oameni vor fi probabil interesați de funcționalități similare: făcând clic pe un element provoacă transformarea altuia. În CSS, acest lucru poate fi realizat folosind selectoarele >, + și ~.

Iată un exemplu relevant:

În acest exemplu, am folosit semnul + pentru a interacționa cu #box1 și #box2. ~ poate fi folosit pentru a accesa elemente care sunt undeva departe de elementul care așteaptă evenimentul.

#box2 ( poziție: absolut; stânga: 120px; ... fundal: albastru; ... ) #box1:hover + #box2 ( -webkit-transform: rotire(360deg); -moz-transform: rotire(360deg); -o-transform: rotire(360deg); -ms-transform: rotire(360deg);

În același timp, putem anima primul bloc:

Singurul dezavantaj al acestor exemple este că nu funcționează (sau funcționează strâmb) în versiunile anterioare ale browserelor.

Mulțumim lui Niall pentru tutorialul sugerat!