Share
Astăzi o lansăm cu un tutorial cu privire la modul de proiectare și codare a propriei nopți de tag-uri juicy folosind Photoshop, CSS și câteva imagini minuscule! Vom folosi tehnica usilor glisante vechi, dar vom include unele metode avansate de selectie CSS spre sfarsit in cazul in care doriti sa impingeti plicul si sa folositi acest lucru in WordPress. Pe locuri, fiti gata, start!
Un pic de poloneză în locurile potrivite poate într-adevăr provoca un alt tip de design standard al paginii. Astăzi, vom trece prin cum să vă creați propria variantă personalizată a elementului "tag cloud" pe care îl puteți găsi în aproape orice sistem de blogging din zilele noastre.
Vom schimba rapid design-ul (este ușor de peezy), și apoi sapă în CSS care face ca toate acestea să se unească. Utilizați-l în propriile dvs. proiecte, aruncați-l într-un blog personal, este total dependent de dvs.? Hai să ne aruncăm!
Puristii CSS din audiență se pot răni în acest moment pentru că vom deschide Photoshop. De ce? Pentru că vrem să creăm un design personalizat complet. Poate această etichetă specială pe care o vom folosi astăzi în CSS? Probabil - sunt sigur că ninja din CSS va fi rapid să subliniez că acestea sunt doar formele de bază? dar dacă vrei să adaugi textură? Sau o forma complet diferita (oricare dintre margini)?
În afară de durerile de cap ale browserului care încearcă să obțină acest lucru numai cu CSS, linia de jos este că este bine să știți cum să utilizați împreună imaginile și CSS împreună, deci exact ceea ce vom face.
Du-te și porni Photoshop. Deschideți un nou document de dimensiuni 71px-29px.
Lățimea nu prea contează prea mult aici? dar înălțimea va fi ceva ce vreți să vă amintiți.
Apoi, să tragem a dreptunghi rotunjit pe documentul nostru cu o rază de 2px. Lasă puțin spațiu pentru o umbră mai târziu? în cazul nostru, am lăsat 2px în partea inferioară și laterală.
Acum este momentul să creați forma noastră personalizată. Vom folosi Photoshop Adaugă punct și Punctul de conversie unelte. Nu este prea mult pentru acest lucru dincolo de tinkering cu punctele până când aveți forma pe care doriți, așa că joacă în jur un pic. Iată-ne:
Avem nevoie de o mică gaură în eticheta noastră? știi, astfel încât oamenii să poată rula un șir virtual prin ea. Bine, poate nu, dar adaugă un nou flare pentru noi, ceea ce nu ar fi posibil cu CSS. Folosește instrument eliptic marquee și trageți o selecție circulară (țineți apăsată tasta Shift în timp ce desenați-o pentru ao menține perfectă).
După efectuarea selecției, selectați inversul selecției (Selectați> Inverse) și transformați-o într-o mască vectorică deasupra formei de etichetă folosind Adăugați masca straturilor butonul din partea inferioară a inspectorului de nivel.
De dragul concisității (vrem să ajungem la partea de codificare, nu ?!), să trecem prin stilurile de straturi aici. Puteți adăuga propriile ajustări, dar iată cum arată a noastră:
Rezultatul final ar trebui să arate astfel:
Veți observa în PSD (în dosarul Descărcare pentru acest tutorial) pe care l-am adăugat și în textul nostru. Simțiți-vă liber să faceți același lucru în cazul în care trebuie să utilizați acest lucru în interiorul oricăror machete de design.
Notă: Puteți orienta cu ușurință orientarea etichetei pe cont propriu. De fapt, vă vom arăta cum să creați eticheta orientată spre stânga și spre dreapta în faza de codificare.
Woot! Așa că am proiectat eticheta noastră? dar cum o vom folosi într-o pagină web reală? Vom începe prin a tăia eticheta în trei bucăți:
Salvați-le pe toate ca grafice PNG pentru a păstra transparența și pentru a le stoca într-un director numit "imagini".
Acum trebuie să ne creăm marcajul de bază. Vom începe acest lucru folosind o abordare simplă, logică, folosind straturi de DIV-uri, dar, ca și în cazul tuturor lucrurilor legate de coduri, vom putea să curățăm acest lucru (și să reducem cantitatea de cod necesară) în etapele ulterioare.
Iată marcajul de bază pentru fiecare etichetă:
Proiecta
Să examinăm rapid acest lucru: în esență, avem un principiu DIV wrapper (.tag), cu trei DIV imbricate:
Puteți merge mai departe și repetați acest bloc de cod de câteva ori pentru a testa mai multe etichete stivuite una lângă cealaltă.
Acum este momentul să adăugați CSS-ul nostru.
Vom începe CSS aplicând câteva reguli de bază pentru fiecare din diviziile noastre. Vă voi arăta codul pentru fiecare, apoi explicați ce face:
Accentsconagua
.etichetă font-size: 11pt; text-shadow: 0 1px 1px rgba (255, 255, 255, 0,4); plutește la stânga; / * Face ca fiecare tag să rămână împreună într-o singură bucată * / margine: 5px; .tag .center background: url ("imagini / gradient.png") repeat-x defilați la stânga top transparent; plutește la stânga; înălțime: 29px; / * La fel ca înălțimea imaginii * / lățimea: auto; padding: 0px 6px; / * Dați textului o mică cameră pentru a respira * / .tag .center a vertical-align: middle; / * Important pentru montarea textului perfect * / înălțimea liniei: 21pt; / * Important pentru potrivirea textului perfect * / color: # 0f2d39; text-decoration: nici unul; Acest bloc de coduri stabilește elementul care se va înfășura în jurul etichetei noastre; Rețineți că adăugăm aici câteva reguli de tip, un simplu flotor și o margine între fiecare etichetă pentru a le elimina.
Cele două reguli secundare din CSS de mai sus acoperă partea centrală a etichetei - stabilirea gradientului de fundal și a unor distanțe.
În acest moment, ar trebui să aveți niște etichete care arată astfel:
Acum, haideți să arătăm să adăugăm un stil pentru elementele din stânga și din dreapta.
.tag-left .left background: url ("images / tagleft_left.png") nu-repeta defilați la stânga top transparent; afișare: bloc; plutește la stânga; înălțime: 29px; / * La fel ca înălțimea imaginii * / lățimea: 15px; / * La fel ca lățimea imaginii dvs. * / .tag-left .right background: url ("images / tagleft_right.png") nu-repeta parcurgere dreapta sus transparentă; afișare: bloc; plutește la stânga; înălțime: 29px; / * La fel ca înălțimea imaginii * / lățimea: 4px; / * La fel ca lățimea imaginii dvs. * / Blocul de cod de mai sus are trei lucruri primare:
Acum, etichetele dvs. ar trebui să fie destul de aproape de finalizare:
Dar dacă vrem să includem un alt tip de etichetă? spune unul care se confruntă cu direcția opusă? Aici se pun în joc selectorii "tag-left" și "tag-right". Prin adăugarea acestora la nivel superior, putem adăuga chiar câteva reguli suplimentare CSS-ului nostru pentru a permite o etichetă complet diferită:
.tag-right .left (fundal: url ("images / tagright_left.png") nu-repeta defilați spre stânga transparent; afișare: bloc; plutește la stânga; înălțime: 29px; / * La fel ca înălțimea imaginii * / lățimea: 4px; / * La fel ca latimea imaginii * / .tag-right .right background: url ("images / tagright_right.png") afișare: bloc; plutește la stânga; înălțime: 29px; / * La fel ca înălțimea imaginii * / lățimea: 16px; / * La fel ca lățimea imaginii dvs. * / Care ar trebui să vă ofere stilul corect de "etichetă dreapta":
Terminat! Păi, sorta? pentru a fi sincer, acesta este un mod foarte greu de manevră a acestui efect. În pasul următor, vă vom duce în selectori CSS mai avansați pentru o abordare mai grațioasă.
Google Fonts Notă: S-ar putea să fi observat că folosesc un font personalizat aici (Droid Sans). Adăugarea propriului font personalizat este ușor, vizitați site-ul Google Fonts, găsiți fontul pe care îl doriți și adăugați codul de încorporare și regula CSS pentru font.
Lucrul minunat despre fonturile Google (sau ceva de genul acesta) este că puteți aplica, de fapt, cea mai mare parte a stilului de fonturi CSS în text? acest lucru înseamnă că putem folosi atribute cum ar fi text-shadow pentru a crea efectul subtil de lumină.
Oricine a codat pentru o perioadă lungă de timp vă va spune că există întotdeauna o modalitate de a îmbunătăți o bucată de cod. Exact asta vom face în ultimul pas.
Să începem prin revizuirea a ceea ce este greoi despre abordarea anterioară.
Iată o altă abordare folosind CSS :inainte de și :după selectori pentru a ușura sarcina.
Să începem să privim integral CSS-ul original și apoi să îl re-scriem folosind selectorii noștri:
/ * Generic Tag Styling / Typography +++++++++++++++++++++++++++++++++++++++++++ ++++++++ * / .tag font-size: 11pt; text-shadow: 0 1px 1px rgba (255, 255, 255, 0,4); plutește la stânga; / * Face ca fiecare tag să rămână împreună într-o singură bucată * / margine: 5px; .tag .center background: url ("imagini / gradient.png") repeat-x defilați la stânga top transparent; plutește la stânga; înălțime: 29px; / * La fel ca înălțimea imaginii * / lățimea: auto; padding: 0px 6px; / * Dați textului o mică cameră pentru a respira * / .tag .center a vertical-align: middle; / * Important pentru montarea textului perfect * / înălțimea liniei: 21pt; / * Important pentru potrivirea textului perfect * / color: # 0f2d39; text-decoration: nici unul; / * Regulile etichetei stângi +++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++ * / .tag-left .left background: url ("imagini / tagleft_left.png") parcurgere fără repetare stânga transparent transparent; afișare: bloc; plutește la stânga; înălțime: 29px; / * La fel ca înălțimea imaginii * / lățimea: 15px; / * La fel ca lățimea imaginii dvs. * / .tag-left .right background: url ("images / tagleft_right.png") nu-repeta parcurgere dreapta sus transparentă; afișare: bloc; plutește la stânga; înălțime: 29px; / * La fel ca înălțimea imaginii * / lățimea: 4px; / * La fel ca lățimea imaginii dvs. * / / * Regulile etichetelor drepte ++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++. .png ") nu repetați defilați spre stânga transparent; afișare: bloc; plutește la stânga; înălțime: 29px; / * La fel ca înălțimea imaginii * / lățimea: 4px; / * La fel ca latimea imaginii * / .tag-right .right background: url ("images / tagright_right.png") afișare: bloc; plutește la stânga; înălțime: 29px; / * La fel ca înălțimea imaginii * / lățimea: 16px; / * La fel ca lățimea imaginii dvs. * / / * Generic Tag Styling / Typography +++++++++++++++++++++++++++++++++++++++++++ ++++++++ * / .tag float: stânga; margine: 5px; înălțime: 29px; / * La fel ca înălțimea imaginii * / lățimea: auto; .tag a background: url ("imagini / gradient.png") repetare-x defilați la stânga transparent transparent; plutește la stânga; înălțime: 29px; padding: 5px 6px; culoare: # 0F2D39; font-size: 11pt; text-decoration: nici unul; text-shadow: 0 1px 1px rgba (255, 255, 255, 0,4); .tag: înainte de content: "; fundal: url (" images / tagleft_left.png ") defilați repetat 0 0 transparent transparent display înălțime 29px; / width: 15px; / * La fel ca lățimea imaginii dvs. * / .tag: după content: "; fundal: url ("images / tagleft_right.png") defilați repetat 0 0 transparent; afișare: bloc; float: dreapta; înălțime: 29px; / * La fel ca înălțimea imaginii * / lățimea: 4px; / * La fel ca lățimea imaginii dvs. * / / * Reguli de etichetare flip-flop ++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++ * / .tag.flip: înainte de content: "; background: url ( "images / tagright_left.png") nu-repeta defilați stânga top transparent; afișare: bloc; float: stânga; înălțime: 29px; / * La fel ca înălțimea imaginii * / lățimea: 4px; .tag.flip: după content: "; fundal: url ("images / tagright_right.png") fără repetare parcurgere dreapta sus transparentă; afișare: bloc; float: dreapta; înălțime: 29px; / * La fel ca înălțimea imaginii * / lățimea: 16px; / * La fel ca lățimea imaginii dvs. * / Ce este diferit? Pentru început, am eliminat necesitatea elementelor stânga și dreaptă din cadrul DIV.
Aici, comparați doar marcajul vechi și noul markup:
Proiecta
Proiecta Prin utilizarea funcției :inainte de și :după selectori, suntem capabili de a injecta eficient "ușile glisante" în marcaj fără nici o sarcină suplimentară. Rezultatul este o piesă mult mai curată de marcare și una care funcționează de fapt pe toate browserele moderne! De asemenea, am trecut de la utilizarea elementelor DIV la simple elemente SPAN (SPAN-urile au un sens mai mult în acest context).
Deci, dacă vrem să avem o stăpânire pentru etichetele noastre? Este destul de simplu de fapt - adăugați doar câteva reguli noi cu :planare selector introdus între selectorul de clasă și :inainte de și :după selectoare.
De exemplu:
.tag: hover: inainte
Acest lucru se ocupă de problema de selecție - de aici puteți adăuga în mod esențial varianta proprie a ceea ce se întâmplă pe mouse-hover. Puteți face orice, de la schimbarea culorii textului, până la opacitate sau chiar de a schimba grafica reală de fundal. Iată ce am folosit în demo:
/ * Regulile mouse-ului pentru mouse-ul + + + + + + + + + + + + + + + + + + + + + + +++++++++++++++++++++++++++++++ * / .tag a: hover fundal: url ("images / gradient_hover.png") repeat-x defilați la stânga top transparent; .tag: hover: înainte de background: url ("images / tagleft_left_hover.png") defilați repetat 0 0 transparent; .tag: hover: după background: url ("images / tagleft_right_hover.png") defilați repetat 0 0 transparent; .tag.flip: plasați cursorul: înainte de background: url ("images / tagright_left_hover.png") nu-repeta defilați spre stânga transparent; .tag.flip: mutați: după background: url ("images / tagright_right_hover.png") nu se repetă parcurgeți dreapta sus transparent; Rețineți că schimbarea imaginii poate crea un efect de pâlpâire rapidă la prima încărcare a imaginilor? există modalități de a rezolva acest lucru, dar acesta este un alt tutorial;)
Folosind acest mic truc în WordPress este, de asemenea, destul de ușor. Verificați pagina Codex WordPress pentru funcția "the_tags" pe care o utilizați în mod normal în interiorul unuia dintre fișierele șablon? vom căuta să vedem cum putem schimba marcajul utilizat pentru a scuipa etichetele.
Iată un exemplu în care puteți transforma etichetele redate într-o listă neordonată:
Am schimba pur și simplu acest lucru pentru a se potrivi propriului nostru sistem:
''''„); ?> Asta e! Doar includeți CSS asociat în interiorul fișierului dvs. stil.css (sau oricare fișier .css pe care îl utilizați în tema dvs.) și ar trebui să aveți unele etichete minunate minuscule gata pentru a merge!
Vă mulțumim că ați urmat pe toată lumea :) Comentarii despre cum putem îmbunătăți acest lucru sau facem altfel sunt întotdeauna binevenite!
