Extreme Makeover jPaginator CSS3 Edition

Das div "Paginierung" ist unser Ziel, hier wird unser jPaginator hinzugefügt. Das div-Element vor "Paginierung" ist nicht entscheidend, aber wir werden es verwenden, um die Paginierung zu veranschaulichen, die tatsächlich etwas tut, indem der Inhalt jedes Mal geändert wird, wenn eine Schaltfläche angeklickt wird.

Erwähnenswert sind auch die Kontrollschaltflächen, zwei Links auf beiden Seiten des "paginator_p_wrap", mit denen wir unsere Paginierung steuern. Diese sind völlig optional - wir weisen ihnen eine Rolle in den Parametern zu, wenn wir jPaginator aufrufen. Zum Schluss fügen wir das Markup für den Slider hinzu.

Das Ganze ist dann in einem "Container" -Div verpackt, um uns die Anzeige der Dinge zu erleichtern.

Jetzt müssen wir jPaginator innerhalb von aufrufen :

Hier können Sie jPaginator sehen, der auf unsere div "Paginierung" angewendet wird, mit nur wenigen der vielen Parameter, die uns zur Verfügung stehen. Wir haben die Anzahl der Seiten auf 64, den Rand um jeden Link auf 5px und die Länge (jedoch sind viele Links sichtbar) auf 8 gesetzt. Im Folgenden werden die 4 Steuerelemente aufgelistet, die wir unserer Markup hinzugefügt haben. Ich mache tatsächlich etwas. Zum Schluss noch eine Funktion (von Remy bereitgestellt), um den Inhalt unserer Div-Seite zu ändern, wenn wir darauf klicken.

Nachdem Sie die Schritte bis jetzt abgeschlossen haben, sollte das Ganze in seiner grundlegendsten Form funktionieren.

Schritt 4: Lassen Sie die Spiele beginnen

Um unsere Elemente präzise zu gestalten, sollten wir zuerst sicherstellen, dass wir wissen, wie groß alles ist. Schauen wir uns die verschiedenen Dimensionen unseres Designs an:

Zusammenfassend haben wir die Paginierungs-Schaltflächen (sie sind keine Schaltflächenelemente, werden aber von diesem Punkt an als Schaltflächen bezeichnet), nämlich 30x30px, der Container (einschließlich Hervorhebungen und Schatten), der 110px hoch ist, und das Navi Links, die 40px breit sind.

Lassen Sie uns darauf eingehen?

Schritt 5: Stylesheet

Die Schaltflächen für unsere Paginierung werden dynamisch erstellt. Wenn Sie das auskommentierte Beispiel gelöscht haben, müssen Sie Firebug oder einen anderen Browser-Inspector verwenden, um zu sehen, wie alles zusammengefügt wird.

Nachdem wir festgestellt haben, dass unsere Buttons tatsächlich Divs mit einer Klasse von "paginator_p" sind, wissen wir zumindest, was wir gestalten werden. Wir können auch sehen, dass diesen Elementen viele Inline-Styles von jPaginator hinzugefügt werden, obwohl sie alle das Layout und nicht die Ästhetik bestimmen.

Fügen wir einige Regeln in unser Stylesheet ein, um den Ball ins Rollen zu bringen?

body hintergrund: url (img / bg.png) # 242424;  #container padding: 20px; Breite: 480px; Marge: 100px auto 0 auto; Schriftfamilie: Arial, serifenlos;  .paginator_p height: 30px; Breite: 30px; Zeilenhöhe: 30px; Text ausrichten: Mitte; Schriftgröße: 13px; Schriftdicke: fett; Farbe: # 26430c; 

Ein solider Start. Bevor wir mit den Buttons herumspielen, legen wir ein Hintergrundbild für den Körper fest und fügen unserem "Container" -Div ein wenig Stil hinzu. Wir haben festgelegt, dass unsere Schaltflächen 30x30px sein sollen, wir haben die Zeilenhöhe innerhalb der Schaltflächen so eingestellt, dass sie übereinstimmen (wodurch unsere Zahlen mehr oder weniger vertikal zentriert werden), und wir haben eine Textausrichtung angewendet: Mitte die horizontale Ausrichtung der Zahlen. Wir haben also schöne rechteckige Knöpfe mit perfekt zentrierten Zahlen. Dann mästen wir den Text auf und bemalen ihn nach unserem Design.

Schritt 6: Schöne Farben

Lassen Sie uns nun den richtigen Hintergrund auf unsere Schaltflächen anwenden. Wir verwenden CSS3-Farbverläufe, mit denen wir von allen modernen Browsern - sogar IE10 - versorgt werden. Um dies zu gewährleisten, verfügen wir über ein Farb- und ein Farbverlaufs-Fallback für nicht kooperative Browser. Wir fügen dem Text innerhalb unserer Schaltfläche auch einen subtilen Schlagschatten hinzu, wie durch unser Design vorgegeben.

 / * 1px Rechts- und Abwärtsversatz, keine Unschärfe und Offwhite * / Text-Schatten: 1px 1px 0px # 5a8332; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / Hintergrundfarbe: # 4A821B; Hintergrundbild: URL (img / sprite.png) no-repeat 0 0; / * image Fallback für keine unterstützenden Browser * / background-image: -webkit-gradient (linear, links oben, links unten, von (# 4a821b) bis (# 243f0d)); / * Saf4 +, Chrome * / Hintergrundbild: -webkit-linearer Gradient (oben, # 4a821b, # 243f0d); / * Chrome 10+, Saf5.1 + * / Hintergrundbild: -moz-linearer Gradient (oben, # 4a821b, # 243f0d); / * FF3.6 * / Hintergrundbild: -ms-linearer Gradient (oben, # 4a821b, # 243f0d); / * IE10 * / Hintergrundbild: -o-linearer Gradient (oben, # 4a821b, # 243f0d); / * Opera 11.10+ * / Hintergrundbild: linearer Gradient (oben, # 4a821b, # 243f0d);

Hinweis: Wenn Sie 5 Minuten haben, schauen Sie sich bitte die CSS3 von Paul Irish an! Weitere Informationen zu CSS3 und unterstützenden Browsern.

Schritt 7: Der Kreis des Lebens

Wir haben bereits angegeben, dass es sich bei unseren Links um 30px-Quadrate handelt. Wenn Sie also abgerundete Ecken von 15px hinzufügen, erhalten Sie perfekte Kreise. Los geht's dann?

 / * Rahmenradius halbe Breite und Höhe unserer Links zum Erstellen eines Kreises * / -moz-Rahmenradius: 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+ */

Schritt 8: Pop!

Wir haben nur ein paar kleine Details entfernt von Schaltflächen wie denen in .psd. Fügen Sie einen Feldschatten hinzu, um unser Element zu erstellen Pop. Tatsächlich fügen wir zwei hinzu.

Wir geben jedem Link einen dunklen Schatten und wirken so wie ein dunkler Schein um den Kreis. Sie werden 1px vom Kreis entfernt und dann weitere 4px verwischt. Ich habe die Farbe genau festgelegt (dank des Dropper-Tools in Photoshop), aber wir hätten hier auch einen rgb-Wert mit Deckkraft verwenden können.

Nachdem wir unseren ersten Boxschatten aufgetragen haben, können wir jetzt einen zweiten (ich muss Liebe Boxschatten) anwenden, um unser Highlight-Glow-Ding zu sein. Der zweite Satz von Werten wird durch "Einfügung" vorangestellt, wodurch das Leuchten nach innen gezwungen wird. Keine Unschärfe, kein Versatz der x-Achse, aber um 1 Pixel nach unten versetzt, sodass der Schein nur die Oberseite unserer Kreise übersteigt.

 / * Box-Schatten - kein Versatz, aber eine Unschärfe von 4px und eine Ausbreitung von 1px * / / * plus ein zusätzlicher Box-Schatten, um das Leuchten zu erzeugen * / -moz-box-shadow: 0 0 4px 1px # 191919, Einschub 0 1px 0 # 7ead42; / * FF3.5 + * / -webkit-box-shadow: 0 0 4px 1px # 191919, Einfügung 0 1px 0 # 7ead42; / * Saf3.0 +, Chrome * / Box-Schatten: 0 0 4px 1px # 191919, Einschub 0 1px 0 # 7ead42; / * Opera 10.5, IE9, Chrome 10+ * /

So sieht die resultierende css für unser "paginator_p" div aus:

