Cookie

Vorsicht


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

Lassen Sie uns darüber reden CSS. Heute sehen wir eine Technik, immer wurde für empfohlene aufzuhellen Seiten und schnellere Ladezeiten (nicht umsonst seit Jahren auf der Homepage verwendet worden Google).

Kurz gesagt ist es die meisten der Navigationselemente auf der Seite sind innerhalb eine einzelne Bilddatei, dann erinnern oft wie viel wird aufgefordert Seite wodurch das Hochladen von mehreren Bildern unterschiedlich.

Obwohl technisch die zeitliche Lücke sehr klein (sind wir auf dem Gebiet der Cent, ist der Name Tausendstel zweiten) die Differenz ist ersichtlich,, und auch vom ästhetischen Standpunkt aus geladenen Bilder werden auf einmal ein Eindruck von größerer Geschwindigkeit.

Wir sehen zum Beispiel das Bild, das Google in seiner Forschung verwendet:

L'immagine usata da Google

Der von Google verwendete Bild

Jemand hat schon einige erkannt Elemente ständig in die Suchseite aufgerufen, wie das Logo, die “Die” wiederholt am Ende der Seite, Richtungspfeile anzeigt, vorherigen und nächsten Seite, das Favicon, le setzt für die Auswertung der Ergebnisse, und ich werde hier aufhören.

Für die Aufnahme des Bildes innerhalb der Google-Seite verwendet teil Javascript und zum Teil i CSS. Ich werde nicht auf die Prinzipien, die hinter dieser Wahl erarbeiten, Es genügt zu sagen, dass die Menge von Anfragen jeden Tag, Google zu tun hat, ist so breit, dass selbst eine geringfügige Optimierung der Seite entspricht eine erhebliche Einsparung (wirtschaftlich und ökologisch) Google für sich selbst und für uns alle.

Abgesehen von der Javascript jetzt lassen Sie uns die Schritte analysieren, weil die Wirkung zurückgegeben nur mit HTML und CSS. Fangen wir mit etwas einfachem beginnen: die nächste Taste ist aus zwei Bildern gebildet. Die Schritte, die wir sehen werden dabei helfen, die’Rollover-Effekt Bewegen Sie den Mauszeiger mit ein Bild. Die Gesamtbildgröße 343 pixel di larghezza x 212 pixel Höhe: ist sehr groß für eine Schaltfläche, dies ist jedoch lediglich ein Beispiel.

Wir beginnen zu sehen, wie HTML-Format.

<a id ="kontaktieren Sie uns" href ="#" title ="kontaktieren Sie uns"><Spannweite>Kontakt</Spannweite></a>

Dadurch wird die HTML-Linie sein, die auf den Button auf der Seite zeigen. beachten Sie die’Eigenschaft ID” der Stil, von denen dann geändert werden mit dem CSS. Und’ leicht zu bemerken, dass die Linie oben tatsächlich enthält keine Links zu Bild, ist einfach un Link testuale: Kontakt“.

Und jetzt wollen wir mal sehen, wie stellen Sie die CSS auf unseren Link in eine Transformation Button mit Rollover-Effekt Maus:

#kontaktieren Sie uns{
  Anzeige: blockieren;
  Breite: 343px;
  Höhe: 106px;
  Hintergrund: url("img / bottone.png") no-repeat 0 0;
}

#kontaktieren Sie uns:schweben{
  background-position: 0 -106px;
}

#Kontakt Spanne{
  Anzeige: keine;
}

Auge ziehen das richtige Bild. Ich habe in dem Verzeichnis abgelegt “img“. Der Knopf ist sehr groß, wie einfach es ist zu beachten, Die Breite ist die anfängliche Bild (width: 343px;), während die Höhe ist genau die Hälfte (height: 106px;). In dem Fall, dass die Maus nicht geht auf den Knopf angezeigt die obere Hälfte Schaltfläche (und empfängt 106 pixel), während, wenn wir sehen, Die zweite Regel die Stimme “background-position” können wir sehen, ein negativen Wert -106px“. Diese Regel wird die Taste an der Oberseite 106px platzieren, in der Tat macht uns nur sehen Die zweite Hälfte des Bildes in der gleichen Position die er vor der.

Die dritte Regel ist einfach Text verbergen Kontakt“.

Um eine Vorschau der Operation zu erhalten Wer clicca.

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.

2 Kommentare

TheJoe · 26 Dezember 2010 um 4:18 PM

Wow, danke für den Kommentar Luke technischen. Ich habe schon vor, um den Titel zu ändern genommen. 😉

Luke Canducci · 26 Dezember 2010 um 1:26 PM

Vollständigkeit, wenn es zu dieser Technik kommt häufiger als gesprochen “CSS Sprites”, Rollover ist das praktische Ergebnis, das erhalten wird (dass völlig CSS nicht Kompatibilitätsprobleme auf verschiedenen Browsern zu erstellen oder mit denen, die Javascript deaktiviert haben).

BTW, nice one 😉

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.