În acest tutorial, vă voi arăta cum să recreați efectul unei imagini lucioase folosind gradientele CSS3.
Structura HTML
Deci, în acest scurt mini-tutorial vom aplica structura HTML5 de bază. Cu cele mai putine optiuni posibile, deoarece efectul dorit ar trebui atins, in principal folosind CSS. Prin urmare, este mai bine să păstrați HTML cât mai pur și semantic posibil.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Deci, în plus față de structura și wrapper-ul paginii, în principiu avem doar un element DIV (cu fotografie de clasă), în care am plasat eticheta IMG.
Acesta este tot HTML-ul! Acum mergeți la secțiunea CSS.
Mai întâi, setați pur și simplu stilurile paginilor astfel încât să puteți coopera cu elementele foto. Aici adăugăm doar culoarea de fundal pe întreaga pagină și instalăm pachetul DIV.
Alocarea stilurilor DIV-y cu fotografie
Următorul pas este atribuirea stilurilor divului care conține. Aici determinăm înălțimea și lățimea blocului. În acest stadiu, aceasta este sarcina cea mai importantă, precum și stabilirea proprietății poziției la rudă. Restul este pur și simplu în scopuri estetice. Se pare ca un bloc de umbra de clasa dubla in jurul intregii imagini si cadru in 1px.
Acum, imaginea arată bine. Dar ne lipsește ceva - efectul cel mai lucios. Și acesta este ultimul pas al acestui mini-manual.
Atribuirea stilurilor unui pseudo-element de fotografie: înainte
Acesta este cel mai important pas al întregului efect, vom aloca stiluri pseudo-elementului div: înainte. În acest fel, puteți crea o imagine lucioasă în partea de sus a fotografiei, fără a fi necesar să adăugați marcaj HTML suplimentar. Aceasta este mai semantică. Aici poziționăm absolut acest element pe partea de sus a fotografiei (de aceea este atât de important să setăm poziția anterioară a etapei: relativă) și să aplicăm gradienții CSS3 pe fundalul acestui nou element pseudo-element.
Știu, toate aceste numere de designeri începători par destul de minunate. Dar ele sunt, în principiu, valori RGBA (valorile de culoare la care putem aplica opacitatea) în gradientele "stop". Cum să explicăm ce se întâmplă ... avem două jumătăți ale gradientului mergând de la colțul TOP LEFT la DREAPTA DREAPTA. Prima jumătate începe cu o transparență totală de 50% alb transparent. A doua jumătate se întoarce la transparență totală (așa este creată o linie diagonală) și aceasta rămâne.
concluzie
Sper că vă place acest tutorial.
Ediție: Comanda webformself.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Practicați HTML5 și CSS3 de la zero la rezultatul!
Articole similare
Trimiteți-le prietenilor: