Cookie

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).

In breve si tratta di includere la maggior parte degli elementi di navigazione della pagina all’interno di 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 da un’impressione di maggior velocità.

Vediamo ad esempio l’immagine che utilizza Google nelle sue ricerche:

L'immagine usata da Google

Der von Google verwendete Bild

Jemand hat schon einige erkannt Elemente costantemente richiamati all’interno della pagina delle ricerche, 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.

Per l’inclusione dell’immagine all’interno della pagina Google utilizza in parte 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.

Lasciando perdere per oggi Javascript passiamo ad analizzare i passaggi perché l’effetto venga restituito nur mit HTML und CSS. Fangen wir mit etwas einfachem beginnen: die nächste Taste ist aus zwei Bildern gebildet. I passaggi che vedremo serviranno a creare lRollover-Effekt Bewegen Sie den Mauszeiger mit ein Bild. L’immagine totale misura 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 formattare l’HTML.

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

Questa sarà la riga HTML che mostrerà il bottone all’interno della pagina. Da notare lEigenschaft ID” der Stil, von denen dann geändert werden mit dem CSS. Und’ facile notare che la riga qui sopra in realtà 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;
}

Occhio a richiamare l’immagine giusta. Io l’ho messa nella directoryimg“. Der Knopf ist sehr groß, com’è semplice notare Die Breite ist die anfängliche Bild (width: 343px;), während l’altezza è esattamente la metà (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 la seconda metà dell’immagine in der gleichen Position die er vor der.

Die dritte Regel ist einfach Text verbergen Kontakt“.

Per avere l’anteprima del funzionamento Wer clicca.


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 Seite nutzt Akismet Spam zu reduzieren. Erfahren Sie, wie Sie Ihren Kommentar Daten verarbeitet.