Ekstrem Makeover jPaginator CSS3 Edition

De div "paginering" er det vi skal målrette, det er her vår jPaginator vil bli lagt til. Div-elementet før "paginering" er ikke avgjørende, men vi skal bruke det for å illustrere paginasjonen, faktisk gjøre noe, ved å endre innholdet i det hver gang en knapp klikkes.

Også verdt å merke seg er kontrollknappene, to koblinger på hver side av "paginator_p_wrap" som vi skal bruke til å kontrollere vår paginering. Disse er helt valgfrie - vi tildeler dem en rolle i parametrene når vi kaller jPaginator. Til slutt inkluderer vi oppslaget til glidebryteren.

Så mye er da pakket inn i en "container" div bare for å hjelpe oss med å vise ting pent.

Nå må vi ringe jPaginator i :

Her kan du se at jPaginator blir brukt på vår div "paginering", finjustert med bare noen av de mange parametrene som er tilgjengelige for oss. Vi har satt mengden sider til 64, marginen rundt hver lenke til 5px og lengden (men mange lenker vil være synlige) til 8. Videre legger vi opp de 4 kontrollelementene vi har lagt til i vår oppsummering - nå er de Jeg skal faktisk gjøre noe. Til slutt, en funksjon (levert av Remy) for å endre innholdet på vår div "side" når vi klikker.

Etter å ha fullført trinnene så langt, bør du ha alt i orden i sin mest grunnleggende form.

Trinn 4: La spillene begynne

For å kunne nøyaktig bygge elementene våre bør vi først sørge for at vi vet hvor stort alt er. La oss ta en titt på de ulike dimensjonene i vårt design:

For å oppsummere har vi pagineringsknappene (de er ikke knappelementer, men vi refererer til dem som knapper fra dette punktet på) som er 30x30px, beholderen (inkludert høydepunkter og skygger) som er 110px høy og naven koblinger som er 40px brede.

Som dekket, la oss gå videre til noen prettying opp?

Trinn 5: Stilark

Knappene for vår paginering opprettes dynamisk, så hvis du slettet det kommenterte eksemplet, må du bruke Firebug eller en annen nettleserinspektør for å se hvordan ting settes sammen.

Etter å ha funnet ut at våre knapper faktisk er divs med en klasse av "paginator_p" vet vi i hvert fall hva vi skal styling. Vi kan også se at mange inline-stiler legges til i disse elementene av jPaginator, selv om de alle bestemmer layout i motsetning til estetikk.

La oss legge til noen regler i vårt stilark, for å få ballen til å rulle?

kropp bakgrunn: url (img / bg.png) # 242424;  #container polstring: 20px; bredde: 480px; margin: 100px auto 0 auto; font-familie: Arial, sans-serif;  .paginator_p høyde: 30px; bredde: 30px; linjehøyde: 30px; tekst-align: center; skriftstørrelse: 13px; font-weight: bold; farge: # 26430c; 

En solid start. Før vi begynner å snakke om med knappene, setter vi et bakgrunnsbilde for kroppen og legger til noen styling i vår "container" div. Vi har angitt at knappene våre skal være 30x30px, vi har satt linjehøyde innenfor dem for å matche (som vil plassere tallene våre mer eller mindre vertikalt sentrert), og vi har brukt et tekstjustert: senter for å håndtere tallene 'horisontal justering. Så, vi har fine firkantede knapper, med perfekt sentrert tall. Da fetter vi teksten opp og farger den i henhold til vårt design.

Trinn 6: Pretty Colors

