Share
Ciao ragazzi, oggi creeremo Tagtastic Tag Cloud di Premium Pixels. Come esperimento in approcci alternativi, creeremo i tag usando sfumature, ombre e (soprattutto) trasformazioni CSS, che formeranno il punto di ogni tag. Dopo il completamento faremo un ulteriore passo avanti e provvederemo a IE.
Abbiamo già trattato i tag su Webdesigntuts +, ma in questa occasione esamineremo un metodo alternativo per creare tutti i bit e le parti compositi. Ci possono essere modi più nitidi per creare l'effetto, ma il nostro esempio si asterrà dalle immagini, dall'uso molto markup pulito e uno stile insolito. Restiamo bloccati!
Iniziamo inserendo alcuni markup di base, incluso il doctype HTML5 familiare. Faremo anche riferimento al nostro foglio di stile all'interno della testa del nostro documento.
Ai fini di questo tutorial creeremo un wrapper / container per contenere i nostri tag. Molto probabilmente avrai bisogno di qualcosa di simile se dovessi utilizzarli, ad esempio, in una sidebar del blog.
Per il nostro, creeremo semplicemente un div con una classe di wrapper, applichiamo una larghezza di 340px e un margine di 50px auto per centrare il wrapper sulla pagina. Ho aggiunto 50px invece di 0 solo per aggiungere un po 'di margine superiore in modo che i nostri tag non tocchino la parte superiore della finestra del browser. Durante l'introduzione di questo CSS aggiungeremo alcuni stili per il corpo (come un'immagine di sfondo) e applicheremo un reset.
html, body, div, arco, applet, oggetto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, e, indirizzo, citare, codice, del, DFN, em, img, ins, KBD, q, s, SAMP, piccolo, esercizio, forte, sub, sup, TT, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, forma, etichetta, legenda, tavolo, didascalia, tbody, tfoot, thead, TR, th, td, articolo, a parte, tela, dettagli, incorporare, figura, figcaption, piè, intestazione, hgroup, menu, navigazione, uscita, rubino, sezione, sintesi, tempo, mark, audio, video, ingresso, textarea, selezionare background: trasparente; border: 0; font-size: 100%; margin: 0; muta: 0; padding: 0; vertical-align: baseline articolo, parte , dettagli, figcaption, figura, piè, intestazione, hgroup, menu, navigazione, sezione display: block body line-height: 1 blockquote, q citazioni: nessuna blockquote: prima, blockquote: dopo, q: prima , q: after content: none
body font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; background: url (... /images/bg.jpg) ripetizione; -webkit-font-smoothing: antialiased; .wrapper larghezza massima: 340px; margine: 50px auto;
Ho strutturato questi tag molto semplicemente; tutto ciò che useremo è un tag di ancoraggio (una scelta logica in quanto probabilmente fungeranno da collegamenti a qualcosa o qualcosa). Per questo tutorial ho dato una classe di "tag", ma questo può essere cambiato in qualsiasi cosa tu voglia.
alta risoluzione
Giusto, alla prossima parte! Inizieremo ora con lo styling del tag: qui c'è un bel po 'di codice ma non lasciate che vi confondano, spiegherò che cosa sta succedendo.
Ho prima aggiunto alcune cose di base qui;
Successivamente abbiamo definito alcune impostazioni di carattere, dimensioni, famiglia e peso, seguite da un colore e un'ombra di testo. Dopo di che abbiamo applicato un po 'di padding, usando ems in modo che tutto sia dimensionato in relazione alla dimensione del carattere del corpo o alle dimensioni del carattere del browser. Successivamente, un semplice bordo, sebbene non ne abbiamo applicato uno a sinistra. Gli ems sono spuntati di nuovo! Questa volta li applicheremo al raggio del bordo ma solo agli angoli in alto a destra e in basso a destra. Ok, sei ancora sveglio? C'è dell'altro ... dopo useremo alcuni gradienti CSS3 (ho proseguito e ho usato l'app Gradient per calcolare i valori). La parte finale è alcune ombre di riquadri, un riquadro e un'ombra esterna. Ricorda quei prefissi!
.etichetta float: sinistra; margine: 0 0 7px 20px; position: relative; famiglia di font: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.75em; font-weight: bold; text-decoration: none; color: # 996633; text-shadow: 0px 1px 0px rgba (255,255,255, .4); imbottitura: 0.417em 0.417em 0.417em 0.917em; border-top: 1px solid # d99d38; border-right: 1px solid # d99d38; border-bottom: 1px solid # d99d38; -webkit-border-radius: 0 0,25em 0,25em 0; -moz-border-radius: 0 0.25em 0.25em 0; border-radius: 0 0.25em 0.25em 0; background-image: -webkit-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 71)); background-image: -moz-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 71)); background-image: -o-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 71)); background-image: -ms-linear-gradient (in alto, rgb (254, 218, 113), rgb (254, 186, 71)); background-image: linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 71)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba47"); -webkit-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); -moz-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); z-index: 100;
Va bene, abbiamo completato la parte principale del tag, la parte successiva è creare la freccia. Per aggiungere questo useremo il :prima pseudo elemento. Sperimenteremo anche con alcune tecniche avanzate qui da CSS; trasformazioni. La creazione di queste frecce comportava molte prove ed errori. Ho dovuto provare diverse larghezze e altezze insieme al posizionamento superiore e inferiore per ottenere il più perfetto possibile! Ogni feedback è quindi molto gradito ...
Abbiamo usato lo stesso gradiente di sfondo di prima ma con una piccola modifica: poiché ruoteremo il quadrato che stiamo per realizzare, dovremo anche ruotare il gradiente in modo che corrisponda alla parte principale del etichetta. L'app per gradienti è stata utile per farmi cambiare la direzione del gradiente. La parte successiva è creare dei bordi, a sinistra e in basso. Tutto ciò che rimane per quanto riguarda la freccia è aggiungere un raggio di confine per smussare il punto e infine applicare le nostre trasformazioni. Ruoteremo il quadrato che abbiamo creato a 45 gradi in modo che assomigli ad una freccia. Noi abbiamo usato transform: 45; insieme a quelli prefissati.
.tag: before content: "; width: 1.30em; height: 1.358em; background-image: -webkit-linear-gradient (sinistra in alto, rgb (254, 218, 113), rgb (254, 186, 71)) ; background-image: -moz-linear-gradient (sinistra in alto, rgb (254, 218, 113), rgb (254, 186, 71)); background-image: -o-linear-gradient (sinistra in alto, rgb ( 254, 218, 113), rgb (254, 186, 71)); background-image: -ms-linear-gradient (sinistra in alto, rgb (254, 218, 113), rgb (254, 186, 71)); background-image: linear-gradient (sinistra in alto, rgb (254, 218, 113), rgb (254, 186, 71)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 1, StartColorStr = '# feda71' , EndColorStr = "# feba47"); position: absolute; left: -0.69em; top: .2em; -webkit-transform: ruotare (45deg); -moz-transform: ruotare (45deg); -o-transform: ruotare (45deg); transform: ruotare (45deg); border-left: 1px solid # d99d38; border-bottom: 1px solid # d99d38; -webkit-border-radius: 0 0 0 0.25em; -moz-border-radius: 0 0 0 0.25em; border-radius: 0 0 0 0.25em; z-index: 1;
Ora dovresti avere qualcosa di simile al seguente; Nota Ho ingrandito in modo da poter vedere dove si connette la freccia alla parte principale, questo è appena notabile se visto a dimensioni normali.
L'ultima parte per completare il nostro tag è creare il piccolo buco su di esso. Qui useremo di nuovo uno pseudo, ma questa volta, il :dopo elemento. Quello che abbiamo fatto per creare il buco è piuttosto semplice. Abbiamo definito larghezza e altezza in ems in modo che possa crescere senza intoppi. Successivamente abbiamo aggiunto un raggio di bordo grande che creerà un cerchio con un bordo per delinearlo. Di seguito abbiamo aggiunto un'ombra esterna simile all'ombra del testo. Finalmente l'abbiamo posizionato (durante l'utilizzo di ems).
.tag: after content: "; width: 0.5em; height: 0.5em; background: #fff; -webkit-border-radius: 4.167em; -moz-border-radius: 4.167em; border-radius: 4.167em; border: 1px solid # d99d38; -webkit-box-shadow: 0 1px 0 #faeaba; -moz-box-shadow: 0 1px 0 #faeaba; box-shadow: 0 1px 0 #faeaba; posizione: assoluta; in alto: 0,667 em; left: -0.083em; z-index: 9999;
Per rendere i nostri tag ancora più fantastici aggiungeremo alcuni stili di passaggio del mouse. Dovremo aggiungere questo alla parte principale del tag e alla freccia (ricordando di ruotare il gradiente per la freccia). Abbiamo anche cambiato il colore del bordo su entrambi.
.tag: hover background-image: -webkit-linear-gradient (in alto, rgb (254, 225, 141), rgb (254, 200, 108)); background-image: -moz-linear-gradient (in alto, rgb (254, 225, 141), rgb (254, 200, 108)); background-image: -o-linear-gradient (in alto, rgb (254, 225, 141), rgb (254, 200, 108)); background-image: -ms-linear-gradient (in alto, rgb (254, 225, 141), rgb (254, 200, 108)); background-image: linear-gradient (top, rgb (254, 225, 141), rgb (254, 200, 108)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# fee18d', EndColorStr = "# fec86c"); border-color: # e1b160; .tag: hover: before background-image: -webkit-linear-gradient (sinistra in alto, rgb (254, 225, 141), rgb (254, 200, 108)); background-image: -moz-linear-gradient (sinistra in alto, rgb (254, 225, 141), rgb (254, 200, 108)); background-image: -o-linear-gradient (sinistra in alto, rgb (254, 225, 141), rgb (254, 200, 108)); background-image: -ms-linear-gradient (sinistra in alto, rgb (254, 225, 141), rgb (254, 200, 108)); background-image: linear-gradient (sinistra in alto, rgb (254, 225, 141), rgb (254, 200, 108)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 1, StartColorStr = '# fee18d', EndColorStr = "# fec86c"); border-color: # e1b160;
Se desideri ancora mostrare i tuoi tag in piena gloria agli utenti di IE, dovrai adottare un approccio diverso nei confronti di questi tag, iniziando con la creazione di un foglio di stile specifico per IE. Spiegherò perché ... In primo luogo, molti dei nostri effetti CSS3 non funzioneranno nelle versioni precedenti a IE9 (solo una coppia lavora in IE9 così com'è), ma qui il problema principale sono le trasformazioni che non funzionano. Per soddisfare gli utenti di IE, modificheremo un po 'il nostro codice. Iniziamo cambiando prima il nostro codice HTML, sostituendo il involucro div e tutto ciò che è dentro con:
alta risoluzione
Useremo di nuovo un tag di ancoraggio ma con 3 span al suo interno; ne avremo bisogno per creare la freccia, la parte principale e la fine che ha il raggio del bordo.
Per garantire che i nostri tag funzionino in IE, dovremo utilizzare le immagini. Inizia cancellando tutto sotto gli stili. Wrapper, tutto ciò che riguarda i tag! Ora dovrai incollare il seguente frammento. Stiamo semplicemente applicando alcune immagini di sfondo qui, ma anche ripetendo lo sfondo del testo sull'asse x in quanto il testo potrebbe essere di qualsiasi lunghezza! Anche Supercalafragalisticexpialadoshus!
.arrow width: 15px; altezza: 25px; float: sinistra; background: url (... /images/arrow.png) no-repeat; .text height: 25px; float: sinistra; padding-left: 4px; padding-right: 4px; background: url (... /images/text.png) repeat-x; famiglia di font: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.75em; font-weight: bold; color: # 996633; text-shadow: 0px 1px 0px rgba (255,255,255, .4); line-height: 23px; .end larghezza: 4px; altezza: 25px; float: sinistra; background: url (... /images/end.png) no-repeat; .tag: hover .arrow background-image: url (... /images/arrow_hover.png); .tag: hover .text background-image: url (... /images/text_hover.png); .tag: hover .end background-image: url (... /images/end_hover.png);
Bene, questo è tutto! Questo è un altro tutorial completo e sembra buono! Abbiamo preso questi tag tagtastic e li abbiamo creati con i CSS mentre ci occupavamo di IE allo stesso tempo. Questi tag possono essere utilizzati per tutti i tipi di cose - vai avanti e usali in una barra laterale, blog, qualunque cosa tu voglia!
Spero che questo tutorial ti sia piaciuto, grazie per la lettura.
Accentsconagua