Share
CSS-Sprites können die Leistung einer Website drastisch steigern, und mit jQuery können Sie problemlos großartige Übergangseffekte implementieren. Lass uns anfangen.
Sprites gehen auf die Anfänge von Videospielen zurück, wo sie als Optimierungstechnik für die Anzeige von 2D-Grafiken verwendet wurden. Bei einem CSS-Sprite handelt es sich um eine Technik, bei der Bilder zu einem einzelnen Master-Bild zusammengefasst werden und dann nur die erforderlichen Abschnitte mit CSS-Attributen (Breite, Höhe, Hintergrundposition usw.) angezeigt werden..
In diesem Lernprogramm erstellen wir ein von Dragon Interactive inspiriertes Navigationsmenü. Sie verfügen über ein hervorragendes Designkonzept und eine perfekte Verwendung von Highlights und Farben.
Beginnen Sie mit dem Erstellen eines neuen Photoshop-Dokuments, das 800 Pixel breit und 500 Pixel hoch ist.
Als Nächstes erstellen wir ein horizontales Lineal an der 70px-Marke, indem Sie Ansicht -> Neue Hilfslinie aufrufen. Dies wird unsere Menühöhe sein.
Jetzt erstellen wir ein Ordnermenü und darin einen Unterordner namens "Menütext".
Wählen Sie das Textwerkzeug aus (Tastenkombination: t) und legen Sie die folgenden Eigenschaften in der Zeichenwerkzeugpalette fest.
Andere Schriftarten können ebenfalls verwendet werden, aber diese Schriftfamilie eignet sich am besten für eingebetteten Texteffekt, den wir später geben werden. Wenn Sie diese Schriftart nicht haben, können Sie sie von der Website erhalten.
Erstellen Sie ein weiteres horizontales Lineal bei 40 Pixel, damit der Menütext horizontal ausgerichtet bleibt.
Wählen Sie nun den Menütextordner aus, und geben Sie die Menüwörter HOME, SERVICES, PORTFOLIO, ABOUT und CONTACT ein, wobei die Leerzeichen gleich bleiben. Es sollte jetzt so aussehen wie das Bild unten.
Erstellen Sie nun einen weiteren Ordner unter dem Menütextordner und nennen Sie ihn "Menühintergrund".
Als Nächstes erstellen wir eine neue Ebene im Ordner "Menühintergrund" und erstellen dann mit einem rechteckigen Auswahlwerkzeug eine Auswahl von 100 Pixel Breite und 70 Pixel Höhe.
Wählen Sie das Farbverlaufswerkzeug (Abkürzung: g) und legen Sie die Farbverläufe von # 555555 auf #adadae fest .
Zeichnen Sie nun einen Farbverlauf vom unteren Rand der Auswahl bis zum oberen Rand der Auswahl. geben Sie ihm dann einen Strich mit den folgenden Eigenschaften:
Der Strich wurde hinzugefügt, um unseren Menübereichen Tiefe zu verleihen.
Jetzt Um die hochpolierten Enden zu erreichen und die richtige Wirkung zu erzielen, wenn der Maus-Hover auftritt, werden wir ihm ein benachbartes Highlight geben.
Wählen Sie> Ändern> Vertrag und geben Sie 1 Pixel ein.
Wählen Sie das Brennwerkzeug aus und legen Sie die folgenden Eigenschaften fest:
Jetzt bewegen wir die Menüabteilung mit dem Verschiebungswerkzeug (Tastenkombination: v) um 1 Pixel nach rechts, um die linke Seite des Strichs anzuzeigen, die aufgrund ihrer Position nicht sichtbar war.
Erstellen Sie Kopien der obigen Ebene und passen Sie sie in Bezug auf den Menütext an.
So sieht das Menü aus, wenn wir die Position der Ebenen und des Menütexts entsprechend anpassen.
Um den typografischen Effekt einzubetten, fügen wir den Effekt "Schlagschatten" mit den folgenden Einstellungen zu unserem Text hinzu:
Jetzt ist es an der Zeit zu erstellen, wie das Menü während des Maus-Hover-Status aussieht. Erstellen Sie eine Kopie des Ordners "Menu Background" und benennen Sie ihn in "Menu Hover" um. Bewegen Sie dann mit dem Verschieben-Werkzeug den Ordner um 70 Pixel nach unten, sodass der obere Teil des neu erstellten Menüs die horizontale Hilfslinie berührt.
Der Grund, warum wir die Kopie des Menüordners erstellt haben, liegt darin, dass wir uns für die Positionierung des Menütexts interessieren. Wenn wir es manuell erstellt hätten, müssten wir uns um die exakte Ausrichtung des Menütextes kümmern, was umständlicher wäre.
Jetzt werden wir die Hintergrundebene des Servicemenüs aus dem Ordner "Menu Hover" auswählen und dem Hover-Status einen schönen eleganten Effekt verleihen. Erstellen Sie dazu zunächst eine Auswahl durch Drücken von Strg und klicken Sie auf die Ebene. Drücken Sie dann Löschen, um den aktuellen Farbton zu löschen. Nächster…
Wählen Sie den radialen Verlauf aus und zeichnen Sie eine Linie vom unteren Rand der Auswahl bis 30px über dem oberen Rand der Auswahl.
Unsere Arbeit ist noch nicht ganz fertig. Damit es sich weich anfühlt, müssen wir es noch etwas polieren. Um eine aufschlussreichere Menüaufteilung zu erstellen, werden die Kanten dunkler. Um dies zu erreichen, müssen wir die folgenden Effekte hinzufügen:
Wenden Sie einen ähnlichen Effekt für das Portfolio und für Menüs an. Ändern Sie für das Kontaktmenü die Verlaufsfarben in:
So sieht unser Menü jetzt aus:
Die Hauptmenüabteilung muss besonders behandelt werden. Wählen Sie die Ebene aus, indem Sie die Strg-Taste drücken und auf die Ebene klicken. Klicken Sie auf Löschen, um den aktuellen Farbton zu entfernen, und wählen Sie das Verlaufswerkzeug mit den folgenden Farben aus:
Wählen Sie diesmal einen linearen Farbverlauf aus und zeichnen Sie einen Farbverlauf vom oberen Rand der Auswahl bis zum unteren Rand der Auswahl.
Wählen Sie das Brennwerkzeug aus, wobei die restlichen Eigenschaften mit Ausnahme des Bereichs gleich bleiben. Setzen Sie den Wert auf Mitteltöne und wenden Sie Pinselstriche an den Rändern an, außer an der Oberseite.
Um nun den glasartigen Effekt zu erzeugen: Wählen Sie das Stiftwerkzeug, stellen Sie sicher, dass "Formfüllung" ausgewählt ist, zeichnen Sie die Form wie im Bild und setzen Sie den Mischmodus auf weiches Licht mit einer Deckkraft von etwa 40%..
Noch zwei Dinge, bevor wir mit dem Photoshop-Teil fertig sind.
Endlich sieht unser Sprite-Image so aus:
Jetzt kommt der Codierungsabschnitt, was ziemlich einfach ist. Erstellen Sie eine HTML-Datei und fügen Sie den folgenden Code hinzu:
Tolles Menü
Hier haben wir eine einfache HTML-Datei erstellt, die aus einer ungeordneten Liste besteht - unserer Navigationsleiste. Bevor wir fortfahren, werfen wir einen Blick auf einige Dateien, die wir jetzt importieren:
Erstellen Sie eine externe .js-Datei mit dem Namen sprite.js und fügen Sie den folgenden Code ein.
Accentsconagua
$ (function () $ ('# navigation li a'). anhängen (''); // Bereich, dessen Deckkraft animiert wird, wenn die Maus bewegt wird. $ ('# navigation li a'). hover (Funktion () $ ('. hover', this) .stop (). animate ('opacity': 1, 700, 'easeOutSine'), Funktion ( ) $ ('. hover', this) .stop (). animieren ('Deckkraft': 0, 700, 'easeOutQuad'))); Wenn das DOM geladen ist, fügen wir eine Spanne in unser Ankertag ein. Diese Spanne wird tatsächlich animieren. Anschließend verwenden wir die Hover-Funktion für das Ankertag und animieren die Deckkraft des Bereichs. Um eine weichere Animation zu erstellen, verwenden wir die Beschleunigungsgleichung. Ich verwende 'easeoutsine' und 'easeoutquad'; Gerne können Sie auch alternative Kombinationen ausprobieren, wenn Sie möchten.
Nun kommt der CSS-Teil. Erstellen Sie die style.css-Datei. Unten sehen Sie das erste Bild, wie das Menü aussieht. Im Moment sind es nur vier Punkte, weil wir es noch nicht gestaltet haben.
Zuerst richten wir die Liste aus.
Körper Hintergrund: # 000000; #navigation margin-left: 250px; #navigation li float: left;
Wir haben das Menü nur etwas in der Mitte verschoben.
Gestalten Sie das Anker-Tag Sein Hintergrund wird unser Sprite-Image sein.
#navigation li a Hintergrundbild: URL (images / sprite.jpg); Bildschirmsperre;
Der Anzeigestil muss auf Block gesetzt sein. Andernfalls wird nichts angezeigt.
Im nächsten Schritt geben wir jedem von ihnen die richtige Positionierung.
.home Hintergrundposition: 0px 0px; Breite: 102px; Höhe: 70px; .services Hintergrundposition: -102px 0px; Breite: 110px; Höhe: 70px .portfolio Hintergrundposition: -212px 0px; Breite: 108px; Höhe: 70px .about Hintergrundposition: -320px 0px; Breite: 102px; Höhe: 70px .contact Hintergrundposition: -422px 0px; Breite: 103px; Höhe: 70px
Hier haben wir die Hintergrundposition und die Breite jedes Ankertags festgelegt. Die Werte können variieren und es braucht etwas Zeit, um perfekt zu werden.
#navigation a .hover Hintergrund: URL (images / sprite.jpg) no-repeat; Bildschirmsperre; Deckkraft: 0; Position: relativ; oben: 0; links: 0; Höhe: 100%; Breite: 100%; #navigation a.home .hover Hintergrundposition: -0px -72px; #navigation a.services .hover Hintergrundposition: -102px -72px; #navigation a.portfolio .hover Hintergrundposition: -212px -72px; #navigation a.about .hover Hintergrundposition: -320px -72px; #navigation a.contact .hover Hintergrundposition: -422px -72px;
Jetzt definieren wir das CSS für die Spanne. Dies ist das gleiche Sprite-Bild, das oben verwendet wurde. Die Höhe und Breite sind zu 100% so gestaltet, dass sie den gesamten Ankerblock einnehmen. Der Hintergrund jedes Span-Tags wird angepasst und schließlich ist unsere Arbeit abgeschlossen.
Beachten Sie, dass es Zeit braucht, um die Position und Breite richtig einzustellen. Sie können mit etwas anderen Werten für diese Attribute enden - und das ist vollkommen in Ordnung!
Puh scheint viel Arbeit zu sein, aber es braucht Zeit, um sich aufzubauen. Hier finden Sie einige zusätzliche Ressourcen, die möglicherweise hilfreich sind.
