Extreme make-over jPaginator CSS3-editie

De div "paginering" is wat we gaan bereiken, dit is waar onze jPaginator zal worden toegevoegd. Het div-element vóór 'paginering' is niet cruciaal, maar we gaan het gebruiken om te illustreren dat de paginering daadwerkelijk iets doet, door de inhoud erin te veranderen telkens wanneer op een knop wordt geklikt.

Het vermelden waard zijn ook de bedieningsknoppen, twee links aan beide zijden van de "paginator_p_wrap" die we gebruiken om onze paginering te beheren. Deze zijn volledig optioneel - we zullen ze een rol toewijzen in de parameters wanneer we jPaginator aanroepen. Ten slotte nemen we de markup voor de schuifregelaar op.

De hele partij wordt dan verpakt in een "container" div, gewoon om ons te helpen dingen netjes weer te geven.

Nu moeten we jPaginator binnen de :

Hier kun je zien hoe jPaginator wordt toegepast op onze div "paginering", verfijnd met slechts een paar van de vele beschikbare parameters. We hebben het aantal pagina's ingesteld op 64, de marge rond elke link op 5px en de lengte (hoeveel links er ook zichtbaar zijn) tot 8. Verderop vermelden we de vier besturingselementen die we aan onze markup hebben toegevoegd - nu zijn ze ' Ik zal echt iets doen. Ten slotte een functie (geleverd door Remy) om de inhoud van onze div "pagina" te veranderen wanneer we klikken.

Nadat je de stappen tot nu toe hebt voltooid, zou je het hele ding in zijn meest basale vorm moeten laten werken.

Stap 4: Laat de spelen beginnen

Om onze elementen nauwkeurig op te bouwen, moeten we er eerst voor zorgen dat we weten hoe groot alles is. Laten we een kijkje nemen naar de verschillende dimensies van ons ontwerp:

Kortom, we hebben de paginaknoppen (het zijn geen knopelementen, maar we noemen ze vanaf dit punt naar knoppen) die 30x30 px zijn, de container (inclusief hoogtepunten en schaduwen) die 110 px hoog is en de nav links die 40px breed zijn.

Dat bedekt, laten we verdergaan met wat opfrissen?

Stap 5: stylesheet

De knoppen voor onze paginering worden dynamisch gemaakt, dus als u het voorbeeld met commentaar hebt verwijderd, moet u Firebug of een andere browserinspector gebruiken om te zien hoe dingen zijn samengesteld.

Nadat we hebben vastgesteld dat onze knoppen eigenlijk divs zijn met een klasse 'paginator_p', weten we in ieder geval wat we gaan stylen. We kunnen ook zien dat een heleboel inline stijlen door jPaginator aan deze elementen worden toegevoegd, hoewel ze allemaal de lay-out bepalen in tegenstelling tot de esthetiek.

Laten we wat regels toevoegen aan ons stylesheet om de bal aan het rollen te krijgen?

body background: url (img / bg.png) # 242424;  #container opvulling: 20px; breedte: 480 px; marge: 100 px automatisch 0 auto; lettertype-familie: Arial, sans-serif;  .paginator_p height: 30px; breedte: 30px; regelhoogte: 30px; text-align: center; lettergrootte: 13px; lettertype: vet; kleur: # 26430c; 

Een solide start. Voordat we beginnen te rommelen met de knoppen, plaatsen we een achtergrondafbeelding voor het lichaam en voegen we wat styling toe aan onze 'container'-div. We hebben aangegeven dat onze knoppen 30x30 px zijn, we hebben de lijnhoogte in die knoppen ingesteld om overeen te komen (waardoor onze nummers min of meer verticaal gecentreerd worden) en we hebben een text-align: center toegepast om met te behandelen de horizontale uitlijning van de nummers. We hebben dus mooie vierkante knoppen met perfect gecentreerde cijfers. Vervolgens smeren we de tekst op en kleuren deze in volgens ons ontwerp.

Stap 6: Mooie kleuren