.paginator_p height: 30px; Breite: 30px; Zeilenhöhe: 30px; Text ausrichten: Mitte; Schriftgröße: 13px; Schriftdicke: fett; Farbe: # 26430c; / * 1px Rechts- und Abwärtsversatz, keine Unschärfe und Offwhite * / Text-Schatten: 1px 1px 0px # 5a8332; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / Hintergrundfarbe: # 4A821B; Hintergrundbild: URL (img / sprite.png) no-repeat 0 0; / * image Fallback für keine unterstützenden Browser * / background-image: -webkit-gradient (linear, links oben, links unten, von (# 4a821b) bis (# 243f0d)); / * Saf4 +, Chrome * / Hintergrundbild: -webkit-linearer Gradient (oben, # 4a821b, # 243f0d); / * Chrome 10+, Saf5.1 + * / Hintergrundbild: -moz-linearer Gradient (oben, # 4a821b, # 243f0d); / * FF3.6 * / Hintergrundbild: -ms-linearer Gradient (oben, # 4a821b, # 243f0d); / * IE10 * / Hintergrundbild: -o-linearer Gradient (oben, # 4a821b, # 243f0d); / * Opera 11.10+ * / Hintergrundbild: linearer Gradient (oben, # 4a821b, # 243f0d); / * Rahmenradius halbe Breite und Höhe unserer Links zum Erstellen eines Kreises * / -moz-Rahmenradius: 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+ */ 

Schritt 9: Meilenstein Nr. 1

In diesem Fall haben wir unsere Links in ihrem Standardzustand - sie sehen gut aus! Jetzt müssen wir den Elementen um die Links ein wenig mehr Raum zum Atmen geben:

/ * container für die Schaltflächen - fügen Sie etwas Abstand hinzu, damit wir den Schlagschatten sehen können * / .paginator_p_bloc padding: 5px 0; 

Der "paginator_p_bloc" ist das übergeordnete Element aller unserer Schaltflächen und benötigt ein wenig Polsterung (oben und unten), um den Schlagschatten zu berücksichtigen, den wir um sie gelegt haben. Was Sie jetzt haben, sollte wie unser erster Meilenstein aussehen.

Schritt 10: Schwebeflugzustand

Lass uns einen schönen Hover-Status auf unsere Buttons anwenden, genauso wie wir es in .psd gemacht haben.

.paginator_p: hover Farbe: # 0d1804; / * 1px Rechts- und Abwärtsversatz, keine Unschärfe und blasses Grün * / Text-Schatten: 1px 1px 0px # 8dc953; Hintergrundfarbe: # 87D445; Hintergrundbild: URL (img / sprite.png) no-repeat -120px 0; / * image Fallback für keine unterstützenden Browser * / background-image: -webkit-gradient (linear, links oben, links unten, von (# 87d445) bis (# 589225)); / * Saf4 +, Chrome * / Hintergrundbild: -webkit-linearer Farbverlauf (oben, # 87d445, # 589225); / * Chrome 10+, Saf5.1 + * / Hintergrundbild: -moz-linearer Gradient (oben, # 87d445, # 589225); / * FF3.6 * / Hintergrundbild: -ms-linearer Farbverlauf (oben, # 87d445, # 589225); / * IE10 * / Hintergrundbild: -o-linearer Farbverlauf (oben, # 87d445, # 589225); / * Opera 11.10+ * / Hintergrundbild: linearer Farbverlauf (oben, # 87d445, # 589225); / * Box-Schatten - kein Versatz, aber eine Unschärfe von 2px und eine Ausbreitung von 1px * / / * plus ein zusätzlicher Box-Schatten zum Erzeugen des Glühens - etwas heller als normaler Zustand * / -moz-box-shadow: 0 0 4px 1px # 191919, Einschub 0 1px 0 # cff3a2; / * FF3.5 + * / -webkit-box-shadow: 0 0 4px 1px # 191919, Einfügung 0 1px 0 # cff3a2; / * Saf3.0 +, Chrome * / Box-Schatten: 0 0 4px 1px # 191919, Einschub 0 1px 0 # cff3a2; / * Opera 10.5, IE9, Chrome 10+ * /

Was haben wir hier gemacht? Nun, wir haben die Farbe der Zahlen dunkler gemacht und ihnen einen blassen Schatten gegeben. Wir haben die Werte des Hintergrundverlaufs geändert (um die Dinge aufzuhellen), und wir haben den hervorgehobenen Schattenrahmen am oberen Rand der Links subtil geändert. Der dunkle Glow-Drop-Schatten bleibt derselbe, aber wir müssen ihn erneut deklarieren, wenn er nicht ignoriert werden soll.

