Share
Har du sett disse miniatyrbildene som, når de svinger over, avslører et ikon i midten for å foreslå hva som skjer? Noen gang lurt på hvordan effekten oppnås? Noen gang prøvd, men klarte ikke å få ikonets døds sentrum, spesielt når miniatyrbildene dine ikke var av faste dimensjoner? Så er denne Quick Tip for deg ...
Jeg snakker om miniatyrbilder som du kanskje klikker for å utløse en lightbox, eller kanskje et miniatyrbilde som kobler til et porteføljestykke. I alle fall er det et flott tillegg til nettstedets brukervennlighet hvis du kan foreslå hva som skal skje når noen svinger over en miniatyrbilde.
Denne raske tipset er rettet mot de som har forståelse for CSS, har mer eller mindre funnet ut hva posisjonering handler om, og leter etter den perfekte unnskyldningen for å sette den til bruk ...
La oss raskt kaste noen dokumenter sammen for å demonstrere hva jeg snakker om. For det første, vår html:
Hover Demo Thingy
Da begynner vi vår styles.css-fil med noen tilbakestillingsregler. Du kan godt ha dine egne foretrukne tilbakestillingsmetoder, men for tiden har jeg brukt Eric Meyer til å starte vår css:
/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Lisens: ingen (offentlig domene) * / html, kropp, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, stor kiter koden del dfn em img kbd q s samp liten streik sterk sub sup sup tt var du du midt i dl dt, dd, ol, ul, li, feltet, form, etikett, legenden, tabell, bildetekst, tbody, tfoot, thead, tr, th, td, artikkel, til side, lerret, detaljer, embed, figur, figcaption, footer, header, hgroup, meny, nav, utdata, rubin, seksjon, sammendrag, tid, markere, lyd, video margin: 0; polstring: 0; grense: 0; skriftstørrelse: 100%; skrifttype: arve; vertikaljustering: basislinje; / * HTML5 display-rolle reset for eldre nettlesere * / artikkel, til side, detaljer, figcaption, figur, footer, header, hgroup, meny, nav, del display: block; kropp linjehøyde: 1; ol, ul listestil: ingen; blockquote, q quotes: none; blockquote: før, blockquote: etter, q: før, q: etter innhold: "; innhold: none; table border collapse: collapse; border spacing: 0;
For å gi vår side litt layoutstruktur, er det tre kolonner i en beholder:
Og nå, selvfølgelig, må vi legge til noen stiler for å få dem til å fungere som kolonner innenfor et fleksibelt omslag:
/ * våre demostiler * / html, kropp bakgrunn: # 29282e; .wrapper bredde: 90%; maksimal bredde: 960px; margin: 30px auto; .col bredde: 27%; polstring: 0 3%; flyte: venstre;
Så det har vi dem; tre kolonner, hver 27% brede, med polstring venstre og høyre på 3%, og alle flyter pent på rad. Våre wrapper er pent fleksibel på 90% av nettleservinduets bredde (til maksimalt 960px). Vi har også gitt vår kropp og html en fin, mørk bakgrunnsfarge.
Det er på tide å legge til noen bilder i blandingen. Jeg har brukt noen bakgrunnsbilder fra Atelier Olschinskys ganske inspirerende bysamling (ta dem fra kuvva.com til skrivebordet ditt ...)
Hvert bilde skal inneholde et HTML5-figurelement, men innpakket direkte av et anker for å koble det til noe (enten en lightbox-forstørret versjon eller et eksternt nettsted etc.):
Så legger vi tre av figurene våre, en for hver miniatyrbilde, i en egen kolonne.
Disse bildene er for store, slik at de ikke brister ut av kolonnene sine, la oss gi dem maksimal bredde ved å bruke en klassisk fluid image-regel:
figur img maksimal bredde: 100%;
En god start. Vi har vårt væskeoppsett med tre kolonner, som hver inneholder et bilde som lenker et sted.
La oss gjøre det klart for brukerne at det å klikke på bildene gjør noe. Vi legger til en sveverstatus, noe som reduserer opaciteten til miniatyrbildet:
figur a: svinger img opacity: 0.4; filter: alfa (opasitet = 40); / * IE6-IE8 * /
Nå for alle viktige ikonene. Vi vil ha et ikon, plassert i midten av miniatyrbildet, for å bli synlig når bildet er svevet over. Det kan være noe symbol du liker, men det bør indikere for brukeren hva som skal skje. I denne demonstrasjonen, for enkelhets skyld, skal jeg bare bruke en + logg for å foreslå at en større versjon vil bli aktivert.
Vi legger til det i blandingen ved hjelp av pseudoelementet :før:
a.enlarge: før innhold: "+"; skjerm: blokk; skriftstørrelse: 40px; linjehøyde: 1em; høyde: 1em; bredde: 1em; tekst-align: center; farge: #fff; font-weight: bold; posisjon: absolutt; z-indeks: 100;
Vi har plassert vår + som generert: Før elementet, en del av ankeret som omgir bildet. Vi bruker klassen "forstørre" for å identifisere ankrene som vil trenge +. Hvis vi trenger et annet symbol, kan vi bruke et annet klassenavn.
Til å begynne med må vi diktere innholdet (vår + tegn) og angi at det er et blokknivåelement.
Viktig! Følgende regler bestemmer da dimensjonene. Vi har sagt at skriftstørrelsen er 40px. Da har vi sagt at linjehøyde, høyde og bredde er alle lik 1em (40px derfor). Dette har skapt et kvadrat på 40x40px. Ved å sette tekstjusteringen til senter og linjehøyden til 1em, vi garanti at tegnet sitter smack-bang i det vertikale og horisontale sentrum av torget vårt.
De neste viktige reglene er absolutt posisjonering (0px, 0px som standard) og z-indeksen som bestemmer stablingsordren til våre posisjonerte elementer. Ved å sette dette til 100, kan vi sørge for at våre andre elementer sitter på toppen av det. La oss gjøre det nå ...
figur img maksimal bredde: 100%; stilling: relativ; z-indeks: 900; figur a posisjon: relativ; skjerm: blokk; linjehøyde: 0px; tekst-dekorasjon: ingen;
Her har vi sørget for at img-kodene sitter på toppen av + ikoner ved å sette z-indeksen høyere enn 100. For at dette skal tre i kraft skal vi ned for å angi en posisjoneringstype ("relativ" i dette tilfellet). Vår anker har også stilling: relativ som betyr at + ikonet er nå helt posisjonert mot det.
Du vil også legge merke til noen få andre stiler lagt til ankeret. Vi har gjort det til å vise som en blokk, fjernet noen understrekksdekorasjon, pluss gitt en linjehøyde på 0px. Linjens høyde er viktig, og hvis ikke reset kan manifestere seg som ekstra polstring nederst på elementet. Vi har nå sørget for at ankeret passer godt rundt bildet.
Ikonene våre er faktisk alltid til stede, men de blir bare synlige når bildet dekker dem, er svinget over.
I øyeblikket er våre ikoner plassert som standard øverst til venstre på våre ankre. Vi trenger dem i midten av miniatyrbildene, uavhengig av hvor store miniatyrbildene er. La oss da plassere dem 50% fra venstre og 50% fra toppen. Jobb gjort, ikke sant?
a.enlarge: før innhold: "+"; skjerm: blokk; skriftstørrelse: 40px; linjehøyde: 1em; høyde: 1em; bredde: 1em; tekst-align: center; farge: #fff; font-weight: bold; posisjon: absolutt; topp: 50%; venstre: 50%; z-indeks: 100;
Hmm. Ikke egentlig. Ikonet er ikke i nærheten av midten av miniatyrbildet ... Det er fordi elementene er justert i forhold til deres øverste venstre hjørne. Se igjen:
For å kompensere for posisjoneringen må vi skifte den halvt oppe og halve bredden igjen. Vi brukte ems tidligere til å bestemme dimensjonene (1em = 40px), så la oss nå bruke 0.5em (halve kvadratets bredde) for å gjøre skiftingen. På denne måten, uansett hva vi endrer fontstørrelsen til, forblir alle målingene proporsjonale. Takk til Gabri for å påpeke bruken av ems!
a.enlarge: før innhold: "+"; skjerm: blokk; skriftstørrelse: 40px; linjehøyde: 1em; høyde: 1em; bredde: 1em; tekst-align: center; farge: #fff; font-weight: bold; posisjon: absolutt; topp: 50%; venstre: 50%; z-indeks: 100; margin: -0.5em 0 0 -0.5em;
For å gjøre det, bruker vi en negativ margin. -0.5em på toppen og til venstre vil gjøre jobben. Tenk på det som å ha skapt et vakuum, som vårt element suges i.
Bingo! Våre + ikonet er perfekt plassert i midten av miniatyrbildet vårt. Prøv å endre størrelsen på nettleseren, den forblir nøyaktig døds sentrum.
Det er poser med potensial for en teknikk som dette:
Til krydret CSS-ers er dette et veldig rettfremt knep, men hvis du aldri har vurdert posisjonering slik før jeg håper denne Quick Tip har vært nyttig.
Accentsconagua
