Share
Heb je ooit die miniaturen gezien die, wanneer eroverheen zweeft, een pictogram in het midden onthullen om te suggereren wat er gaat gebeuren? Ooit afgevraagd hoe het effect wordt bereikt? Ooit geprobeerd, maar het lukte het niet om de pictogrammen in het midden te krijgen, vooral wanneer je miniaturen niet van vaste afmetingen waren? Dan is deze Quick Tip iets voor jou ...
Ik bedoel miniaturen waarop je zou kunnen klikken om een lightbox te activeren, of misschien een miniatuur die linkt naar een portfolio. In elk geval is het een geweldige aanvulling op de bruikbaarheid van uw site als u kunt voorstellen wat er gaat gebeuren wanneer iemand over een miniatuur zweeft.
Deze snelle tip is bedoeld voor diegenen onder u die CSS hebben begrepen, min of meer achterhaald hebben waar positionering over gaat en op zoek zijn naar het perfecte excuus om het te gebruiken ...
Laten we snel een paar documenten samengooien om te laten zien waar ik het over heb. Ten eerste onze html:
Hover Demo Thingy
Daarna beginnen we ons styles.css-bestand met enkele resetregels. Je hebt misschien je eigen voorkeursreset-methoden, maar voorlopig heb ik Eric Meyer's gebruikt om ons css te starten:
/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licentie: geen (public domain) * / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, groot, citeren, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, vorm, label, legenda, tabel, bijschrift, tbody, tfoot, thead, tr, th, td, artikel, opzij, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, navigatie, uitvoer, robijn, sectie, samenvatting, tijd, markering, audio, video margin: 0; opvulling: 0; rand: 0; tekengrootte: 100%; lettertype: inherit; vertical-align: basislijn; / * HTML5 weergave-rol reset voor oudere browsers * / artikel, opzij, details, figcaption, figuur, footer, header, hgroup, menu, nav, sectie display: block; body line-height: 1; ol, ul lijststijl: geen; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0;
Vervolgens, om onze pagina een beetje opmaakstructuur te geven, zijn hier drie kolommen, in een container:
En nu moeten we natuurlijk een aantal stijlen toevoegen om ervoor te zorgen dat ze zich gedragen als kolommen binnen een flexibel omhulsel:
/ * onze demostijlen * / html, body background: # 29282e; .wrapper width: 90%; maximale breedte: 960 px; marge: 30px auto; .col width: 27%; opvulling: 0 3%; zweven: links;
Dus daar hebben we ze; drie kolommen, elk 27% breed, met opvulling links en rechts van 3% en allemaal netjes op een rij. Onze verpakking is mooi flexibel op 90% van de browservensterbreedte (tot een maximum van 960 px). We hebben ons lichaam en html ook een mooie, donkere achtergrondkleur gegeven.
Het is tijd om wat afbeeldingen aan de mix toe te voegen. Ik heb wat wallpapers uit de nogal inspirerende stedencollectie van Atelier Olschinsky gebruikt (pak ze van kuvva.com voor je bureaublad ...)
Elke afbeelding wordt opgenomen in een HTML5-figuurelement, maar direct ingepakt door een anker om het met iets te verbinden (een lightbox-vergrote versie of een externe site, enz.):
Daarom plaatsen we drie van onze figuren, één voor elke miniatuurweergave, in een eigen kolom.
Deze afbeeldingen zijn te groot, dus om te voorkomen dat ze uit hun kolommen barsten, geven we ze een maximale breedte door een klassieke vloeiende afbeeldingsregel toe te passen:
figuur img max-width: 100%;
Een goede start. We hebben onze vloeiende lay-out met drie kolommen, die elk een afbeelding bevatten die ergens naar toe linkt.
Laten we het gebruikers duidelijk maken dat het klikken op de afbeeldingen iets doet. We voegen een hover-status toe, waardoor de dekking van de thumbnail wordt verkleind:
figuur a: hover img opacity: 0.4; filter: alpha (dekking = 40); / * IE6-IE8 * /
Nu voor het allerbelangrijkste pictogram. We willen dat een pictogram dat in het midden van de miniatuur wordt geplaatst, zichtbaar wordt wanneer de afbeelding wordt omgedraaid. Het kan een willekeurig symbool zijn, maar het moet de gebruiker aangeven wat er gaat gebeuren. In deze demonstratie gebruik ik voor het gemak gewoon een + teken om te suggereren dat een grotere versie zal worden geactiveerd.
We zullen het in de mix toevoegen met behulp van het pseudo-element :voor:
a.enlarge: before content: "+"; weergave: blok; lettertypegrootte: 40px; regelhoogte: 1em; hoogte: 1em; breedte: 1em; text-align: center; kleur: #fff; lettertype: vet; positie: absoluut; z-index: 100;
We hebben onze + als een gegenereerd: vóór element, een deel van het anker rondom de afbeelding. We gebruiken de klasse "vergroten" om de ankers te identificeren die de +. Als we een ander symbool nodig hebben, kunnen we een andere klassennaam gebruiken.
Om te beginnen moeten we de inhoud dicteren (onze + teken) en stel dat het een blokniveauelement is.
Belangrijk! De volgende regels bepalen vervolgens de dimensies. We hebben gezegd dat de lettergrootte 40px is. Dan hebben we gezegd dat de lijnhoogte, de hoogte en de breedte allemaal gelijk zijn aan 1em (dus 40px). Dit heeft een vierkant van 40x40px gemaakt. Door de tekst-align naar center en de line-height naar 1em in te stellen, wij garantie dat het personage in het verticale en horizontale midden van ons vierkant ligt.
De volgende belangrijke regels zijn de absolute positionering (standaard 0px, 0px) en de z-index die de stapelvolgorde van onze geplaatste elementen bepaalt. Door dit op 100 te zetten, kunnen we ervoor zorgen dat onze andere elementen er bovenop zitten. Laten we dat nu doen ...
figuur img max-width: 100%; positie: relatief; z-index: 900; figuur a positie: relatief; weergave: blok; regelhoogte: 0px; tekstdecoratie: geen;
Hier hebben we ervoor gezorgd dat de img-tags bovenop de + pictogrammen door de z-index hoger dan 100 in te stellen. Om dat effect te krijgen, moet u een positioneringstype opgeven (in dit geval "relatief"). Ons anker heeft ook position: relative wat betekent het + pictogram staat er nu absoluut tegenover.
Je zult ook een paar andere stijlen opmerken die aan het anker zijn toegevoegd. We hebben het weergegeven als een blok, alle onderstrepingsversies verwijderd en een regelhoogte van 0 px gegeven. De lijnhoogte is belangrijk en indien niet gereset kan dit zich manifesteren als extra opvulling onderaan het element. We hebben nu ervoor gezorgd dat het anker precies om het beeld past.
Onze pictogrammen zijn eigenlijk altijd aanwezig, maar ze worden alleen zichtbaar als het beeld dat hen bedekte, over de afbeelding hangt.
Op dit moment staan onze pictogrammen als standaard linksboven in onze ankers. We hebben ze in het midden van de miniaturen nodig, ongeacht hoe groot de miniaturen zijn. Laten we ze vervolgens 50% van links en 50% vanaf de bovenkant positioneren. Werk gedaan, toch?
a.enlarge: before content: "+"; weergave: blok; lettertypegrootte: 40px; regelhoogte: 1em; hoogte: 1em; breedte: 1em; text-align: center; kleur: #fff; lettertype: vet; positie: absoluut; top: 50%; links: 50%; z-index: 100;
Hmm. Niet echt. Het pictogram is nergens dichtbij het midden van de miniatuur ... Dat komt omdat elementen worden uitgelijnd in verhouding tot hun linkerbovenhoek. Kijk opnieuw:
Om de positionering te compenseren, moeten we hem half zo hoog en de helft van zijn breedte naar links verschuiven. We hebben eerder ems gebruikt om de dimensies te bepalen (1em = 40px), dus laten we nu 0.5em (de helft van de breedte van het vierkant) gebruiken om te schakelen. Op deze manier blijven alle afmetingen proportioneel, ongeacht de lettergrootte. Met dank aan Gabri voor het wijzen op het gebruik van ems!
a.enlarge: before content: "+"; weergave: blok; lettertypegrootte: 40px; regelhoogte: 1em; hoogte: 1em; breedte: 1em; text-align: center; kleur: #fff; lettertype: vet; positie: absoluut; top: 50%; links: 50%; z-index: 100; marge: -0,5 em 0 0 -0,5 em;
Om dat te doen, passen we een negatieve marge toe. -0.5em bovenaan en links zullen het werk doen. Zie het als een vacuüm gecreëerd hebben, waarin ons element wordt gezogen.
Bingo! Onze + pictogram is perfect gepositioneerd in het midden van onze miniatuur. Probeer de grootte van de browser te wijzigen, deze blijft precies in het midden van het centrum.
Er zijn zakken met mogelijkheden voor een techniek als deze:
Voor doorgewinterde CSS-ers is dit een heel simpele truc, maar als je nog nooit hebt nagedacht over positionering, hoop ik dat deze snelle tip nuttig is geweest.
Accentsconagua
