Lag og Code din egen Juicy Tag

Create og Code Cloud! Din egen Juicy Tag Cloud!

I dag skal vi fyre den opp med en tutorial på hvordan å designe og kode din egen saftig tag cloud bruker Photoshop, CSS, og noen bittesmå bilder! Vi skal bruke den gamle skyvedører teknikk, men vi vil ta med noen avanserte CSS velger metoder mot slutten i tilfelle du ønsker å skyve konvolutten og bruke dette i WordPress. Klar, ferdig, gå!

Det skrevne Tutorial

En liten bit av polish på de rette stedene kan virkelig krydrer en ellers standard sideutforming. I dag skal vi gå gjennom hvordan du kan lage din egen custom variant av "tag cloud" element som du kan finne i stort sett alle blogging system i dag.

Vi vil raskt skumme gjennom design ( det er lett peezy), og deretter grave i CSS som gjør dette alle kommer sammen. Bruk den i dine egne prosjekter, slipp den inn i en personlig blogg, det er helt opp til deg ... la oss dykke i

Trinn 01: Motiv kodene

CSS purister i publikum kan krype på dette punktet fordi vi kommer til å åpne opp Photoshop. Hvorfor? Fordi vi ønsker å skape en helt tilpasset tag design. Kan denne taggen at vi skal bruke i dag oppnås i CSS? Sannsynligvis - Jeg er sikker på at noen CSS ninjaer der ute vil være raske til å påpeke at dette er bare grunnleggende former ... men hva hvis du ønsket å legge tekstur? Eller en helt annen form (scalloped kanter noen)?

I tillegg til nettleseren hodepine av å prøve å få dette til å virke med CSS alene, er bunnlinjen som det er godt å vite hvordan du bruker bilder og CSS sammen i kor , så det er nettopp hva vi skal gjøre.

Gå videre og fyre opp Photoshop. Åpne et nytt dokument size 71px av 29px.

Bredden faktisk ikke saken mye her ... men høyden skal være noe du ønsker å huske.

Neste, la oss tegne et avrundet rektangel på vår dokument med en 2px radius. Legg igjen en bit av plass til en skygge senere ... i vårt tilfelle, har jeg igjen 2 piksler i bunnen og sidene.

Nå er det på tide å lage våre egne form. Vi skal bruke Photoshop Legg til punkt og konvertere Point verktøy. Det er ikke mye til dette utover bare fiksing og triksing med de punktene før du har fått den formen du ønsker, så leke seg litt. Her er vår:

Vi trenger et lite hull i vår tag skjønt ... du vet, slik at folk kan sløyfe en virtuell snor gjennom den. Ok, kanskje ikke, men det legger litt ekstra fakkel for oss som ikke ville være mulig med CSS. . Bruk elliptiske stort telt verktøyet og tegne en sirkulær utvalg (hold Skift-tasten mens du tegner for å holde det perfekt)

Når du har valget gjort, velger du den inverse av utvalget (Velg > Inverse) og gjøre den om til en vektormaske over tag form ved hjelp av Legg til lagmaske knappen nederst av laget inspektør.

For korthets skyld (vi ønsker å komme til koding del, ikke sant ?!) La oss skumme gjennom lagstiler her. Du kan legge til dine egne justeringer, men her er hva vår ser slik ut:

Resultatet skal se slik ut:

Du vil merke i PSD (inne nedlastingsmappe for denne opplæringen) jeg har også lagt i vår tekst. Føl deg fri til å gjøre det samme i tilfelle du trenger å bruke dette inne noen design mockups

. Merk: Du kan snu retningen på tag enkelt på egen hånd. Vi vil faktisk vise deg hvordan du lager den venstrevendt og høyrevendt tag i kodingen fase

Trinn 02:. Kutting og Markup

Woot! Så vi har vår tag designet ... men hvordan skal vi bruke det i en faktisk web-side? Vi vil begynne med å skjære opp vår tag i tre deler:

Nå må vi lage vår grunnleggende markup. Vi kommer til å starte dette ut ved hjelp av en enkel, logisk tilnærming ved hjelp av lag av divs, men som med alle ting code-relatert, vil vi være i stand til å rydde opp (og redusere mengden med kode som kreves) i de senere trinn .

Her er vår grunnleggende markering for hver tag:
< div class = "tag tag-venstre" > < div class = "left" > < /div > < div class = "center" > < a href = "#" > Design < /a > < /div > < div class = "right" > < /div > < /div >

La oss vurdere dette raskt: Vi hovedsak har en hoved tag wrapper DIV (.tag), med tre nestede Divs:

Venstre DIV (for vår venstre side grafikk)

Senter DIV (for vår tag tekst og bakgrunn gradient)

Høyre DIV (for vår rett-side grafikk)

Du kan gå videre og gjenta at blokk kode et par ganger for å teste ut flere koder stablet opp ved siden av hverandre

Nå er det på tide å legge våre CSS

Denne blokken med kode setter opp element som vil vikle rundt vår kode; Legg merke til at vi legger noen type regler her, en enkel flyte, og en margin mellom hver tag til plass dem ut

De andre to regler i CSS dekselet over senterdelen av tag -. Etablere . bakgrunn gradient og noen avstand

På dette punktet, bør du ha noen koder som ser slik ut:

La oss nå se legge litt styling for venstre og høyre sidefelt
.. tag-venstre .left {background: url ("images /tagleft_left.png") no-repeat bla til venstre toppen gjennomsiktig; display: block; float: left; høyde: 29px; /* Samme som bildehøyden * /width: 15px; . /* Samme som din breddebilde * /} tag-venstre .right {background: url ("images /tagleft_right.png") no-gjenta bla til høyre toppen gjennomsiktig; display: block; float: left; høyde: 29px; /* Samme som bildehøyden * /width: 4px; /* Samme som bildebredde * /}

Listen blokk med kode gjør tre viktigste tingene:.

Nå kodene dine bør være ganske nær å fullføre:.

Men hva hvis vi ønsker å inkludere en annen type tag ... sier en som står i motsatt retning? Det er der de "tag-venstre" og "tag-riktige" velgere kommer inn i bildet. Ved å legge disse på det øverste nivået, kan vi faktisk legge bare noen få flere regler til vår CSS for å gi rom for en helt annen tag:
.tag høyre .left {background: url ("images /tagright_left.png") no-repeat bla til venstre toppen gjennomsiktig; display: block; float: left; høyde: 29px; /* Samme som bildehøyden * /width: 4px; . /* Samme som din breddebilde * /} tag høyre .right {background: url ("images /tagright_right.png") no-gjenta bla til høyre toppen gjennomsiktig; display: block; float: left; høyde: 29px; /* Samme som bildehøyden * /width: 16px; /* Samme som din breddebilde * /}

Hvilken bør gi deg riktig "rett-tag" stil.
Merke til høyre vendte koden på øverst til høyre i kodeskyen

Ferdig! Vel, sorta ... for å være ærlig, er dette en virkelig tung handed måte å håndtere denne effekten. I neste trinn, vil vi ta deg til noen mer avanserte CSS selektorer for en mer grasiøs tilnærming

Google Fonts. Merk: Du har kanskje lagt merke til at jeg bruker en tilpasset skrift her (Droid Sans). Legge til dine egne skriften er enkelt, bare gå til Google Fonts nettstedet, finne skriften som du liker, og legg i den innebygde koden og CSS-regel for skriften.

Det er bra om Google skrifter (eller noe lignende) er at du faktisk kan bruke mest CSS font styling til teksten ... betyr dette at vi kan bruke attributter som tekst-shadow
å skape den subtile lyseffekt.

Trinn 04: Den avanserte CSS

Alle som har vært koding for noen lang tid vil fortelle deg det er alltid en måte å forbedre et stykke kode. Det er akkurat det vi skal gjøre i dette siste trinnet.

La oss starte med å gjennomgå hva som er ungraceful
om den forrige tilnærming.

For mye markup! Vi bør ikke trenger å bruke fire
forskjellige DIV elementer for å oppnå denne effekten.

Heavy handed CSS! Det fungerer, sikkert, men det er mer grasiøs måter å skrive CSS, slik at den ikke egentlig trenger ekstra markup.

Det er ikke fleksibel! Krever mye markup og gnarly CSS betyr at det ikke vil fungere (lett) innen et CMS som WordPress

Her er en annen tilnærming ved hjelp av CSS : før Hotell og : etter
velgere å lette opp lasten

La oss begynne med å se på den opprinnelige CSS i sin helhet, og deretter omskrive den ved hjelp av våre velgere.

The Original CSS Anmeldelser /* Generisk Tag Styling /Typografi +++++++++++++++++++++++++++++++++++++++++++ . ++++++++ * /tag {font-size: 11pt; text-shadow: 0 1px 1px RGBA (255, 255, 255, 0,4); float: left; /* Gjør hver tag opphold sammen i ett stykke * /margin: 5px;} tag .center {background: url ("images /gradient.png") gjenta-x bla til venstre øverst gjennomsiktig;. float: left; høyde: 29px; /* Samme som bildehøyden * /width: auto; padding: 0px 6PX; /* Gi teksten en liten plass til å puste * /} tag .center et {vertical-align: midten,. /* Viktig for montering av teksten i perfekt * /line-height: 21pt; /* Viktig for montering av teksten i perfekt * /color: # 0f2d39; text-decoration: none;} /* Venstre-tag Regler +++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++ * /tag-venstre .left {bakgrunn. url ("images /tagleft_left.png ") no-repeat bla til venstre toppen gjennomsiktig; display: block; float: left; høyde: 29px; /* Samme som bildehøyden * /width: 15px; . /* Samme som din breddebilde * /} tag-venstre .right {background: url ("images /tagleft_right.png") no-gjenta bla til høyre toppen gjennomsiktig; display: block; float: left; høyde: 29px; /* Samme som bildehøyden * /width: 4px; /* Samme som din breddebilde * /} /* Høyre-tag Regler ++++++++++++++++++++++++++++++++++ . +++++++++++++++++++++++++++++++++ * /tag-høyre .left {background: url ("images /tagright_left .png ") no-repeat bla til venstre toppen gjennomsiktig; display: block; float: left; høyde: 29px; /* Samme som bildehøyden * /width: 4px; . /* Samme som din breddebilde * /} tag høyre .right {background: url ("images /tagright_right.png") no-gjenta bla til høyre toppen gjennomsiktig; display: block; float: left; høyde: 29px; /* Samme som bildehøyden * /width: 16px; /* Samme som din breddebilde * /}
The New CSS Twitter /* Generisk Tag Styling /Typografi ++++++++++++++++++++++++ . +++++++++++++++++++++++++++ * /tag {float: left; margin: 5px; høyde: 29px; /* Samme som bildehøyden * /bredde. Auto;} tagge et {bakgrunn: url ("images /gradient.png") gjenta-x bla til venstre toppen gjennomsiktig; float: left; høyde: 29px; padding: 5px 6PX; color: # 0F2D39; font-size: 11pt; text-decoration: none; text-shadow: 0 1px 1px RGBA (255, 255, 255, 0,4); } .tag: før {innhold: ''; bakgrunn: url ("images /tagleft_left.png") no-repeat bla 0 0 gjennomsiktig; display: block; float: left; høyde: 29px; /* Samme som bildehøyden * /width: 15px; . /* Samme som bildebredde * /} tag: etter {innhold: ''; bakgrunn: url ("images /tagleft_right.png") no-repeat bla 0 0 gjennomsiktig; display: block; float: right; høyde: 29px; /* Samme som bildehøyden * /width: 4px; /* Samme som din breddebilde * /} /* Flip-tag Regler ++++++++++++++++++++++++++++++++++ . +++++++++++++++++++++++++++++++++ * /tag.flip: før {innhold: ''; bakgrunn: url ("images /tagright_left.png") no-repeat bla til venstre toppen gjennomsiktig; display: block; float: left; høyde: 29px; /* Samme som bildehøyden * /width: 4px; . /* Samme som bildebredde * /} tag.flip: etter {innhold: ''; bakgrunn: url ("images /tagright_right.png") no-repeat bla til høyre toppen gjennomsiktig; display: block; float: right; høyde: 29px; /* Samme som bildehøyden * /width: 16px; /* Samme som bildebredde * /}
Hva er annerledes? For det første har vi eliminert behovet for venstre og høyre elementer inne i DIV

Her bare sammenligne den gamle markup og den nye markup.

Old HTML Markup
< div class = "tag tag-venstre" > < div class = "left" > < /div > < div class = "center" > < a href = "#" > Design < /a > < /div > < div class = "right" > < /div > < /div >
New HTML Markup
< span class = "tag" > < a href = "#" > Design < /a > < /span >
Ved hjelp av : før Hotell og : etter
velgere, er vi i stand til effektivt å injisere våre "skyvedører" inn i markup uten ekstra belastning. Resultatet er en mye renere stykke markup, og en som faktisk fungerer på alle moderne nettlesere! Vi har også byttet fra å bruke DIV elementer til enkle SPAN elementer (spenn gjøre litt mer fornuftig i denne sammenhengen)

Bonus Step 01:. Ved å legge til: Hover State

Så hva om vi ønsker å ha en hover staten for våre koder? Det er ganske enkelt faktisk - bare legge til et par nye regler med : hover
velgeren satt inn mellom vår klasse-velgeren og : før Hotell og : etter
velgere.

For eksempel:
.tag: hover: før {}
Det håndterer utvalget problem - herfra kan du i utgangspunktet legge til din egen variant av det som skjer på mus-hover. Du kan gjøre alt fra å endre tekstfarge, til opasitet, eller til og med endre den faktiske bakgrunn grafikk. Her er hva vi brukte i demoen: Twitter /* Mus Hover Regler ++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++ * /tagge et. hover {background: url ("images /gradient_hover. png ") repeat-x bla til venstre toppen gjennomsiktig; } .tag: hover: før {background: url ("images /tagleft_left_hover.png") no-repeat bla 0 0 gjennomsiktig;} tag:. hover: etter {bakgrunn: url ("images /tagleft_right_hover.png") no- gjenta bla 0 0 gjennomsiktig;} tag.flip. hover: før {background: url ("images /tagright_left_hover.png") no-repeat bla til venstre øverst gjennomsiktig;} tag.flip. hover: etter {bakgrunn: url ( "images /tagright_right_hover.png") no-gjenta bla til høyre toppen gjennomsiktig;}
Legg merke til at å bytte ut bildet kan lage en rask flimmer første gang bildene lastes opp ... det finnes måter å håndtere dette, men det er en annen tutorial;)

Bonus Trinn 02: Bruke det Inside WordPress

Ved hjelp av dette lille trikset inne WordPress er også ganske lett. Sjekk ut WordPress Codex-side på "the_tags" funksjon som du vanligvis ville bruke inni en av malfiler ... vi vil være ute etter å se hvordan vi kan endre markup som brukes til å spytte ut kodene.
< p> Her er ett eksempel på hvordan du kan slå de gjengitte kodene inn i en uordnet liste:?
< php the_tags ('< ul > < li >', '< /li > < li >', '< /li > < /ul >'); ? >
Vi ville bare endre det til å matche vårt eget system:?
< php the_tags ('< span class = "tag" >', '< /span > < span class = "tag" > ',' < /span > '); ? >
Det er det! Bare omfatte tilhørende CSS inni style.css fil (eller hvilken CSS-filen du bruker i ditt tema), og du bør ha noen awesome små egendefinerte koder klar til å gå!

Takk for følge med alle :) Kommentarer på hvordan vi kan forbedre dette eller gjøre det annerledes er alltid velkommen! Anmeldelser

Previous:Quick Tips: Animere en News Ticker GIF Med Photoshop

Next Page:Grunnleggende: Lag en Clean Magazine & Blogg tema (Dag 2: Kutting og Markup)