Fortsett, la oss bruke den riktige bakgrunnen til knappene våre. Vi bruker CSS3-gradienter, som vil se oss tatt vare på av alle moderne nettlesere - selv IE10. For å beskytte, har vi en solid farge og et tilbakegangsbilde for gradvis bilde for usamvirkende nettlesere. Vi legger også til en subtile dropshadow til teksten i vår knapp, som diktert av vårt design.

 / * 1px høyre og nedover, ingen uskarphet og offwhite * / text-skygge: 1px 1px 0px # 5a8332; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / bakgrunnsfarge: # 4A821B; bakgrunnsbilde: url (img / sprite.png) no-repeat 0 0; / * bilde fallback for ingen støttende nettlesere * / bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# 4a821b) til (# 243f0d)); / * Saf4 +, Chrome * / bakgrunnsbilde: -webkit-lineær-gradient (topp, # 4a821b, # 243f0d); / * Chrome 10+, Saf5.1 + * / bakgrunnsbilde: -moz-lineær-gradient (topp, # 4a821b, # 243f0d); / * FF3.6 * / bakgrunnsbilde: -ms-lineær gradient (topp, # 4a821b, # 243f0d); / * IE10 * / bakgrunnsbilde: -o-lineær gradient (topp, # 4a821b, # 243f0d); / * Opera 11.10+ * / bakgrunnsbilde: lineær gradient (topp, # 4a821b, # 243f0d);

Merk: Hvis du har 5 minutter, sjekk ut Paul Irres CSS3, vær så snill! for mer informasjon om CSS3 og støttende nettlesere.

Trinn 7: Livets sirkel

Vi har allerede angitt at våre koblinger var 30px kvadrater, slik at å legge runde hjørner på 15px vil gi oss perfekte sirkler. Av deg går da?

 / * grense radius halve bredden og høyden på våre lenker for å lage en sirkel * / -moz-grense-radius: 15px; / * FF1-3.6 * / -webkit-grense-radius: 15px; / * Saf3-4, iOS 1-3.2, Android <1.6 */ border-radius: 15px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

Trinn 8: Pop!

Vi er bare et par små detaljer borte fra å ha knapper som de i .psd. La oss legge til en bokseskygge for å gjøre elementet vårt pop. Faktisk, la oss legge til to.

Vi gir hver lenke en mørk skygge, som virker som en mørk glød rundt sirkelen. De blir spredt 1px fra sirkelen, og deretter uskarp ytterligere 4px. Jeg har spesifisert fargen nøyaktig (takket være dropperverktøyet i Photoshop), men vi kunne også ha brukt en rgb-verdi med opasitet her.

Etter å ha brukt vår første bokseskygge, kan vi nå bruke et sekund (må ha kjærlighetsskygger) for å fungere som vår høydepunktsglødende ting. Du ser det andre settet av verdier foran "innsett" som styrker lyset innover. Ingen uskarphet, ingen x-akseforskyvning, men kompenserer 1px ned, slik at gløden bare skummer toppen av våre kretser.

 / * bokseskygge - ingen forskyvning, men en slørethet på 4px og spredning av 1px * / / * pluss en ekstra bokseskygge for å skape glød * / -moz-boks-skygge: 0 0 4px 1px # 191919, innspill 0 1px 0 # 7ead42; / * FF3.5 + * / -webkit-boks-skygge: 0 0 4px 1px # 191919, innsett 0 1px 0 # 7ead42; / * Saf3.0 +, Chrome * / boksskygge: 0 0 4px 1px # 191919, innsett 0 1px 0 # 7ead42; / * Opera 10.5, IE9, Chrome 10+ * /

Her er hva den resulterende css ser ut til vår "paginator_p" div:

.paginator_p høyde: 30px; bredde: 30px; linjehøyde: 30px; tekst-align: center; skriftstørrelse: 13px; font-weight: bold; farge: # 26430c; / * 1px høyre og nedover, ingen uskarphet og offwhite * / text-skygge: 1px 1px 0px # 5a8332; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / bakgrunnsfarge: # 4A821B; bakgrunnsbilde: url (img / sprite.png) no-repeat 0 0; / * bilde fallback for ingen støttende nettlesere * / bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# 4a821b) til (# 243f0d)); / * Saf4 +, Chrome * / bakgrunnsbilde: -webkit-lineær-gradient (topp, # 4a821b, # 243f0d); / * Chrome 10+, Saf5.1 + * / bakgrunnsbilde: -moz-lineær-gradient (topp, # 4a821b, # 243f0d); / * FF3.6 * / bakgrunnsbilde: -ms-lineær gradient (topp, # 4a821b, # 243f0d); / * IE10 * / bakgrunnsbilde: -o-lineær gradient (topp, # 4a821b, # 243f0d); / * Opera 11.10+ * / bakgrunnsbilde: lineær gradient (topp, # 4a821b, # 243f0d); / * grense radius halve bredden og høyden på våre lenker for å lage en sirkel * / -moz-grense-radius: 15px; / * FF1-3.6 * / -webkit-grense-radius: 15px; / * Saf3-4, iOS 1-3.2, Android <1.6 */ border-radius: 15px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ /*box shadow - no offset, but a blur of 4px and spread of 1px*/ /*plus an additional box-shadow to create the glow*/ -moz-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* FF3.5+ */ -webkit-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* Saf3.0+, Chrome */ box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* Opera 10.5, IE9, Chrome 10+ */ 

Trinn 9: Milestone # 1

Akkurat da har vi våre lenker i standardstandarden deres - ser bra ut! Vi trenger nå å legge til litt pustplass til elementene rundt linkene:

/ * beholder for knapper - legg til noe polstring slik at vi kan se drop shadow * / .paginator_p_bloc polstring: 5px 0; 

"Paginator_p_bloc" er forelder for alle knappene våre, og det trenger litt polstring (øverst og nederst) for å tillate dropshadowen vi har brukt rundt dem. Hva du nå har, skal se ut som vår første milepæl.

Trinn 10: Hover State

La oss bruke en fin svingertilstand til knappene våre, akkurat som vi legger ut i .psd.

.paginator_p: hover color: # 0d1804; / * 1px høyre og nedover, ingen uskarphet og blekgrønn * / tekstskygge: 1px 1px 0px # 8dc953; bakgrunnsfarge: # 87D445; bakgrunnsbilde: url (img / sprite.png) no-repeat -120px 0; / * bilde fallback for ingen støttende nettlesere * / bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# 87d445) til (# 589225)); / * Saf4 +, Chrome * / bakgrunnsbilde: -webkit-lineær-gradient (topp, # 87d445, # 589225); / * Chrome 10+, Saf5.1 + * / bakgrunnsbilde: -moz-lineær-gradient (topp, # 87d445, # 589225); / * FF3.6 * / bakgrunnsbilde: -ms-lineær-gradient (topp, # 87d445, # 589225); / * IE10 * / bakgrunnsbilde: -o-lineær-gradient (topp, # 87d445, # 589225); / * Opera 11.10+ * / bakgrunnsbilde: lineær gradient (topp, # 87d445, # 589225); / * bokseskygge - ingen forskyvning, men en uskarphet på 2px og spredning av 1px * / / * pluss en ekstra bokseskygge for å skape gløden - litt lysere enn normal tilstand * / -moz-boks-skygge: 0 0 4px 1px # 191919, innsett 0 1px 0 # cff3a2; / * FF3.5 + * / -webkit-boks-skygge: 0 0 4px 1px # 191919, innsett 0 1px 0 # cff3a2; / * Saf3.0 +, Chrome * / bokseskygge: 0 0 4px 1px # 191919, innsett 0 1px 0 # cff3a2; / * Opera 10.5, IE9, Chrome 10+ * /

Så hva har vi gjort her? Vel, vi har mørkret tallene 'farge og gitt dem en blek dråpe skygge. Vi har endret verdiene av bakgrunnsgradienten (for å lyse opp) og vi har subtilt endret høydepunktsskyggen på toppen av linkene. Den mørke lysdråpeskyggen forblir den samme, men vi må deklarere den igjen hvis den ikke skal ignoreres.