Schritt 11: Ausgewählter Zustand (Meilenstein Nr. 2)

Wir wurden freundlich mit einer ausgewählten Klasse ausgestattet, so dass wir den Stil so gestalten, als ob der Knopf gedrückt wurde (was bedeutet, dass er nach innen gedrückt wurde; er sitzt nicht im Badezimmer und schaukelt in einen Topf Erdnussbutter) ).

/ * Status für ausgewähltes Feld sowie Hover, wenn ausgewählt. Dies kann vor oder nach dem allgemeinen Hover-Status aufgrund überragender Spezifität erfolgen. * / .Paginator_p.selected, .paginator_p.selected: hover color: # 0d1804; / * 1px Rechts- und Abwärtsversatz, keine Unschärfe und blasses Grün * / Text-Schatten: 1px 1px 0px # 8dc953; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / Hintergrundfarbe: # 589225; Hintergrundbild: URL (img / sprite.png) no-repeat -80px 0; / * image Fallback für keine unterstützenden Browser * / background-image: -webkit-gradient (linear, links oben, links unten, von (# 589225) bis (# 87D445)); / * Saf4 +, Chrome * / Hintergrundbild: -webkit-linearer Farbverlauf (oben, # 589225, # 87D445); / * Chrome 10+, Saf5.1 + * / Hintergrundbild: -moz-linearer Gradient (oben, # 589225, # 87D445); / * FF3.6 * / Hintergrundbild: -ms-linearer Gradient (oben, # 589225, # 87D445); / * IE10 * / Hintergrundbild: -o-linearer Gradient (oben, # 589225, # 87D445); / * Opera 11.10+ * / Hintergrundbild: linearer Farbverlauf (oben, # 589225, # 87D445); / * Box-Schatten - kein Versatz, aber eine Unschärfe von 2px und eine Ausbreitung von 1px * / / * plus ein zusätzlicher Box-Schatten, um den Schein zu erzeugen - etwas heller als im Normalzustand * / -moz-box-shadow: 0 0 2px 1px # 191919, Einschub 0 1px 0 # cff3a2; / * FF3.5 + * / -webkit-box-shadow: 0 0 2px 1px # 191919, Einschub 0 1px 0 # cff3a2; / * Saf3.0 +, Chrome * / Box-Schatten: 0 0 2px 1px # 191919, Einschub 0 1px 0 # cff3a2; / * Opera 10.5, IE9, Chrome 10+ * /

Wir haben ein hinzugefügt ausgewählt: hover Zustand, so dass sich die Schaltfläche nicht ändert, wenn Sie mit der Maus darüber fahren. Was haben wir sonst noch hier gemacht? Wir haben die Farbe und den Textschatten erneut geändert, den Verlauf umgedreht, um ein konkaves Gefühl zu erzeugen, und das dunkle Glühen reduziert (was darauf hindeutet, dass es nicht mehr so ​​stark hervorsteht). Einfach. Was Sie jetzt haben, sollte wie unser zweiter Meilenstein aussehen

Schritt 12: Der Slider

Nachdem wir die Knöpfe sortiert haben, wenden wir uns dem Schieberegler zu. Es ist relativ unkompliziert; Wir müssen die Ränder ändern, um einen korrekten Abstand zu erhalten, einen Hintergrund zu geben und die richtige Höhe festzulegen. Es muss laut unserem Design 10px hoch sein, also geben wir ihm 8px Höhe plus eine 1px-Umrandung, um es auszufüllen. Wir geben den oberen und linken Rändern eine dunkle Farbe, dann die unteren und rechten Ränder eine blasse Farbe, um den Eindruck eines Reliefs zu vermitteln.

Zum Schluss die Ecken an beiden Enden umrunden - wir haben jetzt selbst eine schöne Gleitschiene.

/ * der Schieberegler * / .paginator_slider / * Rand links drückt ihn an den Nav-Schaltflächen vorbei, so dass der Abstand die Gesamtbreite einschließlich der Ränder der Nav-Schaltflächen ist * / margin: 20px 0 20px 80px; / * mit einer Höhe von 8px und einem Rand von 1px rundherum beträgt unsere Höhe 10px * / height: 8px; Hintergrund: # 181818; Grenze: 1px fest # 393939; Rahmenfarbe: # 0f0f0f; Rahmenfarbe links: # 0f0f0f; / * Randradius für ff, safari + chrome, css3 * / / * halbe Gesamthöhe unseres Elements, um abgerundete Enden zu erzeugen * / -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+ */ 

