Share
Hai mai visto quelle miniature che, quando si sono librate sopra, rivelano un'icona nel mezzo per suggerire cosa sta per accadere? Vi siete mai chiesti come si ottiene l'effetto? Hai mai provato, ma non sei riuscito a ottenere il punto morto delle icone, specialmente quando le tue miniature non erano di dimensioni fisse? Allora questo suggerimento rapido è per te ...
Sto parlando di miniature che potresti fare clic per attivare un lightbox, o forse una miniatura che si collega a un pezzo del portfolio. In ogni caso, è una grande aggiunta all'usabilità del tuo sito se puoi suggerire cosa sta per accadere quando qualcuno passa sopra una miniatura.
Questo Quick Tip è rivolto a coloro che hanno una conoscenza dei CSS, hanno più o meno capito di cosa si tratta e cercano la scusa perfetta per utilizzarlo ...
Facciamo rapidamente alcuni documenti insieme per dimostrare di cosa sto parlando. Innanzitutto, il nostro html:
Hover Demo Thingy
Quindi inizieremo il nostro file styles.css con alcune regole di reset. Potresti avere i tuoi metodi di ripristino preferiti, ma per il momento ho utilizzato Eric Meyer per avviare il nostro css:
/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licenza: nessuna (dominio pubblico) * / html, corpo, div, span, applet, oggetto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronimo, indirizzo, grande, citare, codice, dfn, em, img, ins, kbd, q, s, samp, piccolo, strike, forte, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, forma, etichetta, legenda, tabella, didascalia, tbody, tfoot, thead, tr, th, td, articolo, a parte, canvas, dettagli, embed, figura, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video margin: 0; padding: 0; confine: 0; dimensione carattere: 100%; font: inherit; vertical-align: baseline; / * HTML5 display-role reset per i browser più vecchi * / article, a parte, dettagli, figcaption, figure, footer, header, hgroup, menu, nav, section display: block; body line-height: 1; ol, ul list-style: none; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0;
Successivamente, per dare alla nostra pagina un po 'di struttura del layout, ecco tre colonne, all'interno di un contenitore:
E ora, naturalmente, dobbiamo aggiungere alcuni stili per far sì che si comportino come colonne all'interno di un wrapper flessibile:
/ * i nostri stili demo * / html, body background: # 29282e; .wrapper width: 90%; larghezza massima: 960 px; margine: 30px auto; .col width: 27%; imbottitura: 0 3%; fluttuare: a sinistra;
Quindi li abbiamo; tre colonne, ciascuna del 27% di larghezza, con padding a sinistra e a destra del 3% e tutte fluttuanti ordinatamente in fila. Il nostro wrapper è piacevolmente flessibile al 90% della larghezza della finestra del browser (fino a un massimo di 960 px). Abbiamo anche dato al nostro corpo e al nostro html un bel colore di sfondo scuro.
È ora di aggiungere alcune immagini al mix. Ho usato alcuni sfondi dalla collezione di città piuttosto stimolante di Atelier Olschinsky (prendili da kuvva.com per il tuo desktop ...)
Ogni immagine sarà contenuta all'interno di un elemento di figura HTML5, ma avvolta direttamente da un'ancora per collegarla a qualcosa (una versione ingrandita lightbox o un sito esterno, ecc.):
Quindi inseriremo tre delle nostre figure, una per ogni miniatura dell'immagine, all'interno di una colonna a parte.
Queste immagini sono troppo grandi, quindi per evitare che scoppino dalle loro colonne, diamo loro una larghezza massima applicando una regola classica per le immagini fluide:
figura img larghezza massima: 100%;
Un buon inizio. Abbiamo il nostro layout fluido con tre colonne, ciascuna contenente un'immagine che collega da qualche parte.
Facciamo capire agli utenti che fare clic sulle immagini fa qualcosa. Aggiungeremo uno stato di passaggio del mouse, riducendo l'opacità della miniatura:
figura a: hover img opacità: 0.4; filtro: alfa (opacità = 40); / * IE6-IE8 * /
Ora per l'icona più importante. Vogliamo un'icona, posizionata al centro dell'anteprima, per diventare visibile quando l'immagine viene posizionata sopra. Può essere qualsiasi simbolo tu voglia, ma dovrebbe indicare all'utente cosa accadrà. In questa dimostrazione, per semplicità, userò a + firmare per suggerire che verrà attivata una versione più grande.
Lo aggiungeremo nel mix usando l'elemento pseudo :prima:
a.enlarge: before content: "+"; blocco di visualizzazione; font-size: 40px; line-height: 1em; altezza: 1em; larghezza: 1em; allineamento del testo: centro; colore: #fff; font-weight: bold; posizione: assoluta; z-index: 100;
Abbiamo collocato il nostro + come generato: prima dell'elemento, parte dell'ancora che circonda l'immagine. Stiamo usando la classe "ingrandire" per identificare le ancore che avranno bisogno del +. Se abbiamo bisogno di un altro simbolo, possiamo usare un altro nome di classe.
Per cominciare abbiamo bisogno di dettare il contenuto (il nostro + carattere) e affermare che si tratta di un elemento a livello di blocco.
Importante! Le seguenti regole determinano le dimensioni. Abbiamo detto che la dimensione del font è 40px. Quindi abbiamo detto che l'altezza della linea, l'altezza e la larghezza sono tutti uguali a 1em (40px quindi). Questo ha creato un quadrato di 40x40px. Impostando il testo allineato al centro e l'altezza della linea a 1em, noi garanzia che il personaggio è seduto nel centro verticale e orizzontale del nostro quadrato.
Le prossime regole importanti sono il posizionamento assoluto (0px, 0px di default) e lo z-index che determina l'ordine di sovrapposizione dei nostri elementi posizionati. Impostando questo valore su 100, possiamo assicurarci che gli altri nostri elementi si siedano sopra di esso. Facciamolo ora ...
figura img larghezza massima: 100%; posizione: relativa; z-index: 900; figura a posizione: relativa; blocco di visualizzazione; line-height: 0px; decorazione del testo: nessuna;
Qui abbiamo fatto in modo che i tag img siano posizionati in cima al + icone impostando lo z-index superiore a 100. Affinché ciò abbia effetto, dobbiamo dichiarare un tipo di posizionamento ("relativo" in questo caso). Anche la nostra ancora ha position: relative che significa il + l'icona ora è assolutamente posizionata contro di essa.
Noterai anche alcuni altri stili aggiunti all'ancora. L'abbiamo reso visualizzato come un blocco, rimosso qualsiasi decorazione di sottolineatura, in più dato un altezza di riga di 0 px. L'altezza della linea è importante e se non ripristinata può manifestarsi come imbottitura aggiuntiva nella parte inferiore dell'elemento. Ora abbiamo fatto in modo che l'ancoraggio si adatti perfettamente all'immagine.
Le nostre icone sono in realtà sempre presenti, ma diventano visibili solo quando l'immagine che le ricopre è sospesa.
Al momento, le nostre icone sono posizionate come predefinite nell'angolo in alto a sinistra delle nostre ancore. Abbiamo bisogno di loro al centro delle miniature, indipendentemente dalla grandezza delle miniature. Dopodiché posizioniamoli al 50% da sinistra e al 50% dall'alto. Lavoro fatto, giusto?
a.enlarge: before content: "+"; blocco di visualizzazione; font-size: 40px; line-height: 1em; altezza: 1em; larghezza: 1em; allineamento del testo: centro; colore: #fff; font-weight: bold; posizione: assoluta; superiore: 50%; a sinistra: 50%; z-index: 100;
Hmm. Non proprio. L'icona non è affatto vicina al centro dell'anteprima ... Questo perché gli elementi sono allineati in relazione al loro angolo in alto a sinistra. Guarda di nuovo:
Per compensare il posizionamento, dobbiamo spostarlo a metà altezza e metà a sinistra. Abbiamo usato gli ems in precedenza per determinare le dimensioni (1em = 40px), quindi ora usiamo 0.5em (metà della larghezza del quadrato) per fare lo spostamento. In questo modo, qualunque sia la dimensione del carattere, tutte le misure rimarranno proporzionali. Grazie a Gabri per aver sottolineato l'uso di ems!
a.enlarge: before content: "+"; blocco di visualizzazione; font-size: 40px; line-height: 1em; altezza: 1em; larghezza: 1em; allineamento del testo: centro; colore: #fff; font-weight: bold; posizione: assoluta; superiore: 50%; a sinistra: 50%; z-index: 100; margine: -0.5em 0 0 -0.5em;
Per fare ciò applichiamo un margine negativo. -0.5em in alto ea sinistra farà il lavoro. Pensalo come se avessi creato un vuoto, in cui il nostro elemento viene risucchiato.
Bingo! Nostro + l'icona è perfettamente posizionata al centro della nostra miniatura. Prova a ridimensionare il browser, rimarrà esattamente al centro.
Ci sono sacche di potenziale per una tecnica come questa:
Per i CSS esperti questo è un trucco molto semplice, ma se non hai mai considerato un posizionamento come questo, spero che questo suggerimento sia stato utile.
Accentsconagua