Trinn 11: Valgte tilstand (Milestone # 2)

Vi har blitt hyggelig innredet med en utvalgt klasse, så la oss stilke det som om knappen har blitt deprimert (som jeg mener det er blitt presset innover, det sitter ikke på badet som rocker frem og tilbake, suger inn i en gryte med peanøttsmør ).

/ * angi valgt, pluss svinger mens valgt. Dette kan komme før eller etter den generelle hover-tilstanden på grunn av oppretting av spesifisitet * / .paginator_p.selected, .paginator_p.selected: hover color: # 0d1804; / * 1px høyre og nedover, ingen uskarphet og blekgrønn * / tekstskygge: 1px 1px 0px # 8dc953; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / bakgrunnsfarge: # 589225; bakgrunnsbilde: url (img / sprite.png) no-repeat -80px 0; / * bilde fallback for ingen støttende nettlesere * / bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# 589225), til (# 87D445)); / * Saf4 +, Chrome * / bakgrunnsbilde: -webkit-lineær-gradient (topp, # 589225, # 87D445); / * Chrome 10+, Saf5.1 + * / bakgrunnsbilde: -moz-lineær-gradient (topp, # 589225, # 87D445); / * FF3.6 * / bakgrunnsbilde: -ms-lineær gradient (topp, # 589225, # 87D445); / * IE10 * / bakgrunnsbilde: -o-lineær-gradient (topp, # 589225, # 87D445); / * Opera 11.10+ * / bakgrunnsbilde: lineær gradient (topp, # 589225, # 87D445); / * bokseskygge - ingen forskyvning, men en uskarphet på 2px og spredning på 1px * / / * pluss en ekstra bokseskygge for å skape gløden - litt lysere enn normal tilstand * / -moz-boks-skygge: 0 0 2px 1px # 191919, innsett 0 1px 0 # cff3a2; / * FF3.5 + * / -webkit-boks-skygge: 0 0 2px 1px # 191919, innsett 0 1px 0 # cff3a2; / * Saf3.0 +, Chrome * / boksskygge: 0 0 2px 1px # 191919, innsett 0 1px 0 # cff3a2; / * Opera 10.5, IE9, Chrome 10+ * /

Vi har tatt med en valgt: hover angi at knappen ikke endres når den svinger over. Så hva har vi gjort her? Vi endret fargen og tekstskyggen igjen, reverserte gradienten for å gi en konkav følelse og redusert den mørke gløden (tyder på at den ikke lenger stikker ut så mye). Enkel. Det du nå har, skal se ut som vår andre milepæl

Trinn 12: Skyvekontrollen

Etter å ha sortert ut knappene, la oss gjøre oppmerksom på glidebryteren. Det er relativt rett fremover; Vi må endre margene for å få det til riktig plassering, gi det en bakgrunn og gjøre den riktig høyde. Det må være 10px høyt, i henhold til vårt design, så vi gir den 8px høyde pluss en 1px grense rundt for å kutte den ut. Vi gir topp og venstre grenser en mørk farge, og bunnen og høyre grenser en blek farge for å gi inntrykk av lettelse.

Til slutt, rundt hjørnene i hver ende - vi har nå en fin glideskinne.

/ * glidebryteren * / .paginator_slider / * marginen til venstre skyver den forbi nav-knappene, så gjør avstanden den totale bredden, inkludert marginer av nav-knappene * / margin: 20px 0 20px 80px; / * med høyde på 8px, pluss kantlinje på 1px rundt vår høyde totals 10px * / høyde: 8px; bakgrunn: # 181818; grense: 1px solid # 393939; border-top-farge: # 0f0f0f; border-left-color: # 0f0f0f; / * grense radius for ff, safari + krom, css3 * / / * halvparten av totalelementets høyde for å lage avrundede ender * / -moz-grense-radius: 5px; / * FF1-3.6 * / -webkit-grense-radius: 5px; / * Saf3-4, iOS 1-3.2, Android <1.6 */ border-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ 

Trinn 13: Knappen

Ja, knott. Det virket som et godt navn på tiden, men jeg antar at jeg kunne ha sittende fast med "håndtak". Uansett, la oss legge til litt stil på den tingen du klikker og dra langs glidebanen?

/ * skyveknappen, er, knotten? * / .paginator_slider .ui-skyvehåndtak høyde: 20px; bredde: 20px; margin-venstre: -10px; / * knopper knotten til venstre, halv bredden * / / * fjern omrisset i ff * / disposisjon: ingen; / * grense radius for ff, safari + krom, css3 * / / * halv bredde og høyde på knotten for å lage en sirkel * / -moz-grense-radius: 10px; / * FF1-3.6 * / -webkit-grense-radius: 10px; / * Saf3-4, iOS 1-3.2, Android <1.6 */ border-radius: 10px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ /*alter the positioning to bring it centred to rail*/ top: -7px; /*same styling as links*/ background-color: #4A821B; background-image: url(img/sprite.png) no-repeat 0 0; /*image fallback for none supporting browsers*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#4a821b), to(#243f0d)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #4a821b, #243f0d); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(top, #4a821b, #243f0d); /* FF3.6 */ background-image: -ms-linear-gradient(top, #4a821b, #243f0d); /* IE10 */ background-image: -o-linear-gradient(top, #4a821b, #243f0d); /* Opera 11.10+ */ background-image: linear-gradient(top, #4a821b, #243f0d); /*box shadow - no offset, but a blur of 4px and spread of 1px*/ /*plus an additional box-shadow to create the glow*/ -moz-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* FF3.5+ */ -webkit-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* Saf3.0+, Chrome */ box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* Opera 10.5, IE9, Chrome 10+ */ 

Mesteparten av denne stylingen vil se kjent som den er basert på våre knappers standardstatus; Den forhåndsdefinerte bredden og høyden, gradientbakgrunnen, de avrundede hjørner og de forskjellige bokseskyggene.

De eneste andre bemerkelsesverdige reglene er disposisjon: ingen som vil fjerne den stiplede konturen i Firefox, posisjonen y-akse for å endre hvor knotten sitter vertikalt på glideskinnen og margin-venstre: -10px; som knytter knotten igjen, akkurat halvparten av bredden. Sjekk ut bildet nedenfor for å finne ut hvorfor:

Vi gjør fremgang, sjekk ut vår tredje milepæl.

Trinn 14: Kontroller

Fortsett på, la oss rydde opp kontrollene på hver side av paginasjonsbeholderen.

For enkelhets skyld skal vi bruke bilder, så hoppe tilbake til Photoshop forberede deg et spritark for koblingsikonene. Jeg begynte allerede å lage et spritesheet med fallbackgradienter, så jeg legger bare til det, og plasserer alt logisk for referanse i CSS. Hvis du velger å kaste alt tilfeldig i spritesheet, kan du alltid finne bildene dine takket være tjenester som Sprite Cow.

Hver ikonstatus er 40x40px, og vi vil motsette hover-statene vertikalt. Som du kan se fra stylingen under, er hver knapp en 40x40px blokk og har riktig bilde anvendt, avhengig av posisjon og tilstand. Css er kommentert, så jeg holder kjeft nå.

/ * la oss håndtere kontrollknappene * / / * generelle stiler for kontroller * / .control float: left; bredde: 40px; høyde: 40px; margin: 35px 0 0 0; stilling: relativ; / * du vil se hvorfor i litt * / markør: pointer;  #max_backward bakgrunn: url (img / sprite.png) no-repeat 0 -60px;  #over_backward bakgrunn: url (img / sprite.png) no-repeat -40px -60px;  #over_forward bakgrunn: url (img / sprite.png) no-repeat -80px -60px;  #max_forward bakgrunn: url (img / sprite.png) no-repeat -120px -60px;  / * hovers * / #max_backward: svever bakgrunn: url (img / sprite.png) no-repeat 0 -100px;  #over_backward: svever bakgrunn: url (img / sprite.png) no-repeat -40px -100px;  #over_forward: svever bakgrunn: url (img / sprite.png) no-repeat -80px -100px;  #max_forward: svever bakgrunn: url (img / sprite.png) no-repeat -120px -100px; 

Veldig bra, ta en titt på hva som er gjort så langt i milepæl # 4.

Trinn 15: Sinking Feeling

Det er egentlig bare et par flere detaljer vi må ta vare på. Våre knapper er for høye, og de forsvinner til ingenting når de treffer kanten av foreldrebeholderen, noe som er litt mørk. Vårt design tar seg av dette ved å foreslå at de holder seg under et spor i bakgrunnen, så la oss se om vi kan oversette det til nettleseren.

Ta en titt på bildet nedenfor. I det ser du at vi trenger fire bilder for å håndtere hvert av høydepunktene og skyggene. Høydepunktene hører til i tillegg til kontrollene på hver side av beholderen, skyggene tilhører selve containeren, så vi må gjøre det 110px høyt.

La oss først ta vare på (øke) polstring på vårt containerelement:

.paginator_p_wrap margin: 0; polstring: 35px 0; 

Etter å ha gjort det, har vår paginasjon blitt presset ned i sin rettmessige posisjon.

Trinn 16: Nip og Tuck

OK, la oss spille inn disse skyggene (jeg har igjen lagt dem til sprite-arket):

.paginator_p_wrap margin: 0; polstring: 35px 0; / * flere bakgrunnsbilder, en til venstre, en til høyre * / bakgrunn: url (img / shadow_sprite.png) venstre -220px no-repeat, url (img / shadow_sprite.png) høyre -330px no repeat

? og nå, la oss håndtere høydepunktene ved hjelp av :etter velg (støttes i alle de store nettleserne)

/ * høydepunkter * / #over_backward: etter innhold: "; bakgrunn: url (img / sprite.png) -40px -140px no-repeat; display: blokk; høyde: 110px; bredde: 30px; / * plassere høydepunktet til ubehagelige arvede flyter og marginer fra .control * / posisjon: absolutt; høyre: 0px; topp: -35px; #over_forward: etter content: "; bakgrunn: url (img / sprite.png) -80px -140px no-repeat; skjerm: blokk; høyde: 110px; bredde: 30px; / * plassere høydepunktet på grunn av vanskelige arvelige flyter og marginer fra .control * / posisjon: absolute; venstre: 0px; topp: -35px; 

Den: ettervelgeren genererer effektivt en gjenstand innenfor vår side. Vi kan da manipulere det elementet som alle andre, med tanke på at den arver egenskaper fra sin forelder. I vårt tilfelle, på grunn av omfattende utforming av foreldreobjektet, har vi valgt absolutt innlegging slik at vi kan finne ut hvor høydepunktet vises.

Noen ekstra stiler for å rydde opp sidens innhold, så er vi ferdige.

Utmerket! Vi har nådd milepæl # 5, målstreken, med mindre du vil imøtekomme eldre nettlesere.

Trinn 17: Kompatibilitet bakover

Jeg skal forlate dette til deg. Teknene vi har praktisert var akkurat det; teknikker for å praktisere og jeg har oppført nettleserkompatibiliteten i introduksjonen. Men hvis du vil gå videre og sørge for at alt er tickety-boo i eldre nettlesere, har du noen muligheter for deg. Vi sørget for at våre gradienter ble dekket av å inkludere fallback-bilder i sprite-arket. Imidlertid er det ikke helt like rett fremover å fikse flere bakgrunnsbilder, bokseskygger, tekstskygger og grense-radius.

Å bruke CSS3PIE hjelper deg med de fleste av disse tingene (alt bortsett fra tekstskygge), eller du kan legge til knappene til spritesheet (faktisk, jeg har allerede gjort det for deg) og bruke dem ved hjelp av et nettleserespesifikt stilark . Mål IE8 og lavere ved hjelp av en betinget uttalelse som den nedenfor og moderne nettlesere vil ikke være klokere.

Konklusjon

Takk for at du følger med, jeg håper du klarer å trekke noen nyttige ideer fra det du har lest. Også en stor takk til Remy for frivillig jPaginator som marsvin - husk å sjekke ut sin utvikling på GitHub!