Schritt 13: Der Knopf

Ja knopf. Es schien zu der Zeit ein guter Name zu sein, aber ich glaube, ich hätte mit "Griff" bleiben können. Wie auch immer, lassen Sie uns etwas hinzufügen, das Sie anklicken und entlang der Schieberegler ziehen?

/ * der Schieberegler, ähm, Knopf? * / .paginator_slider .ui-slider-handle height: 20px; Breite: 20px; Rand links: -10px; / * schiebt den Regler nach links, halb so breit * / / * Umriss in ff entfernen * / Umriss: keine; / * border radius für ff, safari + chrome, css3 * / / * halbe Breite und Höhe des Knopfes zum Erstellen eines Kreises * / -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+ */ 

Der Großteil dieses Stylings wird bekannt sein, da er auf dem Standardzustand unserer Schaltflächen basiert. die vordefinierte Breite und Höhe, der Hintergrund mit Farbverlauf, die abgerundeten Ecken und die verschiedenen Box-Schatten.

Die einzigen anderen nennenswerten Regeln sind Umriss: keine Dadurch wird die gepunktete Umrisslinie in Firefox, die y-Achsenposition entfernt, um zu ändern, wo sich der Knopf vertikal auf der Schieberegler-Schiene befindet, und die Rand links: -10px; wodurch der Knopf genau die Hälfte seiner Breite bewegt. Schauen Sie sich das Bild unten an, um herauszufinden, warum:

Wir machen Fortschritte, prüfen Sie unseren dritten Meilenstein.

Schritt 14: Kontrollen

Lassen Sie uns die Steuerelemente auf beiden Seiten des Paginierungsbehälters aufräumen.

Der Einfachheit halber verwenden wir Bilder, also springen Sie zurück in Photoshop, um ein Sprite-Sheet für die Verknüpfungssymbole vorzubereiten. Ich habe bereits damit begonnen, ein Spritesheet mit den Fallback-Farbverläufen zu erstellen. Ich füge das einfach hinzu und platziere alles logisch für die Referenzierung im CSS. Wenn Sie alles zufällig in Ihr Spritesheet einfügen, können Sie Ihre Bilder dank Services wie Sprite Cow immer finden.

Jeder Symbolstatus ist 40x40px, und wir werden die Schwebeflugzustände vertikal ablehnen. Wie Sie dem folgenden Styling entnehmen können, handelt es sich bei jeder Schaltfläche um einen 40x40px-Block, in den das entsprechende Bild eingefügt wird, je nach Position und Status. Die CSS ist kommentiert, also halte ich jetzt den Mund.

/ * beschäftigen wir uns mit den Steuertasten * / / * allgemeinen Stilen für Steuerelemente * / .control float: left; Breite: 40px; Höhe: 40px; Marge: 35px 0 0 0; Position: relativ; / * Sie werden sehen, warum in einem Bit * / Cursor: Zeiger;  #max_backward background: URL (img / sprite.png) no-repeat 0 -60px;  #over_backward background: URL (img / sprite.png) no-repeat -40px -60px;  #over_forward background: URL (img / sprite.png) keine Wiederholung -80px -60px;  #max_forward background: url (img / sprite.png) keine Wiederholung -120px -60px;  / * hovers * / #max_backward: hover hintergrund: url (img / sprite.png) no-repeat 0 -100px;  #over_backward: hover Hintergrund: URL (img / sprite.png) no-repeat -40px -100px;  #over_forward: hover Hintergrund: URL (img / sprite.png) no-repeat -80px -100px;  #max_forward: hover Hintergrund: URL (img / sprite.png) no-repeat -120px -100px; 

Sehr gut, sehen Sie sich an, was bisher in Meilenstein Nr. 4 getan wurde.

Schritt 15: Sinkendes Gefühl

