Share
Hei folkens, i dag skal vi lage Premium Pixels 'Tagtastic Tag Cloud. Som et eksperiment i alternative tilnærminger, vil vi opprette taggene ved hjelp av gradienter, skygger og (viktigst) CSS-transformasjoner, som vil danne punktet for hver tag. Etter ferdigstillelse vil vi til og med ta et skritt videre og ta imot IE.
Vi har dekket tagger før på Webdesigntuts +, men ved denne anledningen skal vi undersøke en alternativ metode for å lage alle sammensatte biter og biter. Det kan være skarpere måter å skape effekten på, men vårt eksempel vil avstå fra bilder, bruk veldig ren merking og litt uvanlig styling. La oss bli sittende fast i!
La oss starte med å kaste inn noen grunnleggende oppslag, inkludert den kjente HTML5-doktypen. Vi henviser også til stilarket vårt i hodet til dokumentet vårt.
For formålet med denne opplæringen lager vi en wrapper / container for å holde våre koder. Du vil mest sannsynlig trenge noe lignende hvis du bruker disse i, for eksempel, en blogg sidebar.
For oss skal vi bare lage en div med en klasse av innpakning, bruk en bredde på 340px og en margin på 50px auto å sentre omslaget på siden. Jeg har lagt til 50px i stedet for 0 bare for å legge til litt margin-topp slik at våre koder ikke berører toppen av nettleservinduet. Mens du kaster inn dette CSS, legger vi til noen styling for kroppen (for eksempel et bakgrunnsbilde) og bruker en tilbakestilling.
html, kropp, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, en, abbr, og, adresse, sitere, kode, del, DFN, em, img, ins, kbd, q, s, samp, liten, streik, sterk, sub, sup, tt, Var, b, u, i, dl, dt, dd, ol, ul, li, feltsett, form, etikett, legende, bord, bildetekst, tbody, TFOOT thead, st, th, td, artikkel, side, lerret, detaljer, embed, figur, figcaption, bunntekst, header, hgroup, meny, nav, utgang, rubin, seksjon, sammendrag, tid, mark, lyd, video, inngang, tekstfelt velg bakgrunn: gjennomsiktig; kant: 0; font-size: 100%; margin: 0; omriss: 0; padding: 0; vertical-align: baseline artikkel, bortsett , detaljer, figcaption, skikkelse, bunn, øverste del, hgroup, meny, nav, seksjon display: block body line-høyde: 1 innrykket tekst, q anføres: ingen formatering for blokksitat: før, formatering for blokksitat: etter, q: før , q: etter innhold: none
kropp font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; bakgrunn: url (... /images/bg.jpg) gjenta; -webkit-font-utjevning: antialiased; .wrapper maks-bredde: 340px; margin: 50px auto;
Jeg har strukturert disse kodene veldig enkelt; alt vi skal bruke er et ankermerke (et logisk valg som disse vil trolig fungere som koblinger til et eller annet sted). For denne opplæringen har jeg gitt den en klasse med "tag", men dette kan endres til hva du vil.
høy oppløsning
Høyre, videre til neste del! Vi skal nå begynne å utforme taggen - det er ganske mye kode her, men la det ikke forvirre deg, jeg skal forklare hva som skjer.
Jeg har først lagt til noen grunnleggende ting her;
Deretter har vi definert noen skriftinnstillinger, størrelse, familie og vekt, etterfulgt av en farge og en tekstskygge. Etter det har vi brukt noen polstring, ved hjelp av ems, slik at alt er størrelse i forhold til kroppens skriftstørrelse, eller nettleserens skriftstørrelse. Deretter en enkel kantlinje, selv om vi ikke har brukt en til venstre. Ems har dukket opp igjen! Denne gangen vil vi bruke dem på rammen radius, men bare øverst til høyre og nederst til høyre. Ok, er du fortsatt våken? Det er mer ... neste bruker vi noen CSS3-gradienter (jeg har gått videre og brukt den fine Gradient-appen til å beregne verdiene). Endelig del er noen bokseskygger, et innspill og en skygge. Husk disse prefiksene!
.tag float: left; margin: 0 0 7px 20px; stilling: i forhold; font-familie: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.75em; font-vekt: bold; text-decoration: none; color: # 996633; tekstskygge: 0px 1px 0px rgba (255,255,255, .4); polstring: 0.417em 0.417em 0.417em 0.917em; border-top: 1px solid # d99d38; grense-høyre: 1px solid # d99d38; border-bottom: 1px solid # d99d38; -webkit-grense-radius: 0 0.25em 0.25em 0; -moz-border-radius: 0 0.25em 0.25em 0; border-radius: 0 0.25em 0.25em 0; bakgrunnsbilde: -webkit-lineær gradient (topp, rgb (254, 218, 113), rgb (254, 186, 71)); bakgrunnsbilde: -moz-lineær-gradient (topp, rgb (254, 218, 113), rgb (254, 186, 71)); bakgrunnsbilde: -o-lineær gradient (topp, rgb (254, 218, 113), rgb (254, 186, 71)); bakgrunnsbilde: -ms-lineær gradient (topp, rgb (254, 218, 113), rgb (254, 186, 71)); bakgrunnsbilde: lineær gradient (topp, rgb (254, 218, 113), rgb (254, 186, 71)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba47"); -webkit-boks-skygge: innsett 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); -moz-box-skygge: innsett 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); boks-skygge: innsett 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); z-index: 100;
Ok, vi har fullført hoveddelen av taggen, neste del er å lage pilen. For å legge til dette bruker vi :før pseudo-element. Vi vil også eksperimentere med noen avanserte teknikker her fra CSS; transformasjoner. Å lage disse pilene involvert mye prøve og feil. Jeg måtte prøve forskjellige bredder og høyder sammen med posisjonering av topp og bunn for å få det så perfekt som mulig! Enhver tilbakemelding er derfor veldig velkommen ...
Vi har brukt samme bakgrunnsgradient som tidligere, men med en mindre endring: fordi vi skal rotere torget vi skal lage, må vi også rotere gradienten slik at den stemmer overens med hoveddelen av stikkord. Gradient app var nyttig i å la meg endre retningen av gradienten. Den neste delen er å lage noen grenser, til venstre og bunn. Alt som er igjen med hensyn til pilen er å legge til en grense-radius for å glatte av punktet og til slutt bruke transformasjonene våre. Vi roterer torget vi har laget 45 grader, slik at det ser ut som en pil. Vi har brukt transform: 45; sammen med de prefikserte.
.tag: før innhold: "; bredde: 1,30em; høyde: 1,358em; bakgrunnsbilde: -webkit-lineær gradient (venstre topp, rgb (254, 218, 113), rgb (254, 186, 71)) ; bakgrunnsbilde: -moz-lineær-gradient (venstre topp, rgb (254, 218, 113), rgb (254, 186, 71)); bakgrunnsbilde: -o-lineær gradient (venstre topp, rgb 254, 218, 113), rgb (254, 186, 71)), bakgrunnsbilde: -ms-lineær gradient (venstre topp, rgb (254, 218, 113), rgb (254, 186, 71)); bakgrunnsbilde: lineær gradient (venstre topp, rgb (254, 218, 113), rgb (254, 186, 71)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 1, StartColorStr = '# feda71' , EndColorStr = "# feba47"); posisjon: absolutt; venstre: -0.69em; topp: .2em; -webkit-transform: roter (45deg); -moz-transform: roter (45deg); -o-transformer: roter (45deg), transformere: rotere (45deg), grense venstre: 1px solid # d99d38; grensebunn: 1px solid # d99d38; -webkit-grense-radius: 0 0 0 0.25em; -moz-grense-radius: 0 0 0 0.25em; border-radius: 0 0 0 0.25em; z-indeks: 1;
Du bør nå ha noe som ligner på følgende; Merk at jeg har zoomet inn slik at du kan se hvor pilen kobler seg til hoveddelen, dette er knapt notiticable når den ses på normal størrelse.
Den siste delen for å fullføre vår kode er å lage det lille hullet på den. Her bruker vi et pseudo igjen, men denne gangen, :etter element. Det vi har gjort for å lage hullet er ganske enkelt. Vi har definert en bredde og høyde i ems, slik at den blir jevn. Deretter har vi lagt til en stor grenseradius som vil lage en sirkel med en grense for å skissere den. Etter dette har vi lagt til en dråpeskygge som ligner på tekstskyggen. Til slutt har vi plassert den (mens du bruker ems).
.tag: etter innhold: "; bredde: 0.5em; høyde: 0.5em; bakgrunn: #fff; -webkit-grense-radius: 4.167em; -moz-grense-radius: 4.167em; grense-radius: 4.167em; border: 1px solid # d99d38; -webkit-box-skygge: 0 1px 0 #faeaba; -moz-box-shadow: 0 1px 0 #faeaba; bokseskygge: 0 1px 0 #faeaba; posisjon: absolutt; topp: 0.667 em; venstre: -0,083em; z-indeks: 9999;
For å gjøre kodene enda mer kjempebra, legger vi til noen svingestiler. Vi må legge til dette i hoveddelen av taggen og pilen (mens du husker å rotere gradienten for pilen). Vi har også endret grensefarge på begge.
.tag: hover bakgrunnsbilde: -webkit-lineær-gradient (topp, rgb (254, 225, 141), rgb (254, 200, 108)); bakgrunnsbilde: -moz-lineær-gradient (topp, rgb (254, 225, 141), rgb (254, 200, 108)); bakgrunnsbilde: -o-lineær gradient (topp, rgb (254, 225, 141), rgb (254, 200, 108)); bakgrunnsbilde: -ms-lineær gradient (topp, rgb (254, 225, 141), rgb (254, 200, 108)); bakgrunnsbilde: lineær gradient (topp, rgb (254, 225, 141), rgb (254, 200, 108)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# fee18d', EndColorStr = "# fec86c"); border-color: # e1b160; .tag: svever: før bakgrunnsbilde: -webkit-lineær-gradient (venstre topp, rgb (254, 225, 141), rgb (254, 200, 108)); bakgrunnsbilde: -moz-lineær-gradient (venstre topp, rgb (254, 225, 141), rgb (254, 200, 108)); bakgrunnsbilde: -o-lineær-gradient (venstre topp, rgb (254, 225, 141), rgb (254, 200, 108)); bakgrunnsbilde: -ms-lineær-gradient (venstre topp, rgb (254, 225, 141), rgb (254, 200, 108)); bakgrunnsbilde: lineær gradient (venstre topp, rgb (254, 225, 141), rgb (254, 200, 108)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 1, StartColorStr = '# fee18d', EndColorStr = "# fec86c"); border-color: # e1b160;
Hvis du fortsatt vil vise kodene dine i full ære for IE-brukere, må du ta en annen tilnærming til disse kodene, først ved å lage et IE-bestemt stilark. Jeg skal forklare hvorfor ... For det første vil mange av våre CSS3-effekter ikke fungere i versjoner tidligere enn IE9 (bare et par arbeid i IE9 som det er), men hovedproblemet her er transformasjoner som ikke vil fungere. For å imøtekomme IE-brukere, redigerer vi koden litt. Vi starter med å endre vår HTML først ved å erstatte wrapper div og alt inne i det med:
høy oppløsning
Vi bruker en ankermerke igjen, men med 3 spenner inni den; vi trenger en til å lage pilen, hoveddelen og enden som har grenseradiusen.
For å sikre at våre koder fungerer i IE, må vi bruke bilder. Start med å slette alt under .wrapper-stilene, alt tag relatert! Du må nå lime inn i følgende utdrag. Vi bruker bare noen bakgrunnsbilder her, men gjentar også tekstbakgrunnen på x-aksen, da teksten kan være lengde! Selv Supercalafragalisticexpialadoshus!
.pil bredde: 15px; høyde: 25px; float: venstre; bakgrunn: url (... /images/arrow.png) no-repeat; .text høyde: 25px; float: venstre; padding-left: 4 piksler; padding-right: 4px; bakgrunn: url (... /images/text.png) repeat-x; font-familie: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.75em; font-vekt: bold; color: # 996633; tekstskygge: 0px 1px 0px rgba (255,255,255, .4); linje-høyde: 23 pikslene; .end bredde: 4px; høyde: 25px; float: venstre; bakgrunn: url (... /images/end.png) no-repeat; .tag: hover .arrow bakgrunnsbilde: url (... /images/arrow_hover.png); .tag: svever .text bakgrunnsbilde: url (... /images/text_hover.png); .tag: svever .end bakgrunnsbilde: url (... /images/end_hover.png);
Vel det er det! Det er en annen opplæring, og det ser bra ut! Vi har tatt disse tagtastic-kodene og opprettet dem med CSS mens du serverer IE samtidig. Disse kodene kan brukes til alle slags ting - gå videre og bruk dem i en sidebar, blogg, uansett hva du liker!
Jeg håper du likte denne opplæringen, takk for å lese.
Accentsconagua