Share
Oggi prenderemo il design di Orman Clark's Men's Notification Badges e lo costruiremo usando HTML e CSS. Vedremo un paio di modi per ottenere l'effetto, compreso l'uso di attributi di dati HTML5 che potresti non conoscere. Tuffiamoci dentro!
Iniziamo inserendo un markup di base. Utilizzeremo il doctype HTML5 durante il tutorial. Creeremo il menu stesso aggiungendo prima un div principale seguito da voci di elenco che creeranno ciascun link di menu. Abbiamo incluso anche lo script HTML5 shiv (o shim) nella testa del nostro documento. Questo è chiamato in gioco con le versioni precedenti di Internet Explorer, consentendo loro di riconoscere e modificare gli elementi HTML5.
Distintivi di notifica del menu
Per creare la struttura del nostro menu utilizzeremo un elenco non ordinato con 4 voci di elenco e un tag di ancoraggio all'interno. Potresti anche voler annidare l'elenco all'interno di a tag per la distribuzione.
Per il bene di questa dimostrazione, creeremo un div attorno al menu con una classe di wrapper. Questo sarà solo usato per spostare il menu al centro della pagina.
Il tuo markup dovrebbe assomigliare a questo;
Distintivi di notifica del menu
- Profilo
- Ambientazione
- notifiche
- Disconnettersi
Prima di iniziare lo styling del menu, aggiungeremo alcuni resettaggi e alcuni stili di pagina. Per prima cosa eseguiremo un reset per rimuovere eventuali margini, padding ecc. Dal foglio di stile predefinito del browser. Successivamente applicheremo un colore di sfondo al corpo e una dimensione del font di 16px. Questa dimensione di carattere fissa garantisce la dimensione di base per la nostra demo, ma potresti preferire impostarla al 100% consentendo così all'utente di definire la dimensione del carattere del browser. Applicheremo una larghezza del 70% al wrapper e lo centreremo con un margine superiore di 200 px.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronimo, indirizzo, grande, citare, codice, del, dfn, em, font, img, ins, kbd, q, s, samp, piccolo, strike, forte, sub, sup, tt, var, b, u, i, centro, dl, dt, dd, ol, ul, li, fieldset, forma, etichetta, legenda, tabella, didascalia, tbody, tfoot, thead, tr, th, td margin: 0; padding: 0; confine: 0; contorni: 0; dimensione carattere: 100%; vertical-align: baseline; backound: trasparente; body line-height: 1; ol, ul list-style: none; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none;: focus outline: 0; ins text-decoration: none; del text-decoration: line -through; tabella border-collapse: collapse; border-spacing: 0; a text-decoration: none; body background: #ededed; font-size: 16px; .wrapper width: 70%; margine: 200px auto;
Per dare inizio allo styling del menu, ci concentreremo innanzitutto sulla base di esso. Indirizza prima l'elenco non ordinato, a cui è stata assegnata una classe di "menu". Daremo una visualizzazione di blocco in linea, permettendoci di determinare la larghezza / altezza di esso in base al suo contenuto come un elemento di blocco.
Successivamente applicheremo uno sfondo sfumato con tutti i prefissi del browser. Quindi aggiungi un raggio di confine, ma hey, quali sono quegli em ?! Utilizziamo ems (anziché pixel) per ridimensionare il raggio del bordo in relazione alla dimensione del carattere. Guarda la demo; vedrai il raggio crescere proporzionalmente insieme al testo più grande.
Per calcolare la dimensione che ci serve, prendiamo 3 (la dimensione del raggio di bordo desiderata in px) e la dividiamo di 16px (la dimensione del carattere del nostro corpo). Quindi 3px / 16px = 0,188 ma arrotonderemo fino a 0,2.
Quindi applicheremo un semplice bordo grigio, quindi un'ombra di casella con una goccia e un'ombra inserita. Non dimenticare anche i prefissi del browser!
.menu display: blocco in linea; background-image: -webkit-linear-gradient (in alto, rgb (249, 249, 249), rgb (240, 240, 240)); background-image: -moz-linear-gradient (in alto, rgb (249, 249, 249), rgb (240, 240, 240)); background-image: -o-linear-gradient (in alto, rgb (249, 249, 249), rgb (240, 240, 240)); background-image: -ms-linear-gradient (in alto, rgb (249, 249, 249), rgb (240, 240, 240)); background-image: linear-gradient (top, rgb (249, 249, 249), rgb (240, 240, 240)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f9f9f9', EndColorStr = "# f0f0f0"); -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; border-radius: 0.2em; border: 1px solid #cecece; -webkit-box-shadow: inset 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, .06); -moz-box-shadow: inset 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, .06); box-shadow: inset 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, .06);
Andando avanti, miglioriamo il menu disegnando gli elementi dell'elenco. Per prima cosa sposteremo gli elementi della lista a sinistra in modo che siano tutti su una riga e non nell'elenco. Quindi li posizioneremo relativamente, ciò sarà necessario in seguito quando creeremo i badge. Successivamente aggiungeremo un bordo a sinistra e un bordo a destra.
Ora dovremo scegliere come target il primo elemento della lista e l'ultimo elemento della lista, quindi lo faremo usando gli pseudo selettori; :Primogenito e :ultimo bambino (tenere presente il supporto del browser quando si utilizzano questi). Per il primo rimuoviamo il bordo a sinistra e rimuoveremo il bordo destro dall'ultima voce dell'elenco.
.menu li float: left; position: relative; border-right: 1px solid # d8d8d8; border-left: 1px solid #ffffff; .menu li: first-child border-left: none; .menu li: last-child border-right: none;
La prossima cosa che dovremo fare è modellare i tag di ancoraggio. Innanzitutto forniremo loro una famiglia di font di Helvetica Neue con alcuni tipi di font stack per le persone che non hanno il font Helvetica. Successivamente daremo loro una dimensione del font di 0,75em (13px / 16px = 0,75). Quindi applicheremo un carattere grassetto, seguito da un colore di # 666666 e applicheremo un'ombra di testo.
Ora applicheremo dei padding a sinistra e a destra di 1em (13px / 13px = 1) e alcuni line-height per centrare il testo verticalmente. Abbiamo basato l'altezza della linea su 30px, interpretata in ems.
.menu li a font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 0.75em; font-weight: bold; color: # 666666; text-shadow: 0px 1px 0px #ffffff; blocco di visualizzazione; riempimento: 0 1em; line-height: 2.5em;
Il nostro menu sta iniziando a sembrare abbastanza buono ora!
È ora di aggiungere le simpatiche bolle di notifica. Innanzitutto devi sostituire il markup HTML del menu con quanto segue. Creeremo le bolle utilizzando tag span, quindi per ogni colore applicheremo una classe appropriata. Ho aggiunto rosa, giallo e blu.
- Profilo2
- Ambientazione3
- notifiche6
- Disconnettersi
Per creare le bolle di notifica, modificheremo innanzitutto i tag di estensione con tutto tranne il colore e il colore del bordo. In questo modo possiamo cambiare facilmente i colori semplicemente cambiando i nomi delle classi.
Per prima cosa creeremo delle larghezze e altezze, prendiamo 18px / 12px = 1.5em. Poi avremo bisogno di posizionarli assolutamente (0.5em da destra e -2em dall'alto). Successivamente, verrà applicata un'altezza della linea per centrare il numero verticalmente e il centro di allineamento del testo verrà utilizzato per centrare orizzontalmente.
Una famiglia di font verrà applicata con Helvetica Neue, sempre con fallback per gli utenti senza Helvetica. Lo renderemo audace, applicheremo un colore di bianco e quindi aggiungeremo un'ombreggiatura di testo. Successivamente aggiungeremo alcune ombre di riquadri (ne aggiungeremo due: un'ombra esterna e un'ombra interna). Ricordati di crearli mentre usi i prefissi del browser. Ora aggiungeremo un raggio di 4em (circa 50 pixel).
Per la fase successiva del processo, trarremo vantaggio da alcune tecniche CSS3 e far funzionare l'effetto hover. Per prima cosa nascondiamo la bolla usando un'opacità pari a 0. Quindi, per creare le nostre animazioni divertenti, utilizzeremo alcune transizioni. Punteremo il massimo e l'opacità e diremo di facilitare l'operazione in un periodo di 0,3 secondi (3 millisecondi). Questi avranno bisogno dei prefissi del browser applicati compresi -o- e -ms-.
span position: absolute; top: -2em; a destra: 0,5em; larghezza: 1,5em; altezza: 1.5em; line-height: 1.5em; text-align: center; ont-family: 'Helvetica Neue', Helvetica, sans-serif; font-weight: bold; color: #fff; text-shadow: 0px 1px 0px rgba (0,0,0, .15); -webkit-box-shadow: inset 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, .2); -moz-box-shadow: inset 0px 1px 0px rgba (255,255,255, 0,35), 0px 1px 1px rgba (0,0,0, .2); box-shadow: inset 0px 1px 0px rgba (255,255,255, 0,35), 0px 1px 1px rgba (0,0,0, .2); -webkit-border-radius: 4em; -moz-border-radius: 4em; border-radius: 4em; Opacità: 0; filtro: alfa (opacità = 0); -webkit-transition: .3s facilità d'uso, .3s opacity easy-in; -moz-transition: .3s facilità d'uso, .3s opacity easy-in; -o-transizione: .3s facilità d'uso, .3s opacità easy-in; -ms-transizione: .3s facilità d'uso, .3s opacità easy-in; transizione: .3s facilità d'uso, .3s opacità easy-in;
Tempo per gli ultimi ritocchi estetici sulle bolle; aggiungendo alcuni CSS per lo stile dei colori. Ricorda le classi che abbiamo aggiunto ai tag span? Ciò renderà le cose abbastanza semplici, prenderemo di mira ciascun colore, applicheremo un gradiente e un colore del bordo.
.pink background-image: -webkit-linear-gradient (in alto, rgb (247, 130, 151), rgb (244, 102, 119)); background-image: -moz-linear-gradient (in alto, rgb (247, 130, 151), rgb (244, 102, 119)); background-image: -o-linear-gradient (in alto, rgb (247, 130, 151), rgb (244, 102, 119)); background-image: -ms-linear-gradient (in alto, rgb (247, 130, 151), rgb (244, 102, 119)); background-image: linear-gradient (top, rgb (247, 130, 151), rgb (244, 102, 119)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); border: 1px solid # ce4f5e; .yellow background-image: -webkit-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 72)); background-image: -moz-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 72)); background-image: -o-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 72)); background-image: -ms-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 72)); background-image: linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); border: 1px solid # dea94f; .blue background-image: -webkit-linear-gradient (in alto, rgb (172, 228, 248), rgb (108, 205, 243)); background-image: -moz-linear-gradient (in alto, rgb (172, 228, 248), rgb (108, 205, 243)); background-image: -o-linear-gradient (in alto, rgb (172, 228, 248), rgb (108, 205, 243)); background-image: -ms-linear-gradient (in alto, rgb (172, 228, 248), rgb (108, 205, 243)); background-image: linear-gradient (top, rgb (172, 228, 248), rgb (108, 205, 243)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); border: 1px solid # 79b5cb;
Certo, le nostre bolle sono meravigliosamente stilizzate, ma completamente invisibili. Dovremo aggiungere alcuni CSS per consentire la visualizzazione delle bolle al passaggio del mouse. Per prima cosa aggiungi un po 'di colore ai tag di ancoraggio quando sono al passaggio del mouse, solo un semplice grigio scuro. Successivamente valuteremo come target lo span quando l'elemento della sua lista genitore viene passato sopra. Aggiungeremo un'opacità pari a 1 per renderla visibile e modificare il valore della posizione superiore per farla apparire come se stesse scivolando verso il basso.
.menu li: passa un color: # 343434; .menu li: hover a span top: -1em; opacità: 1; filtro: alfa (opacità = 100);
Quindi cosa dire degli attributi dei dati HTML5?
Sono contento che tu abbia chiesto ...
Per creare il nostro menu con attributi di dati HTML5 dovremo prima modificare il nostro markup HTML. Useremo alcuni attributi personalizzati per creare le bolle. HTML5 ha introdotto un nuovo attributo di dati in cui il nome dell'attributo può essere qualsiasi cosa purché sia lungo almeno 1 carattere e inizia con "data-".
Per questo tutorial useremo 'data-bubble'. Questi ci permetteranno di memorizzare e accedere ai nostri valori di notifica senza aggiungere strutture di markup inutili al nostro documento. Nota che abbiamo anche spostato le nostre classi di colori sui tag di ancoraggio.
- Profilo
- Ambientazione
- notifiche
- Disconnettersi
Poiché non lavoreremo più con gli elementi span, dovrai tornare al tuo CSS ed eliminare le seguenti regole;
span position: absolute; top: -2em; a destra: 0,5em; larghezza: 1,5em; altezza: 1.5em; line-height: 1.5em; text-align: center; font-family: "Helvetica Neue"; font-weight: bold; color: #fff; text-shadow: 0px 1px 0px rgba (0,0,0, .15); -webkit-box-shadow: inset 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, .2); -moz-box-shadow: inset 0px 1px 0px rgba (255,255,255, 0,35), 0px 1px 1px rgba (0,0,0, .2); box-shadow: inset 0px 1px 0px rgba (255,255,255, 0,35), 0px 1px 1px rgba (0,0,0, .2); -webkit-border-radius: 4em; -moz-border-radius: 4em; border-radius: 4em; Opacità: 0; filtro: alfa (opacità = 0); -webkit-transition: .3s facilità d'uso, .3s opacity easy-in; -moz-transition: .3s facilità d'uso, .3s opacity easy-in; -o-transizione: .3s facilità d'uso, .3s opacità easy-in; -ms-transizione: .3s facilità d'uso, .3s opacità easy-in; transizione: .3s facilità d'uso, .3s opacità easy-in; .pink background-image: -webkit-linear-gradient (in alto, rgb (247, 130, 151), rgb (244, 102, 119)); background-image: -moz-linear-gradient (in alto, rgb (247, 130, 151), rgb (244, 102, 119)); background-image: -o-linear-gradient (in alto, rgb (247, 130, 151), rgb (244, 102, 119)); background-image: -ms-linear-gradient (in alto, rgb (247, 130, 151), rgb (244, 102, 119)); background-image: linear-gradient (top, rgb (247, 130, 151), rgb (244, 102, 119)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); border: 1px solid # ce4f5e; .yellow background-image: -webkit-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 72)); background-image: -moz-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 72)); background-image: -o-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 72)); background-image: -ms-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 72)); background-image: linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); border: 1px solid # dea94f; .blue background-image: -webkit-linear-gradient (in alto, rgb (172, 228, 248), rgb (108, 205, 243)); background-image: -moz-linear-gradient (in alto, rgb (172, 228, 248), rgb (108, 205, 243)); background-image: -o-linear-gradient (in alto, rgb (172, 228, 248), rgb (108, 205, 243)); background-image: -ms-linear-gradient (in alto, rgb (172, 228, 248), rgb (108, 205, 243)); background-image: linear-gradient (top, rgb (172, 228, 248), rgb (108, 205, 243)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); border: 1px solid # 79b5cb; .menu li: hover a span top: -1em; opacità: 1; filtro: alfa (opacità = 100);
Ora miriamo ai nostri attributi dei dati, invece, dovremo aggiungere alcune regole al nostro CSS.
Sembrerà molto simile a quello che abbiamo usato per i nostri elementi di campata. Questa volta però, ci rivolgeremo a: dopo pseudo elementi di tag di ancoraggio con un attributo di "data-bubble". Per fare ciò utilizziamo i selettori di attributi CSS.
Dato che stiamo usando uno: dopo lo pseudo (e quindi la generazione di contenuto) dovremo definire un po 'di carne con il contenuto: "Ancora una volta useremo il nostro attributo personalizzato che abbiamo creato nel nostro HTML e inseriremo quello.
Ancora una volta, per gestire la visibilità della nostra bolla, gli forniremo un'opacità pari a 1 quando il link viene spostato sopra. Sfortunatamente, a causa delle limitazioni con i selettori di attributi, non possiamo animarli con il CSS stesso.
.menu li a [data-bubble]: dopo content: attr (data-bubble); position: absolute; top: -1.25em; a destra: 0,5em; larghezza: 1,5em; altezza: 1.5em; line-height: 1.5em; text-align: center; font-family: "Helvetica Neue"; font-weight: bold; color: #fff; text-shadow: 0px 1px 0px rgba (0,0,0, .15); -webkit-box-shadow: inset 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, .2); -moz-box-shadow: inset 0px 1px 0px rgba (255,255,255, 0,35), 0px 1px 1px rgba (0,0,0, .2); box-shadow: inset 0px 1px 0px rgba (255,255,255, 0,35), 0px 1px 1px rgba (0,0,0, .2); -webkit-border-radius: 4em; -moz-border-radius: 4em; border-radius: 4em; Opacità: 0; filtro: alfa (opacità = 0); .menu li: passa un [data-bubble]: dopo opacity: 1; filtro: alfa (opacità = 100);
Infine, dobbiamo dare uno stile al contenuto generato all'interno delle varie classi in modo che possiamo cambiare facilmente i colori (esattamente come abbiamo fatto con gli elementi span).
a.pink [data-bubble]: dopo background-image: -webkit-linear-gradient (in alto, rgb (247, 130, 151), rgb (244, 102, 119)); background-image: -moz-linear-gradient (in alto, rgb (247, 130, 151), rgb (244, 102, 119)); background-image: -o-linear-gradient (in alto, rgb (247, 130, 151), rgb (244, 102, 119)); background-image: -ms-linear-gradient (in alto, rgb (247, 130, 151), rgb (244, 102, 119)); background-image: linear-gradient (top, rgb (247, 130, 151), rgb (244, 102, 119)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); border: 1px solid # ce4f5e; a.yellow [data-bubble]: dopo background-image: -webkit-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 72)); background-image: -moz-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 72)); background-image: -o-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 72)); background-image: -ms-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 72)); background-image: linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); border: 1px solid # dea94f; a.blue [data-bubble]: dopo background-image: -webkit-linear-gradient (in alto, rgb (172, 228, 248), rgb (108, 205, 243)); background-image: -moz-linear-gradient (in alto, rgb (172, 228, 248), rgb (108, 205, 243)); background-image: -o-linear-gradient (in alto, rgb (172, 228, 248), rgb (108, 205, 243)); background-image: -ms-linear-gradient (in alto, rgb (172, 228, 248), rgb (108, 205, 243)); background-image: linear-gradient (top, rgb (172, 228, 248), rgb (108, 205, 243)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); border: 1px solid # 79b5cb;
Abbiamo creato con successo un menu insieme ad alcune bolle di notifica e li abbiamo animati! Siamo persino andati oltre e abbiamo sfruttato nuove tecniche all'interno di HTML5.
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
Accentsconagua