Share
Har du någonsin sett de miniatyrer som, när de svängde över, avslöjar en ikon i mitten för att föreslå vad som händer? Någonsin undrat hur effekten uppnås? Har du någonsin försökt, men lyckades inte få ikonernas dödscentrum, speciellt när dina miniatyrbilder inte var av fasta dimensioner? Då är den här snabba tipsen till dig ...
Jag pratar om miniatyrbilder som du kan klicka för att utlösa en ljuskälla, eller kanske en miniatyrbild som länkar till en portföljdel. I vilket fall som helst är det ett bra komplement till webbplatsens användbarhet om du kan föreslå vad som händer när någon svänger över en miniatyrbild.
Denna snabba tips riktar sig till dig som har en förståelse för CSS, har mer eller mindre funderat på vilken positionering som handlar om, och letar efter den perfekta ursäkten att använda den ...
Låt oss snabbt kasta några dokument tillsammans för att visa vad jag pratar om. För det första, vår html:
Hover Demo Thingy
Då börjar vi vår styles.css-fil med några återställningsregler. Du kanske har dina egna föredragna återställningsmetoder, men för tillfället har jag använt Eric Meyer för att starta vår css:
/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licens: ingen (offentlig domän) * / html, kropp, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, före, a, abbr, akronym, stor citat kod del dfn em img kbd q s samp liten strejk stark sub sub sup tt var var du mitt centrum dl dt, dd, ol, ul, li, fältet, form, etikett, legend, tabell, bildtext, tbody, tfoot, thead, tr, th, td, artikel, åt sidan, kanfas, detaljer, bädda in, figur, figcaption, footer, hgroup, meny, nav, utgång, rubin, avsnitt, sammanfattning, tid, markera, ljud, video margin: 0; vaddering: 0; gräns: 0; typsnittstorlek: 100%; typsnitt: ärv; vertikaljustering: baslinje; / * HTML5 display-rollåterställning för äldre webbläsare * / artikel, åtgärd, detaljer, figcaption, figur, footer, header, hgroup, meny, nav, avsnitt display: block; kropp linjehöjd: 1; ol, ul listestil: none; blockquote, q quotes: none; blockquote: före, blockquote: after, q: before, q: efter content: "; content: none; table border collapse: collapse; border spacing: 0;
För att ge vår sida lite layoutstruktur, här är tre kolumner, i en behållare:
Och nu måste vi naturligtvis lägga till några stilar för att faktiskt få dem att fungera som kolumner inom ett flexibelt omslag:
/ * våra demostilar * / html, kropp bakgrund: # 29282e; .wrapper width: 90%; max bredd: 960px; marginal: 30px auto; .col bredd: 27%; vaddering: 0 3%; flyta till vänster;
Så där har vi dem tre kolumner, vardera 27% breda, med stoppning åt vänster och höger om 3%, och alla av dem flyter snyggt i rad. Vårt inslag är snyggt flexibelt vid 90% av webbläsarens fönsterbredd (till högst 960px). Vi har också gett vår kropp och html en fin, mörk bakgrundsfärg.
Det är dags att lägga till några bilder i mixen. Jag har använt lite bakgrundsbilder från Atelier Olschinskys ganska inspirerande stadssamling (ta dem från kuvva.com till ditt skrivbord ...)
Varje bild ska innehålla ett HTML5-figurelement, men inslaget direkt av ett ankare för att länka det med något (antingen en ljusbox förstorad version eller en extern sida etc.):
Så lägger vi tre av våra siffror, en för varje bildminne, i en egen kolumn.
Dessa bilder är för stora, för att förhindra att de spränger ut ur sina kolumner, låt oss ge dem en maximal bredd genom att tillämpa en klassisk vätskebildregel:
figur img maxbredd: 100%;
En bra start. Vi har vårt vätskeformat med tre kolumner, var och en innehåller en bild som länkar någonstans.
Låt oss göra det tydligt för användarna att att klicka på bilderna gör någonting. Vi lägger till ett svävarläge, vilket minskar tumörens opacitet:
figur a: sväva img opacitet: 0,4; filter: alfa (opacitet = 40); / * IE6-IE8 * /
Nu för alla viktiga ikoner. Vi vill ha en ikon, placerad i mitten av miniatyrbilden, för att bli synlig när bilden svängs över. Det kan vara vilken symbol du gillar, men den borde indikera för användaren vad som ska hända. I denna demonstration, för enkelhets skull, ska jag bara använda en + tecken på att en större version kommer att aktiveras.
Vi lägger till det i mixen med pseudoelementet :innan:
a.enlarge: före innehåll: "+"; display: block; typsnittstorlek: 40px; linjehöjd: 1em; höjd: 1em; bredd: 1em; text-align: center; färg: #fff; font-weight: bold; position: absolut; z-index: 100;
Vi har placerat vår + som genererad: före elementet, en del av ankret som omger bilden. Vi använder klassen "förstora" för att identifiera de ankare som kommer att behöva +. Om vi behöver en annan symbol kan vi använda ett annat klassnamn.
Till att börja med måste vi diktera innehållet (vårt + tecken) och ange att det är ett blocknivåelement.
Viktig! Följande regler bestämmer sedan dimensionerna. Vi har sagt att fontstorleken är 40px. Sedan har vi sagt att linjens höjd, höjd och bredd är lika med 1em (40px därför). Detta har skapat en kvadrat på 40x40px. Genom att ställa in textjusteringen till centrum och linjehöjden till 1em, vi garanti att karaktären sitter smack-bang i vårt vertikala och horisontella centrum.
De följande viktiga reglerna är den absoluta positioneringen (0px, 0px som standard) och z-indexet som bestämmer staplingsordningen för våra positionerade element. Genom att ställa detta till 100 kan vi se till att våra andra element sitter ovanpå det. Låt oss göra det nu ...
figur img maxbredd: 100%; position: relativ; z-index: 900; figur a position: relativ; display: block; linjehöjd: 0px; text-dekoration: ingen;
Här har vi försäkrat oss om att img-taggarna sitter ovanpå + ikoner genom att ställa in z-indexet högre än 100. För att detta ska träda i kraft sätter vi ned för att ange en positioneringstyp ("relativ" i det här fallet). Vårt ankare har också positioner: relativ vilket betyder att + ikonen är nu helt placerad mot den.
Du märker också några andra stilar som läggs till ankaret. Vi har gjort det som ett block, tagit bort alla underlagsdekorationer, plus en linjehöjd på 0px. Linjens höjd är viktig och om den inte återställs kan den manifesteras som extra vaddering längst ner på elementet. Vi har nu kontrollerat att ankaret passar snyggt runt bilden.
Våra ikoner är faktiskt alltid närvarande, men de blir bara synliga när bilden som täcker dem svävar över.
För närvarande placeras våra ikoner som standard längst upp till vänster på våra ankare. Vi behöver dem i mitten av miniatyrer, oavsett hur stor miniatyrerna är. Låt oss sedan placera dem 50% från vänster och 50% från toppen. Jobb gjort, rätt?
a.enlarge: före innehåll: "+"; display: block; typsnittstorlek: 40px; linjehöjd: 1em; höjd: 1em; bredd: 1em; text-align: center; färg: #fff; font-weight: bold; position: absolut; topp: 50%; vänster: 50%; z-index: 100;
Hmm. Inte riktigt. Ikonen är ingenstans nära mitten av miniatyren ... Det beror på att elementen är inriktade i förhållande till sitt övre vänstra hörn. Titta igen:
För att kompensera för positioneringen måste vi flytta den hälften upp till hälften och hälften av dess bredd kvar. Vi använde ems tidigare för att bestämma dimensionerna (1em = 40px), så låt oss nu använda 0.5em (halva kvadratens bredd) för att göra skiftningen. På så vis, oavsett vad vi ändrar teckenstorleken till, kommer alla mätningar att förbli proportionella. Tack till Gabri för att påpeka användningen av ems!
a.enlarge: före innehåll: "+"; display: block; typsnittstorlek: 40px; linjehöjd: 1em; höjd: 1em; bredd: 1em; text-align: center; färg: #fff; font-weight: bold; position: absolut; topp: 50%; vänster: 50%; z-index: 100; marginal: -0.5em 0 0 -0.5em;
För att göra så tillämpar vi en negativ marginal. -0.5em på toppen och till vänster gör jobbet. Tänk på det som att ha skapat ett vakuum, i vilket vårt element sugs.
Bingo! Vår + ikonen är perfekt placerad i mitten av vår miniatyrbild. Försök ändra storlek på webbläsaren, det blir exakt dödscentrum.
Det finns väskor med potential för en teknik som denna:
För erfarna CSS-ers är detta ett mycket rakt framåtriktat trick, men om du aldrig har ansett positionering så här innan jag hoppas att den här snabba tipsen har varit till hjälp.
Accentsconagua