Es gibt wirklich nur ein paar Details, um die wir uns kümmern müssen. Unsere Schaltflächen sind zu hoch und sie verschwinden im Nichts, wenn sie an den Rand des übergeordneten Containers stoßen, was etwas matt ist. Unser Design berücksichtigt dies, indem wir vorschlagen, dass sie unter einem Schlitz im Hintergrund stecken. Sehen wir uns also an, ob wir das in den Browser übersetzen können.

Schauen Sie sich das Bild unten an. Darin sehen Sie, dass wir vier Bilder benötigen, um mit den Highlights und Schatten umzugehen. Die Hervorhebungen gehören neben den Steuerelementen auf beiden Seiten des Containers, die Schatten gehören in den Container selbst, also müssen wir ihn auf 110px hoch machen.

Lassen Sie uns zuerst die Polsterung unseres Containerelements berücksichtigen (erhöhen):

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

Nachdem dies geschehen ist, wurde unsere Paginierung in ihre rechtmäßige Position gedrückt.

Schritt 16: Nip and Tuck

OK, lass uns diese Schatten einfügen (ich habe sie wieder zum Sprite-Sheet hinzugefügt):

.paginator_p_wrap margin: 0; Polsterung: 35px 0; / * mehrere Hintergrundbilder, eines für das linke, eines für das rechte * / Hintergrund: URL (img / shadow_sprite.png) links -220px no-repeat, URL (img / shadow_sprite.png) rechts -330px no-repeat

? und jetzt behandeln wir die Highlights mit der :nach dem Selektor (wird in allen gängigen Browsern unterstützt)

/ * Highlights * / #over_backward: after content: "; background: url (img / sprite.png) -40px -140px no-repeat; Anzeige: Block; Höhe: 110px; Breite: 30px; / * Positionieren Sie die Hervorhebung um unbeholfene vererbte Flossen und Ränder von .control * / position: absolut; rechts: 0px; oben: -35px; #over_forward: after content: "; Hintergrund: URL (img / sprite.png) -80px -140px no-repeat; Bildschirmsperre; Höhe: 110px; Breite: 30px; / * positioniere die Hervorhebung aufgrund unbeholfener geerbter Floats und Margen von .control * / position: absolut; links: 0px; oben: -35px; 

Der: after-Selektor erzeugt effektiv ein Objekt auf unserer Seite. Wir können dieses Element dann wie jedes andere Element bearbeiten, wobei zu berücksichtigen ist, dass es Eigenschaften von seinem übergeordneten Element erbt. In unserem Fall haben wir uns aufgrund der umfangreichen Gestaltung des übergeordneten Objekts für die absolute Positionierung entschieden, um zu bestimmen, wo die Hervorhebung erscheint.

Einige zusätzliche Stile, um den Seiteninhalt aufzuräumen, dann sind wir fertig.

Ausgezeichnet! Wir haben Meilenstein Nr. 5 erreicht, die Ziellinie, wenn Sie nicht auf ältere Browser abzielen möchten.

Schritt 17: Rückwärtskompatibilität

Ich werde das dir überlassen. Die Techniken, die wir praktiziert haben, waren genau das; Techniken zum Üben und ich habe die Browserkompatibilität in der Einführung aufgeführt. Wenn Sie jedoch noch weiter gehen möchten und sicherstellen möchten, dass in älteren Browsern alles in Ordnung ist, haben Sie einige Möglichkeiten. Wir haben sichergestellt, dass unsere Farbverläufe durch die Aufnahme von Fallback-Bildern in das Sprite-Sheet abgedeckt wurden. Das Fixieren mehrerer Hintergrundbilder, Box-Schatten, Text-Schatten und Randradien ist jedoch nicht ganz so einfach.

Die Verwendung von CSS3PIE hilft Ihnen bei den meisten dieser Dinge (außer Textschatten), oder Sie können die Schaltflächen zum Spritesheet hinzufügen (eigentlich habe ich das bereits für Sie gemacht) und sie mithilfe eines browserspezifischen Stylesheets anwenden . Ziel IE8 und niedriger mit einer bedingten Anweisung wie der folgenden und modernen Browsern wird es nicht klug sein.

Fazit

Vielen Dank, dass Sie mitverfolgen und ich hoffe, dass Sie einige nützliche Ideen aus dem, was Sie gelesen haben, finden. Vielen Dank auch an Remy für die ehrenamtliche Arbeit von jPaginator als Versuchskaninchen. Vergessen Sie nicht, seine Entwicklung bei GitHub zu überprüfen!