Laten we doorgaan, laten we de juiste achtergrond toepassen op onze knoppen. We gebruiken CSS3-gradiënten, waarmee we rekening houden met alle moderne browsers - zelfs IE10. Ter bescherming hebben we een effen kleur en een aflopend beeld voor niet-coöperatieve browsers. We voegen ook een subtiele slagschaduw toe aan de tekst in onze knop, zoals bepaald door ons ontwerp.

 / * 1 px rechts en omlaag verschoven, geen onscherpte en offwhite * / tekst-schaduw: 1px 1px 0px # 5a8332; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / achtergrondkleur: # 4A821B; achtergrondafbeelding: url (img / sprite.png) no-repeat 0 0; / * afbeeldingsbackback voor geen enkele ondersteunde browser * / achtergrondafbeelding: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, van (# 4a821b), tot (# 243f0d)); / * Saf4 +, Chrome * / achtergrondafbeelding: -webkit-lineaire gradiënt (boven, # 4a821b, # 243f0d); / * Chrome 10+, Saf5.1 + * / achtergrondafbeelding: -moz-linear-gradient (boven, # 4a821b, # 243f0d); / * FF3.6 * / achtergrondafbeelding: -ms-lineaire gradiënt (boven, # 4a821b, # 243f0d); / * IE10 * / achtergrondafbeelding: -o-lineaire gradiënt (boven, # 4a821b, # 243f0d); / * Opera 11.10+ * / achtergrondafbeelding: lineair verloop (boven, # 4a821b, # 243f0d);

Notitie: als je 5 minuten hebt, bekijk Paul Irish's CSS3, alsjeblieft! voor meer informatie over CSS3 en ondersteunende browsers.

Stap 7: The Circle of Life

We hebben al aangegeven dat onze links 30px vierkantjes waren, dus het toevoegen van afgeronde hoeken van 15px levert ons perfecte cirkels op. Ga dan maar?

 / * grensradius halve breedte en hoogte van onze links om een ​​cirkel te maken * / -moz-border-radius: 15px; / * FF1-3.6 * / -webkit-border-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+ */

Stap 8: Pop!

We hebben slechts een paar kleine details verwijderd van knoppen zoals die in de .psd. Laten we een doosschaduw toevoegen om ons element te maken knal. Laten we er in feite twee toevoegen.

We zullen elke link een donkere schaduw geven, die als een donkere gloed rond de cirkel werkt. Ze worden 1 px uit de cirkel verspreid en vervagen vervolgens nog eens 4 px. Ik heb de kleur precies gespecificeerd (dankzij het pipetgereedschap in Photoshop) maar we hadden hier ook een rgb-waarde met dekking kunnen gebruiken.

Nadat we onze eerste doosschaduw hebben toegepast, kunnen we nu een tweede (moet houden van doosschaduwen) toepassen om op te treden als ons hoogtepunt-gloei ding. Je ziet de tweede reeks waarden voorafgegaan door "inzet" die de gloed naar binnen dwingt. Geen onscherpte, geen offset van de x-as, maar offset 1px omlaag zodat de gloed net over de bovenkant van onze cirkels scheert.

 / * vakschaduw - geen verschuiving, maar een vervaging van 4px en spreiding van 1px * / / * plus een extra vakschaduw om de gloed te maken * / -moz-box-shadow: 0 0 4px 1px # 191919, inzet 0 1px 0 # 7ead42; / * FF3.5 + * / -webkit-vak-schaduw: 0 0 4px 1px # 191919, inzet 0 1px 0 # 7ead42; / * Saf3.0 +, Chrome * / vakschaduw: 0 0 4px 1px # 191919, inzet 0 1px 0 # 7ead42; / * Opera 10.5, IE9, Chrome 10+ * /

Dit is hoe de resulterende CSS eruitziet voor onze "paginator_p" div:

.paginator_p height: 30px; breedte: 30px; regelhoogte: 30px; text-align: center; lettergrootte: 13px; lettertype: vet; kleur: # 26430c; / * 1 px rechts en omlaag verschoven, geen onscherpte en offwhite * / tekst-schaduw: 1px 1px 0px # 5a8332; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / achtergrondkleur: # 4A821B; achtergrondafbeelding: url (img / sprite.png) no-repeat 0 0; / * afbeeldingsbackback voor geen enkele ondersteunde browser * / achtergrondafbeelding: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, van (# 4a821b), tot (# 243f0d)); / * Saf4 +, Chrome * / achtergrondafbeelding: -webkit-lineaire gradiënt (boven, # 4a821b, # 243f0d); / * Chrome 10+, Saf5.1 + * / achtergrondafbeelding: -moz-linear-gradient (boven, # 4a821b, # 243f0d); / * FF3.6 * / achtergrondafbeelding: -ms-lineaire gradiënt (boven, # 4a821b, # 243f0d); / * IE10 * / achtergrondafbeelding: -o-lineaire gradiënt (boven, # 4a821b, # 243f0d); / * Opera 11.10+ * / achtergrondafbeelding: lineair verloop (boven, # 4a821b, # 243f0d); / * grensradius halve breedte en hoogte van onze links om een ​​cirkel te maken * / -moz-border-radius: 15px; / * FF1-3.6 * / -webkit-border-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+ */ 

Stap 9: Milestone # 1

Op dat moment hebben we onze links in hun standaardstaat - er goed uitziend! We moeten nu een beetje ademruimte toevoegen aan de elementen rond de links:

/ * container voor knoppen - voeg wat opvulling toe zodat we de slagschaduw kunnen zien * / .paginator_p_bloc opvulling: 5px 0; 

De "paginator_p_bloc" is de ouder van al onze knoppen, en het heeft een beetje opvulling (boven en onder) nodig voor de slagschaduw die we om hen heen hebben toegepast. Wat je nu hebt, zou op onze eerste mijlpaal moeten lijken.

Stap 10: Hover State

Laten we een mooie zweeftoestand toepassen op onze knoppen, net zoals we in de .psd hebben aangegeven.

.paginator_p: hover color: # 0d1804; / * 1 px rechts en omlaag verschoven, geen onscherpte en lichtgroen * / tekst-schaduw: 1px 1px 0px # 8dc953; achtergrondkleur: # 87D445; background-image: url (img / sprite.png) no-repeat -120px 0; / * afbeeldingsbackback voor geen enkele ondersteunde browser * / achtergrondafbeelding: -webkit-gradiënt (lineair, linker boven, links onder, van (# 87d445), tot (# 589225)); / * Saf4 +, Chrome * / achtergrondafbeelding: -webkit-lineaire gradiënt (boven, # 87d445, # 589225); / * Chrome 10+, Saf5.1 + * / achtergrondafbeelding: -moz-linear-gradient (top, # 87d445, # 589225); / * FF3.6 * / achtergrondafbeelding: -ms-lineaire gradiënt (boven, # 87d445, # 589225); / * IE10 * / achtergrondafbeelding: -o-lineaire gradiënt (boven, # 87d445, # 589225); / * Opera 11.10+ * / achtergrondafbeelding: lineair verloop (boven, # 87d445, # 589225); / * vakschaduw - geen verschuiving, maar een vervaging van 2 px en spreiding van 1px * / / * plus een extra vakschaduw om de gloed te creëren - iets helderder dan de normale staat * / -moz-box-shadow: 0 0 4px 1px # 191919, inzet 0 1px 0 # cff3a2; / * FF3.5 + * / -webkit-vak-schaduw: 0 0 4px 1px # 191919, inzet 0 1px 0 # cff3a2; / * Saf3.0 +, Chrome * / vakschaduw: 0 0 4px 1px # 191919, inzet 0 1px 0 # cff3a2; / * Opera 10.5, IE9, Chrome 10+ * /

Wat hebben we hier gedaan? Welnu, we hebben de kleur van de nummers donkerder gemaakt en een bleke slagschaduw gegeven. We hebben de waarden van de achtergrondgradiënt gewijzigd (om de dingen op te vrolijken) en we hebben subtiel de markeerduimschaduw boven aan de links aangepast. De schaduw van de donkere gloed blijft hetzelfde, maar we moeten hem opnieuw declareren als hij niet genegeerd mag worden.

Stap 11: Selected State (Milestone # 2)

We zijn vriendelijk ingericht met een geselecteerde klasse, dus laten we het stylen alsof de knop is ingedrukt (waarmee ik bedoel dat het naar binnen is geduwd, het zit niet in de badkamer heen en weer schommelen, snikkend in een pot met pindakaas ).

/ * staat voor geselecteerd, plus zwevend terwijl geselecteerd. Dit kan vóór of na de algemene zweeftoestand komen vanwege outranking-specificiteit * / .paginator_p.selected, .paginator_p.selected: hover color: # 0d1804; / * 1 px rechts en omlaag verschoven, geen onscherpte en lichtgroen * / tekst-schaduw: 1px 1px 0px # 8dc953; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / achtergrondkleur: # 589225; background-image: url (img / sprite.png) no-repeat -80px 0; / * afbeeldingsbackback voor geen enkele ondersteuning voor browsers * / achtergrondafbeelding: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, van (# 589225), tot (# 87D445)); / * Saf4 +, Chrome * / achtergrondafbeelding: -webkit-lineaire gradiënt (boven, # 589225, # 87D445); / * Chrome 10+, Saf5.1 + * / achtergrondafbeelding: -moz-linear-gradient (top, # 589225, # 87D445); / * FF3.6 * / achtergrondafbeelding: -ms-lineaire gradiënt (boven, # 589225, # 87D445); / * IE10 * / achtergrondafbeelding: -o-lineaire gradiënt (boven, # 589225, # 87D445); / * Opera 11.10+ * / achtergrondafbeelding: lineair verloop (boven, # 589225, # 87D445); / * vakschaduw - geen verschuiving, maar een vervaging van 2 px en een spreiding van 1px * / / * plus een extra vakschaduw om de gloed te creëren - iets helderder dan de normale staat * / -moz-box-shadow: 0 0 2px 1px # 191919, inzet 0 1px 0 # cff3a2; / * FF3.5 + * / -webkit-vak-schaduw: 0 0 2px 1px # 191919, inzet 0 1px 0 # cff3a2; / * Saf3.0 +, Chrome * / vakschaduw: 0 0 2px 1px # 191919, inzet 0 1px 0 # cff3a2; / * Opera 10.5, IE9, Chrome 10+ * /

We hebben er een toegevoegd geselecteerd: hover zo dat de knop niet verandert wanneer eroverheen wordt bewogen. Dus wat hebben we hier nog meer gedaan? We hebben de kleur en tekstschaduw weer gewijzigd, de helling omgedraaid om een ​​hol gevoel te krijgen en de donkere gloed verminderd (wat erop wijst dat hij niet meer zo veel uitsteekt). Eenvoudig. Wat je nu hebt, zou op onze tweede mijlpaal moeten lijken

Stap 12: De schuifregelaar

Nadat we de knoppen hebben uitgezocht, richten we onze aandacht op de schuifregelaar. Het is relatief eenvoudig; we moeten de marges aanpassen om het op de juiste manier uit elkaar te plaatsen, een achtergrond te geven en de juiste hoogte te maken. Het moet volgens ons ontwerp 10px hoog zijn, dus we geven het 8px hoogte plus een 1px rand rondom om het uit te vouwen. We geven de boven- en linkerrand een donkere kleur, en de onder en rechter randen een bleke kleur om een ​​indruk van opluchting te geven.

Ten slotte, rond de hoeken aan beide uiteinden - we hebben nu zelf een mooie schuifrail.

/ * de schuifregelaar * / .paginator_slider / * marge links duwt hem voorbij de nav-knoppen, dus maak de afstand de totale breedte, inclusief marges van de nav-knoppen * / marge: 20px 0 20px 80px; / * met een hoogte van 8 px, plus een rand van 1px rondom onze hoogte totalen 10px * / hoogte: 8px; achtergrond: # 181818; rand: 1px vast # 393939; border-top-kleur: # 0f0f0f; border-left-colour: # 0f0f0f; / * grensradius voor ff, safari + chroom, css3 * / / * de helft van de totale hoogte van ons element om afgeronde uiteinden te maken * / -moz-border-radius: 5px; / * FF1-3.6 * / -webkit-border-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+ */ 

Stap 13: De knop

Ja, knop. Het leek toen een goede naam, maar ik denk dat ik het had kunnen volhouden met "handvat". Laten we in elk geval wat stijl toevoegen aan datgene waar je op klikt en langs de schuifrail slepen?

/ * de schuif, eh, knop? * / .paginator_slider .ui-slider-handle height: 20px; breedte: 20px; margin-left: -10px; / * duwt de knop naar links, de helft van de breedte * / / * verwijder de omtrek in ff * / outline: none; / * grensradius voor ff, safari + chroom, css3 * / / * de helft van de breedte en hoogte van de knop om een ​​cirkel te maken * / -moz-border-radius: 10px; / * FF1-3.6 * / -webkit-border-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+ */ 

Het grootste deel van deze stijl zal bekend voorkomen, omdat het gebaseerd is op de standaardinstelling van onze knoppen; de vooraf gedefinieerde breedte en hoogte, de verloopachtergrond, de afgeronde hoeken en de verschillende doosschaduwen.

De enige andere opmerkelijke regels zijn overzicht: none waarmee de stippellijn in Firefox wordt verwijderd, de positionering van de y-as om te wijzigen waar de knop verticaal op de schuifrail staat, en de margin-left: -10px; die de knop naar links verschuift, precies de helft van de breedte ervan. Bekijk de afbeelding hieronder om erachter te komen waarom:

We boeken vooruitgang, bekijk onze derde mijlpaal.

Stap 14: Besturing

Ga door, laten we de bedieningselementen aan beide kanten van de container voor paginering opruimen.

Voor de eenvoud gaan we afbeeldingen gebruiken, dus spring terug naar Photoshop en bereid jezelf een sprite sheet voor op de koppelingspictogrammen. Ik ben al begonnen met het samenstellen van een spritesheet met de fallback-gradiënten, dus ik zal daar gewoon aan toevoegen, alles logisch plaatsen voor verwijzingen in de CSS. Als u ervoor kiest om alles willekeurig in uw spritesheet te plaatsen, kunt u uw afbeeldingen altijd vinden dankzij services zoals Sprite Cow.

Elke status van het pictogram is 40x40px en we verzetten ons verticaal tegen de zweeftoestanden. Zoals je kunt zien in de onderstaande opmaak, is elke knop een blok van 40x40 px en wordt de juiste afbeelding toegepast, afhankelijk van de positie en staat. De CSS wordt becommentarieerd, dus ik hou me nu stil.

/ * laten we omgaan met de bedieningsknoppen * / / * algemene stijlen voor bedieningselementen * / .control float: left; breedte: 40px; hoogte: 40px; marge: 35 px 0 0 0; positie: relatief; / * u zult zien waarom in een bit * / cursor: pointer;  #max_backward background: url (img / sprite.png) geen herhaling 0 -60px;  #over_backward background: url (img / sprite.png) no-repeat -40px -60px;  #over_forward background: url (img / sprite.png) no-repeat -80px -60px;  #max_forward background: url (img / sprite.png) no-repeat -120px -60px;  / * hovers * / #max_backward: hover background: url (img / sprite.png) no-repeat 0 -100px;  #over_backward: hover background: url (img / sprite.png) no-repeat -40px -100px;  #over_forward: hover background: url (img / sprite.png) no-repeat -80px -100px;  #max_forward: hover background: url (img / sprite.png) no-repeat -120px -100px; 

Heel goed, kijk eens wat er tot nu toe is gedaan in mijlpaal # 4.

Stap 15: Zinkend gevoel

Er zijn eigenlijk maar een paar details waar we voor moeten zorgen. Onze knoppen zijn te hoog en verdwijnen in het niets wanneer ze de rand raken van de bovenliggende container, die een beetje slap is. Ons ontwerp zorgt hier voor door te suggereren dat ze onder een sleuf op de achtergrond verdwijnen, dus laten we kijken of we dat in de browser kunnen vertalen.

Bekijk de afbeelding hieronder. Hierin ziet u dat we vier afbeeldingen nodig hebben voor elk van de hoogtepunten en schaduwen. De hoogtepunten horen naast de knoppen aan weerszijden van de container, de schaduwen horen in de container zelf, dus we moeten er 110 px hoog maken.

Laten we eerst zorgen voor (verhoging) van de opvulling op ons containerelement:

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

Na dat gedaan te hebben, is onze paginering naar beneden geduwd in zijn rechtmatige positie.

Stap 16: Nip en Tuck

OK, laten we deze schaduwen ingeven (ik heb ze opnieuw toegevoegd aan het sprite-blad):

.paginator_p_wrap margin: 0; opvulling: 35 px 0; / * meerdere achtergrondafbeeldingen, één voor links, één voor rechts * / achtergrond: url (img / shadow_sprite.png) left -220px no-repeat, url (img / shadow_sprite.png) right -330px no-repeat

? en laten we nu de hoogtepunten behandelen met behulp van de :na selector (ondersteund in alle belangrijke browsers)

/ * highlights * / #over_backward: after content: "; background: url (img / sprite.png) -40px -140px no-repeat; display: block; height: 110px; width: 30px; / * position the highlight vanwege naar onhandige geërfde vlotters en marges van .control * / position: absolute; right: 0px; top: -35px; #over_forward: after content: "; achtergrond: url (img / sprite.png) -80px -140px geen herhaling; weergave: blok; hoogte: 110 px; breedte: 30px; / * plaats de markering vanwege onhandige geërfde vlotters en marges van .control * / positie: absoluut; links: 0px; top: -35px; 

De: na selector genereert effectief een object op onze pagina. We kunnen dat element vervolgens net als elk ander manipuleren, rekening houdend met het feit dat het eigenschappen van de ouder overneemt. In ons geval hebben we vanwege de uitgebreide vormgeving van het bovenliggende object gekozen voor absolute positionering, zodat we kunnen vaststellen waar de highlight wordt weergegeven.

Enkele aanvullende stijlen om de pagina-inhoud op te ruimen, dan zijn we klaar.

Uitstekend! We hebben mijlpaal # 5 bereikt, de eindstreep, tenzij je rekening wilt houden met oudere browsers.

Stap 17: compatibiliteit achteruit

Ik laat dit aan jou over. De technieken die we hebben geoefend, waren precies dat; technieken om te oefenen en ik heb de compatibiliteit van de browser in de inleiding vermeld. Als je echter verder wilt gaan en ervoor wilt zorgen dat alles tickety-boo is in oudere browsers, heb je enkele opties voor je. We hebben ervoor gezorgd dat onze verlopen werden afgedekt door fallback-afbeeldingen in de sprite-sheet. Het corrigeren van meerdere achtergrondafbeeldingen, doosschaduwen, tekstschaduwen en grensradius is echter niet zo eenvoudig.

Het gebruik van CSS3PIE zal je helpen met de meeste van die dingen (behalve tekstschaduw), of je zou de knoppen aan het spritesheet kunnen toevoegen (eigenlijk heb ik dat al voor je gedaan) en ze toepassen met een browserspecifieke stylesheet . Target IE8 en lager met een voorwaardelijke verklaring zoals die hieronder en moderne browsers zullen niet wijzer zijn.

Conclusie

Bedankt voor het volgende, ik hoop dat het u lukt om enkele nuttige ideeën te trekken uit wat u hebt gelezen. Ook een grote dank aan Remy voor het aanmelden van jPaginator als proefkonijn - denk eraan om zijn ontwikkeling te bekijken op GitHub!