Buna ziua, dragi cititori ai XoZblog a! Mulți oameni, deși probabil toți cei de pe site-uri au un plug-in pentru a crea un efect lightbox, adică Atunci când imaginea se deschide în dimensiune completă, iar restul conținutului este ascuns. Folosind CSS3, puteți simplifica cât mai mult crearea unui astfel de efect. În acest articol, efectul este implementat datorită clasei pseudo-class: target.
În primul rând, avem nevoie de o miniatură, fie o imagine separată cu dimensiuni mai mici, fie cu o lățime a imaginii principale. Înconjurați această miniatură cu o legătură.
Acum adăugați o altă linie de cod. Aici, aceeași imagine, dar deja în dimensiunea originală, este, de asemenea, înconjurată de o legătură a cărei valoare a atributului id este egală cu valoarea atributului href din linkul de mai sus. Și există o clasă de cutii de presă.
Iată câteva reguli CSS3, permițându-vă să implementați efectul lightbox.
pressbox # 123;
lățime. 0;
înălțime. 0;
poziție. fixe;
preaplin. ascunse;
la stânga. 0;
top. 0;
/ * Mai presus de toate celelalte elemente * /
z-index. 9999;
text-align. centru;
/ * Fundal gri translucid * /
fundal. RGBA # 40; 0. 0. 0. 0.7 # 41; ;
# 125;
pressbox img # 123;
/ * imagine inițial complet transparentă * /
opacitate. 0;
umplutură. 10px;
fundal. #FFFFFF;
margin-top. 100px;
/ * umbre * /
-webkit-box-shadow. 0px 0px 15px # 444;
-Moz-box-shadow. 0px 0px 15px # 444;
box-shadow. 0px 0px 15px # 444;
/ * Proprietatea de transparență nu se schimbă imediat, dar într-un sfert de secundă * /
-Moz-tranziție. opacitate ușoară;
-webkit-tranziție. opacitate ușoară;
tranziție. opacitate ușoară;
# 125;
pressbox. țintă # 123;
lățime. auto;
înălțime. auto;
de jos. 0;
dreapta. 0;
# 125;
pressbox. țintă img # 123;
opacitate. 1;
# 125;
Da, nu uita că funcționează numai în:
Pentru a fi la curent cu ultimele articole și lecții, înscrieți-vă pentru pagina VKontakte sau adăugați-vă în cercuri pe Google+. Mulțumesc!
Trimiteți-le prietenilor: