Cookie

Vorsicht


Dieser Artikel wurde mehr als vor einem Jahr veröffentlicht, Es gab Entwicklungen können.
Bitte berücksichtigen Sie dies.

In der heutigen Tutorial sprechen wir wieder über HTML Grafiken und CSS Integration. In meinem Artikel vor ein paar Monaten sprach ich über die technische (auch weithin von Google) von CSS Sprites. In der Praxis ist es die am häufigsten wiederholten Bilder auf der Seite zu platzieren ein großes Bild, das wird mehrfach mit unseren CSS genannt werden.

Als eine Angelegenheit der persönlichen Präferenz Ich neige zu vermeiden, mit Gimp jedes Mal, wenn ich einen anderen Menüpunkt Navigation erstellen, Ich bevorzuge es, nur die Hintergründe der Buttons erstellen und dann darüber nachdenken, die Stile mit CSS. Auf diese Weise wird das erste Menü besser von Suchmaschinen indiziert, zweitens ich vermeiden “Abfall” die Zeit, um mich auf jede Schaltfläche ein neues Bild.

Das von CSS-Sprites ist eine Technik gut etabliert, dass nicht nur Geschwindigkeiten bis Seite laden, erhöht aber die Kompatibilität auf verschiedenen Browsern.

Heute sehen wir, wie ein einfacher erstellen, Wie attraktiv Navigationsmenü Mit dieser Technik. Was folgt, ist das Ergebnis.

Wir beginnen mit der Erstellung der “Skelett” von unserer Speisekarte in einer HTML-Seite.

<html>
  <Leiter>
  <Link href ="style.css" rel ="Stylesheet" type ="text / css" />
  </Leiter>
  <Körper>
    <div>
    <a href ="#" class ="Schaltfläche">Info</a>
    <a href ="#" class ="Schaltfläche">Über uns</a>
    <a href ="#" class ="Schaltfläche">Kontaktieren Sie uns ...</a>
    </div>
  </Körper>
</html>

Wie Sie sehen können Ich habe bereits eine CSS-Datei namens als externe “style.css“.

Jetzt können wir den Hintergrund für unseren Button. Die folgende (die in lato) Das habe ich angenommen, der größere 550%. Die tatsächlichen Größen sind 2px di larghezza x 56px Höhe. Obwohl es nicht leicht zu bemerken ist eine Datei, vertikal in zwei Hälften geteilt; die obere wird derjenige sein, normalerweise sichtbar, desto geringer ist sein geladen bei Mouseover. Sowohl für die Hälfte habe ich einen Farbverlauf mit verschiedenen Farben, aber wir sehen jetzt besser.

Einmal erstellt unsere “Sprite” wir werden ihn in der CSS-Rückruf.

a.button {
	schweben: links;
	Höhe:20px;
	padding: 5Pixel 10px;
	Grenze: 1px solid # c96111;
	Hintergrund: #e2721b url(Bilder / button_sprites.png) repeat-x 0 0;	
	text-decoration: keine;
	font-size: 15px;
	font-weight: fett;
	font-family:'Hoefler Text',Constantia,Cambria,Georgia,serif;
	line-height: 20px;	
	Farbe: #fff;	
}
a.button:schweben {
	Grenze: 1px solid # 2f4c13;
	Hintergrund: #4a781d url(Bilder / button_sprites.png) repeat-x 0 -30px;
}

Die Linien, die wir daran interessiert, das sind #6 e la #16: die voci “Hintergrund”. Wie Sie sehen können die Bilddatei wird als nur ein: “button_sprites.png” mit verschiedenen Koordinaten. Ich habe die Wiederholung in horizontalen und einem Hintergrund in beiden Fällen.

Der Rest der Anweisung tut nichts anderes als eine Grenze addieren eine dunklere Pixel je nachdem, ob die Maus über die Schaltfläche oder anderswo. Ich habe auch Schriftgröße und spezifischen.

Das Ergebnis ist einfach, aber attraktiv, mit einem Hauch von glänzend.

Zu wenig?


TheJoe

Ich halte diesen Blog als ein Hobby von 2009. Ich bin begeistert von Grafik, Technologie, Open Source Software. Unter meinen Artikel wird nicht schwierig sein, über die Musik finden, und einige persönliche Reflexionen, aber ich bevorzuge die direkte Linie des Blogs vor allem auf Technologie. Weitere Informationen Kontaktieren Sie mich.

4 Kommentare

Apache 72 · 13 August 2012 um 10:11 AM

Ich tun wollte, zu beschleunigen, eine kleine’ die Website, die Bilder sind nicht so viele, wie es scheint, das Problem ist, dass ich keinen Abschnitt mit der ID "container" sie.
Also, bevor Sie stoßen Sie fragen, ob Sie überhaupt tun können
Dank!

    TheJoe · 13 August 2012 um 10:58 AM

    Um in der Lage sein zu tun, was Sie tun können, aber wenn Sie nicht wissen, was ein “id” vielleicht ist es besser, dass Sie vor ein bisschen üben ". 😉

    Allerdings sollten Sie ein Auge auf diesem Blog halten, wahrscheinlich in der nächsten Artikel werde ich veröffentlichen eine kurze Anleitung, die auf jeden Fall beeinflussen.

Apache 72 · 13 August 2012 um 7:57 AM

Früher habe ich css Generator und bekam die Codes für ein einzelnes Bild CSS spriter.
Wie kann ich jetzt setzen sie auf die Website?
Ich hochgeladen das neue Bild von spriter in css erhalten …/miotema / images, wobei es auch andere.
jetzt im Stylesheet css generator sagt mir zu geben

#Behälter li { Hintergrund: url(csg-50289151dcb6a.png) no-repeat oben links; }

und CSS-Regeln für Bilder.

die Frage,:
in meinem css Blatt, gibt es mehrere Abschnitte, die verschiedenen Hintergrundbildern adressieren (Ich habe zusammengebaut), auf separaten Zeilen und nicht in einem richicamo , dann, wie soll ich tun?

    TheJoe · 13 August 2012 um 8:44 AM

    Ich sehe, dass das Thema der Website (wenn dies die Website, die Sie im Zusammenhang) ist sehr komplex, kann lang und frustrierend improvisieren Designer mit einem Thema so kompliziert. Nachdem dies gesagt ist,, wenn Sie wirklich wollen, um Ihre Hand versuchen, wir gehen zu üben.

    Ich mag es nicht Lösungen wie automatische Generatoren, Allerdings sind die Regeln für die Aufnahme eines Sprite immer das gleiche.

    0_ (wahlfrei) erstellen Sie eine Sicherungskopie, bevor Sie beginnen. Es könnte Ihr Leben retten,
    1_ Laden Sie die Bilder im Verzeichnis… genau der Bilder,
    2_ Laden Sie die neue css in das Root-Verzeichnis des… Gerade die css,
    3_ Prüfen Sie, ob die css, um Bilder und nicht absolute Pfade verweisen,
    4_ Fügen Sie die neuen CSS-Abschnitt “Leiter” Website,
    5_ Überprüfen Sie, dass es keine Hinweise in der verschiedene CSS nicht miteinander in Konflikt geraten,
    6_ Legen Sie alles online.

    In Ihrem Fall, stellen Sie sicher, einen Abschnitt mit id “Behälter” das in seinem Inneren eine Liste “li”. Nur auf diese Weise arbeiten können CSS-Regel. Wenn es Konflikte gibt, dann müssen Sie ordnen ein “id” oder “Klassenzimmer” verschieden bei jedem jeweiligen Marken. Das klingt einfach,, aber die meiste Zeit ist eine lange Arbeit, dass die ersten paar Mal auch mit einem erheblichen Zeitverlust. Ich schlage vor, Sie bekommen Hilfe von jemandem, wie man mit css arbeiten kennt, oder zu geben, so viel Zeit wie möglich, denn das Problem kann nicht mit einem Kommentar zu dem Artikel gelöst werden. 🙂

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.