Efectul de reflecție aplicat imaginilor este unul dintre cele mai remarcabile efecte care au apărut în designul web modern.
Totuși, crearea acestui efect exclusiv folosind CSS3 este o sarcină destul de lungă și dureroasă. În plus, pe lângă stilul imaginilor, trebuie să modificați alte părți ale fișierelor dvs. css.
O altă problemă este că este posibil ca efectul dvs. să nu funcționeze în toate browserele. Din fericire, acum avem o utilitate numită Reflection.js.
În această lecție, vă voi arăta cum să creați un efect de reflecție în două moduri: primul - pe CSS pur, apoi - cu Reflection.js.
Resurse necesare
Pentru o muncă ulterioară, vom avea nevoie de:
- imagine la gust;
- Reflection.js;
- timp și răbdare.
Aici puteți descărca fișierele sursă pentru această lecție.
Versiunea CSS3
În fișierul nostru HTML vom insera imaginea și îl vom înfășura cu elementul HTML5
În fișierul nostru CSS trebuie să efectuăm următoarele modificări:
- Adăugați o indentare de 60 de pixeli în partea superioară a imaginii și centrați-o pe ecran cu valoarea automată;
- Utilizați proprietatea -webkit-box-reflect. pentru a reflecta imaginea în jos;
- Aplicați o mască imaginii folosind -webkit-gradient pentru a afișa doar o parte din reflecție.
Folosind codul de mai sus, avem această imagine frumoasă:
Potrivit site-ului dezvoltatorului Mozilla. Proprietatea CSS -webkit-box-reflects funcționează numai în browserele Google Chrome și Opera.
Deși există și alte modalități de a obține efectul dorit, situația este deja clară: este dificil și consumator de timp să creați acest efect.
Dar în această afacere există și o parte strălucitoare: Reflection.js ne va salva de la necesitatea de a avea grijă de compatibilitatea cu browser-ul încrucișat. Să vedem cât de ușor vom realiza utilizând această bibliotecă.
MooTools versiune
Înainte de a începe să lucrați cu marcarea, încărcați reflection.js și mootools.js de aici. De asemenea, trebuie să creați linkuri către ambele fișiere în antetul site-ului nostru:
În fișierul nostru HTML, ca și în exemplul anterior, ar trebui să plasăm imaginea înfășurată de element
Această clasă va fi utilizată de reflection.js pentru a aplica același efect tuturor imaginilor din această clasă:
Versiunea MooTools a scriptului folosește metoda reflect () pentru a crea efectul. Puteți alege diferitele opțiuni. De exemplu, opțiunea "opacitate" (transparență):
Gata! Iată cum lucrurile pot fi simple cu un instrument minunat ca Reflection.js:
concluzie
Deși puteți crea un efect de reflecție folosind doar Photoshop sau CSS3, va dura mult timp și va pune o serie de întrebări suplimentare în fața designerului. Biblioteca Reflection.js. scris de Christophe Bale, vă va ajuta să realizați acest efect remarcabil.
Vă recomandăm să utilizați acest instrument minunat în loc de Photoshop sau să editați direct proprietățile CSS pentru a simplifica și a accelera dezvoltarea.
Traducerea articolului "Crearea efectului de reflecție folosind CSS3 și Reflection.js" a fost pregătit de echipa prietenoasă a proiectului Saitostroenie de la A la Z.
Articole similare
Trimiteți-le prietenilor: