Share
Oggi lo stiamo preparando con un tutorial su come progettare e codificare il proprio tag cloud con Photoshop, CSS e alcune immagini minuscole! Useremo la tecnica delle porte scorrevoli secolari, ma includeremo alcuni metodi avanzati di selettore CSS verso la fine nel caso in cui si desideri spingere la busta e utilizzarla all'interno di WordPress. Pronto, pronto, via!
Un po 'di lucido nei punti giusti può davvero dare un tocco a un design di pagina altrimenti standard. Oggi vedremo come creare la tua variazione personalizzata dell'elemento "tag cloud" che puoi trovare praticamente in qualsiasi sistema di blogging oggigiorno.
Scorreremo rapidamente nel design (è facile, peezy), e quindi scaviamo nel CSS che fa sì che tutto questo si unisca. Usalo nei tuoi progetti, inseriscilo in un blog personale, dipende totalmente da te? tuffiamoci dentro!
I puristi dei CSS nel pubblico possono rabbrividire a questo punto perché apriremo Photoshop. Perché? Perché vogliamo creare un design di tag completamente personalizzato. Questo tag specifico che useremo oggi può essere ottenuto in CSS? Probabilmente - sono sicuro che alcuni ninja CSS là fuori saranno pronti a sottolineare che queste sono solo forme basilari? ma cosa succede se si desidera aggiungere texture? O una forma completamente diversa (bordi smerlati chiunque)?
A prescindere dal mal di testa del browser che cerca di far funzionare tutto questo con i CSS, la linea di fondo è che è bene sapere come usare insieme immagini e CSS all'unisono, quindi è proprio quello che faremo.
Vai avanti e accendi Photoshop. Apri un nuovo documento con dimensioni 71 px per 29 px.
La larghezza in realtà non importa molto qui? ma l'altezza sarà qualcosa che vorrete ricordare.
Quindi, disegniamo a rettangolo arrotondato sul nostro documento con un raggio di 2px. Lascia un po 'di spazio per un ombreggiatura più tardi? nel nostro caso, ho lasciato 2px in basso e ai lati.
Ora è il momento di creare la nostra forma personalizzata. Useremo Photoshop Aggiungi punto e Converti punto utensili. Non c'è molto altro al di là del semplice armeggiare con i punti finché non hai la forma che desideri, quindi gioca un po '. Ecco la nostra:
Abbiamo bisogno di un piccolo buco nel nostro tag? lo sai, quindi le persone possono eseguire il loop di una stringa virtuale attraverso di essa. Ok, forse no, ma aggiunge un tocco in più per noi che non sarebbe possibile con i CSS. Utilizzare il strumento ellittico di selezione e disegna una selezione circolare (tieni premuto il tasto Maiusc mentre disegni per tenerlo perfetto).
Una volta effettuata la selezione, selezionare l'inverso della selezione (Seleziona> Inversa) e trasformarlo in una maschera vettoriale sulla forma del tag utilizzando il Aggiungi maschera di livello pulsante nella parte inferiore dell'ispettore del livello.
Per ragioni di brevità (vogliamo arrivare alla parte di codifica, giusto ?!), cerchiamo di sfogliare gli stili di livello qui. Puoi aggiungere le tue regolazioni, ma ecco come appare il nostro:
Il risultato finale dovrebbe assomigliare a questo:
Noterai nel PSD (all'interno della cartella Download per questo tutorial) che ho anche aggiunto nel nostro testo. Sentiti libero di fare lo stesso nel caso tu abbia bisogno di usarlo all'interno di qualsiasi modello di design.
Nota: Puoi invertire facilmente l'orientamento del tag da solo. In realtà ti mostreremo come creare il tag rivolto a sinistra e rivolto a destra nella fase di codifica.
Woot! Quindi abbiamo progettato il nostro tag? ma come lo useremo in una vera pagina web? Inizieremo tagliando il nostro tag in tre parti:
Salva questi tutti come grafici PNG per preservare la trasparenza e memorizzarli in una cartella chiamata "images".
Ora dobbiamo creare il nostro markup di base. Stiamo per iniziare usando un approccio semplice e logico usando strati di DIV, ma come per tutto ciò che riguarda il codice, saremo in grado di ripulirlo (e ridurre la quantità di codice richiesta) nei passaggi successivi.
Ecco il nostro markup di base per ogni tag:
Design
Rivediamo rapidamente: abbiamo essenzialmente un DIV (.tag) del tag wrapper principale, con tre DIV annidati:
Puoi andare avanti e ripetere quel blocco di codice alcune volte per testare più tag impilati uno accanto all'altro.
Ora è il momento di aggiungere il nostro CSS.
Inizieremo il CSS applicando alcune regole di base a ciascuna delle nostre div. Ti mostrerò il codice per ciascuno, poi spiegherò che cosa sta facendo:
Accentsconagua
.tag font-size: 11pt; text-shadow: 0 1px 1px rgba (255, 255, 255, 0,4); fluttuare: a sinistra; / * Rende ciascun tag unito in un pezzo * / margine: 5px; .tag .center background: url ("images / gradient.png") repeat-x scroll left top transparent; fluttuare: a sinistra; altezza: 29 px; / * Come l'altezza dell'immagine * / larghezza: auto; imbottitura: 0px 6px; / * Dai al testo un po 'di spazio per respirare * / .tag .center a vertical-align: middle; / * Importante per il montaggio del testo perfettamente * / line-height: 21pt; / * Importante per montare perfettamente il testo * / color: # 0f2d39; decorazione del testo: nessuna; Questo blocco di codice imposta l'elemento che avvolgerà il nostro tag; Tieni presente che stiamo aggiungendo alcune regole sui tipi qui, un semplice float e un margine tra ogni tag per distanziarli.
Le seconde due regole del CSS precedente coprono la parte centrale del tag, stabilendo il gradiente di sfondo e una certa spaziatura.
A questo punto, dovresti avere alcuni tag che assomigliano a questo:
Ora diamo un'occhiata ad alcuni stili per gli elementi laterali sinistro e destro.
.tag-left .left background: url ("images / tagleft_left.png") no-repeat scroll left top transparent; blocco di visualizzazione; fluttuare: a sinistra; altezza: 29 px; / * Come l'altezza dell'immagine * / larghezza: 15px; / * Come la larghezza dell'immagine * / .tag-left .right background: url ("images / tagleft_right.png") scorrimento senza ripetizione a destra in alto trasparente; blocco di visualizzazione; fluttuare: a sinistra; altezza: 29 px; / * Come l'altezza dell'immagine * / larghezza: 4px; / * Come la larghezza dell'immagine * / Il blocco di codice sopra riportato fa tre cose principali:
Ora i tuoi tag dovrebbero essere abbastanza vicini da completare:
Ma cosa succede se vogliamo includere un altro tipo di tag? dici uno che si trova nella direzione opposta? È qui che entrano in gioco i selettori "tag-left" e "tag-right". Aggiungendo questi al livello più alto, possiamo aggiungere solo poche regole al nostro CSS per consentire un tag completamente diverso:
.tag-right .left background: url ("images / tagright_left.png") no-repeat scroll left top transparent; blocco di visualizzazione; fluttuare: a sinistra; altezza: 29 px; / * Come l'altezza dell'immagine * / larghezza: 4px; / * Come la larghezza dell'immagine * / .tag-right .right background: url ("images / tagright_right.png") scorrimento senza ripetizione a destra in alto trasparente; blocco di visualizzazione; fluttuare: a sinistra; altezza: 29 px; / * Come l'altezza dell'immagine * / larghezza: 16px; / * Come la larghezza dell'immagine * / Quale dovrebbe darti lo stile "right-tag" corretto:
Fatto! Bene, sorta? ad essere onesti, questo è un modo veramente pesante di gestire questo effetto. Nel prossimo passaggio, ti porteremo in alcuni selettori CSS più avanzati per un approccio più aggraziato.
Google Fonts Nota: Potresti aver notato che sto usando un font personalizzato qui (Droid Sans). Aggiungere il tuo carattere personalizzato è facile, basta visitare il sito di Google Fonts, trovare il carattere che ti piace e aggiungere il codice di incorporamento e la regola CSS per il carattere.
Il bello dei caratteri di Google (o qualcosa di simile) è che puoi applicare la maggior parte dello stile dei caratteri CSS al testo? questo significa che possiamo usare attributi come text-shadow per creare l'effetto di luce sottile.
Chiunque abbia programmato per un certo periodo di tempo ti dirà che esiste SEMPRE un modo per migliorare un pezzo di codice. Questo è esattamente quello che faremo in questo ultimo passaggio.
Iniziamo esaminando ciò che è sgraziato circa l'approccio precedente.
Ecco un altro approccio usando i CSS :prima e :dopo selettori per alleggerire il carico.
Iniziamo guardando il CSS originale nella sua interezza e poi riscrivilo usando i nostri selettori:
/ * Generic Tag Styling / Typography +++++++++++++++++++++++++++++++++++++++++++ ++++++++ * / .tag font-size: 11pt; text-shadow: 0 1px 1px rgba (255, 255, 255, 0,4); fluttuare: a sinistra; / * Rende ciascun tag unito in un pezzo * / margine: 5px; .tag .center background: url ("images / gradient.png") repeat-x scroll left top transparent; fluttuare: a sinistra; altezza: 29 px; / * Come l'altezza dell'immagine * / larghezza: auto; imbottitura: 0px 6px; / * Dai al testo un po 'di spazio per respirare * / .tag .center a vertical-align: middle; / * Importante per il montaggio del testo perfettamente * / line-height: 21pt; / * Importante per montare perfettamente il testo * / color: # 0f2d39; decorazione del testo: nessuna; / * Regole del cartellino sinistro +++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++ * / .tag-left .left background: url ("images / tagleft_left.png") scroll senza ripetizione lasciato in alto trasparente; blocco di visualizzazione; fluttuare: a sinistra; altezza: 29 px; / * Come l'altezza dell'immagine * / larghezza: 15px; / * Come la larghezza dell'immagine * / .tag-left .right background: url ("images / tagleft_right.png") scorrimento senza ripetizione a destra in alto trasparente; blocco di visualizzazione; fluttuare: a sinistra; altezza: 29 px; / * Come l'altezza dell'immagine * / larghezza: 4px; / * Come la larghezza dell'immagine * / / * Regole del tag di destra ++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++ * / .tag-right .left background: url ("images / tagright_left .png ") no-repeat scroll left top transparent; blocco di visualizzazione; fluttuare: a sinistra; altezza: 29 px; / * Come l'altezza dell'immagine * / larghezza: 4px; / * Come la larghezza dell'immagine * / .tag-right .right background: url ("images / tagright_right.png") scorrimento senza ripetizione a destra in alto trasparente; blocco di visualizzazione; fluttuare: a sinistra; altezza: 29 px; / * Come l'altezza dell'immagine * / larghezza: 16px; / * Come la larghezza dell'immagine * / / * Generic Tag Styling / Typography +++++++++++++++++++++++++++++++++++++++++++ ++++++++ * / .tag float: sinistra; margine: 5px; altezza: 29 px; / * Come l'altezza dell'immagine * / larghezza: auto; .tag a background: url ("images / gradient.png") repeat-x scroll left top transparent; fluttuare: a sinistra; altezza: 29 px; imbottitura: 5px 6px; colore: # 0F2D39; font-size: 11pt; decorazione del testo: nessuna; text-shadow: 0 1px 1px rgba (255, 255, 255, 0,4); .tag: before content: "; background: url (" images / tagleft_left.png ") no-repeat scroll 0 0 transparent; display: block; float: left; height: 29px; / * uguale all'altezza dell'immagine * / width: 15px; / * Come la larghezza dell'immagine * / .tag: after content: "; background: url ("images / tagleft_right.png") no-repeat scroll 0 0 trasparente; blocco di visualizzazione; float: giusto; altezza: 29 px; / * Come l'altezza dell'immagine * / larghezza: 4px; / * Come la larghezza dell'immagine * / / * Regole Flip-tag ++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++ * / .tag.flip: before content: "; background: url ( "images / tagright_left.png") scorrimento senza ripetizione a sinistra in alto trasparente; display: blocco; float: sinistra; altezza: 29px; / * uguale all'altezza dell'immagine * / larghezza: 4px; / * uguale alla larghezza dell'immagine * / .tag.flip: after content: "; background: url ("images / tagright_right.png") no-repeat scroll right top transparent; blocco di visualizzazione; float: giusto; altezza: 29 px; / * Come l'altezza dell'immagine * / larghezza: 16px; / * Come la larghezza dell'immagine * / Cosa c'è di diverso? Per i principianti, abbiamo eliminato la necessità degli elementi sinistro e destro all'interno del DIV.
Qui, basta confrontare il vecchio markup e il nuovo markup:
Design
Design Usando il :prima e :dopo selettori, siamo in grado di iniettare efficacemente le nostre "porte scorrevoli" nel markup senza alcun carico aggiuntivo. Il risultato è un pezzo di markup molto più pulito, e uno che funziona davvero su tutti i browser moderni! Abbiamo anche passato dall'utilizzo di elementi DIV a semplici elementi SPAN (gli SPAN hanno un po 'più senso in questo contesto).
Quindi, cosa succede se vogliamo avere uno stato di hover per i nostri tag? In realtà è semplicemente semplice - basta aggiungere un paio di nuove regole con il : hover selettore inserito tra il nostro selettore di classe e il :prima e :dopo selettori.
Per esempio:
.tag: hover: prima
Che gestisce il problema di selezione - da qui puoi fondamentalmente aggiungere la tua variante di ciò che accade al passaggio del mouse. Puoi fare qualsiasi cosa, cambiare il colore del testo, l'opacità o persino modificare la grafica di sfondo reale. Ecco cosa abbiamo usato nella demo:
/ * Regole di passaggio del mouse +++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++ * / .tag a: hover background: url ("images / gradient_hover.png") repeat-x scroll left top transparent; .tag: hover: before background: url ("images / tagleft_left_hover.png") scroll senza ripetizione 0 0 trasparente; .tag: hover: after background: url ("images / tagleft_right_hover.png") scroll senza ripetizione 0 0 trasparente; .tag.flip: hover: before background: url ("images / tagright_left_hover.png") senza ripetere lo scroll a sinistra in alto trasparente; .tag.flip: hover: after background: url ("images / tagright_right_hover.png") no-repeat scroll right top transparent; Nota che scambiare l'immagine può creare un rapido sfarfallio la prima volta che si caricano le immagini? ci sono modi per affrontare questo, ma questo è un altro tutorial;)
Usare questo piccolo trucco all'interno di WordPress è anche abbastanza facile. Controlla la pagina di WordPress Codex sulla funzione "the_tags" che utilizzeresti normalmente all'interno di uno dei file modello? cercheremo di vedere come possiamo modificare il markup utilizzato per sputare i tag.
Ecco un esempio di come potresti trasformare i tag renderizzati in un elenco non ordinato:
Dovremmo semplicemente cambiarlo per adattarlo al nostro sistema:
'''''); ?> Questo è tutto! Basta includere il CSS associato all'interno del tuo file style.css (o qualsiasi file .css che stai usando nel tuo tema), e dovresti avere alcuni fantastici e piccoli tag personalizzati pronti per essere utilizzati!
Grazie per aver seguito tutti :) I commenti su come possiamo migliorare o farlo in modo diverso sono sempre i benvenuti!
