Share
V-ați văzut vreodată acele miniaturi care, atunci când se deplasează, dezvăluie o icoană în mijloc pentru a sugera ce urmează să se întâmple? V-ați întrebat vreodată cum se obține efectul? Incercat vreodata, dar nu a reusit sa aduca icoanele mort, mai ales cand miniaturile dvs. nu aveau dimensiuni fixe? Apoi acest sfat rapid este pentru tine ...
Vorbesc despre miniaturi pe care s-ar putea să faceți clic pentru a declanșa o căsuță lightbox, sau poate o miniatură care se leagă de o piesă de portofoliu. În orice caz, este o mare plus față de utilitatea site-ului dvs. dacă puteți sugera ce urmează să se întâmple atunci când cineva se așează pe o miniatură.
Acest sfat rapid se adresează celor care au o înțelegere a CSS, au dat mai mult sau mai puțină seama despre ce poziționare are și căută o scuză perfectă pentru ao folosi ...
Să aruncăm repede câteva documente împreună pentru a demonstra ce vorbesc. În primul rând, html-ul nostru:
Hover Demo Thingy
Apoi vom începe fișierul nostru styles.css cu câteva reguli de resetare. S-ar putea să aveți propriile metode de resetare preferate, dar deocamdată am folosit Eric Meyer's pentru a da startul css-ului nostru:
/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licență: none (domeniu public) * / html, corp, div, span, applet, obiect, iframe, h1, h2, h4, mare, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, dd, ol, ul, li, câmp, formă, etichetă, legendă, tabel, caption, t, tfoot, hgroup, meniu, nav, ieșire, rubin, secțiune, rezumat, timp, marcă, audio, video margine: 0; umplutura: 0; frontieră: 0; font-size: 100%; font: inherit; aliniere verticală: linia de bază; / * Resetarea rolului afișării HTML5 pentru browserele mai vechi * / articol, deoparte, detalii, figcaption, figura, subsol, antet, hgroup, meniu, nav, secțiune display: block; corp linie-înălțime: 1; ol, ul stil-list: nici unul; blockquote, q citate: none; blockquote: înainte, blockquote: după, q: înainte, q: după content: ";
În continuare, pentru a da o pagină de structură puțin structură, sunt trei coloane, într-un container:
Și acum, bineînțeles, trebuie să adăugăm câteva stiluri pentru a le face să se comporte ca coloane într-un ambalaj flexibil:
/ * stilurile noastre demo * / html, corpul background: # 29282e; .wrapper lățime: 90%; max-lățime: 960px; margine: 30 pixeli automat; .col lățime: 27%; umplutură: 0 3%; plutește la stânga;
Deci, acolo le avem; trei coloane, fiecare cu lățimea de 27%, cu stânga și dreapta de umplutură de 3%, și toate plutesc bine într-un rând. Învelișul nostru este foarte flexibil la 90% din lățimea ferestrei browserului (până la maximum 960 de pixeli). De asemenea, am oferit corpului nostru și html o culoare frumoasă, de fundal închis.
Este timpul să adăugați câteva imagini la mix. Am folosit câteva imagini de fundal din colecția orășenească inspirată de Atelier Olschinsky (luați-le de la kuvva.com pentru desktop-ul dvs. ...)
Fiecare imagine va fi cuprinsă într-un element HTML5, însă va fi înfășurat direct de o ancora pentru a-l lega cu ceva (fie o versiune lărgită cu cutie de lumină, fie un site extern etc.):
Așadar, vom plasa trei cifre, câte una pentru fiecare miniatură de imagine, într-o coloană proprie.
Aceste imagini sunt prea mari, astfel încât să le împiedică să iasă din coloanele lor, să le acordăm o lățime maximă aplicând o regulă clasică de imagine fluidă:
figura img max-width: 100%;
Un început bun. Dispunem de structura noastră fluidă cu trei coloane, fiecare conținând o imagine care unește undeva.
Să explicăm utilizatorilor că faceți clic pe imagini face ceva. Vom adăuga o stare de hover, reducând opacitatea miniaturii:
figura a: hover img opacitate: 0,4; filtru: alfa (opacitate = 40); / * IE6-IE8 * /
Acum, pentru pictograma importantă. Vrem ca o pictogramă, plasată în centrul miniaturii, să devină vizibilă atunci când imaginea este plină. Poate fi orice simbol vă place, dar ar trebui să indice utilizatorului ce se va întâmpla. În această demonstrație, din motive de ușurință, voi folosi doar o + semn pentru a sugera o versiune mai mare va fi activat.
Îl vom adăuga în mix folosind elementul pseudo :inainte de:
a.large: înainte de content: "+"; afișare: bloc; font-size: 40px; linia-înălțime: 1em; înălțime: 1em; lățime: 1m; text-align: centru; culoare: #fff; font-weight: bold; poziția: absolută; z-index: 100;
Ne-am plasat + ca un element generat: înainte de element, o parte a ancorei care înconjoară imaginea. Folosim clasa "mărire" pentru a identifica ancorele care vor avea nevoie +. Dacă avem nevoie de un alt simbol, putem folosi un alt nume de clasă.
Pentru a începe, trebuie să dictează conținutul + caracter) și să precizeze că este un element la nivel de bloc.
Important! Următoarele reguli determină apoi dimensiunile. Am spus că dimensiunea fontului este de 40 pixeli. Apoi am spus că înălțimea liniei, înălțimea și lățimea sunt egale cu 1em (40px deci). Acest lucru a creat un pătrat de 40x40 px. Prin setarea textului-aliniere la centru și înălțimea liniei la 1em, noi garanție că personajul este așezat în zbor în centrul vertical și orizontal al pieței noastre.
Următoarele reguli importante sunt poziționarea absolută (0px, 0px în mod implicit) și indexul z care determină ordinea de stivuire a elementelor poziționate. Prin setarea acestui parametru la 100, putem să ne asigurăm că celelalte elemente se află pe partea de sus a acestuia. Să facem asta acum ...
figura img max-width: 100%; poziție: relativă; z-index: 900; figura a poziție: relativă; afișare: bloc; line-height: 0px; text-decoration: nici unul;
Aici am asigurat că etichetele img stau pe partea de sus a paginii + pictogramele prin setarea indexului z mai mare de 100. Pentru ca aceasta să devină efectivă, nu trebuie să menționăm un tip de poziționare ("relativ" în acest caz). Și ancora noastră are Poziția: relativă ceea ce înseamnă că + pictograma este acum absolut poziționată împotriva acesteia.
Veți observa, de asemenea, câteva alte stiluri adăugate la ancora. Am făcut-o să fie afișată ca un bloc, a eliminat orice decorare subliniere, plus având o înălțime a liniei de 0px. Înălțimea liniei este importantă și, dacă nu este resetată, se poate manifesta ca o completare suplimentară în partea de jos a elementului. Acum ne-am asigurat că ancora se potrivește perfect în jurul imaginii.
Icoanele noastre sunt de fapt întotdeauna prezente, dar ele devin vizibile numai atunci când imaginea care le acoperă este plină.
În momentul de față, icoanele noastre sunt poziționate în mod prestabilit în partea din stânga sus a ancorelor noastre. Avem nevoie de ele în centrul miniaturilor, indiferent de cât de mari sunt miniaturile. Să le poziționăm apoi 50% din partea stângă și 50% din partea de sus. Lucru făcut, corect?
a.large: înainte de content: "+"; afișare: bloc; font-size: 40px; linia-înălțime: 1em; înălțime: 1em; lățime: 1m; text-align: centru; culoare: #fff; font-weight: bold; poziția: absolută; top: 50%; stânga: 50%; z-index: 100;
Hmm. Nu chiar. Pictograma nu este aproape de centrul thumbnail-ului ... Asta pentru că elementele sunt aliniate în raport cu colțul din stânga sus. Uita-te din nou:
Pentru a compensa poziționarea, trebuie să-l schimbăm cu jumătate din înălțimea în sus și jumătate din lățimea rămasă. Am folosit ems mai devreme pentru a determina dimensiunile (1em = 40px), deci să folosim acum 0.5m (jumătate din lățimea pătratului) pentru a face schimbarea. În acest fel, indiferent de schimbarea mărimii fontului, toate măsurătorile vor rămâne proporționale. Mulțumită lui Gabri pentru evidențierea utilizării ems!
a.large: înainte de content: "+"; afișare: bloc; font-size: 40px; linia-înălțime: 1em; înălțime: 1em; lățime: 1m; text-align: centru; culoare: #fff; font-weight: bold; poziția: absolută; top: 50%; stânga: 50%; z-index: 100; marja: -0.5em 0 0 -0.5em;
Pentru a face acest lucru, aplicăm o marjă negativă. -0.5em în partea de sus și în stânga va face treaba. Gândiți-vă că a creat un vid, în care elementul nostru este aspirat.
Bingo! Al nostru + pictograma este poziționată perfect în centrul thumbnail-ului nostru. Încercați să redimensionați browserul, acesta va rămâne exact mort.
Există pungi de potențial pentru o astfel de tehnică:
Pentru CSS-uri condimentate, acesta este un truc foarte simplu, dar dacă nu ați avut niciodată o astfel de poziționare înainte de a speranța că acest sfat rapid a fost de ajutor.
Accentsconagua
