Thumbnails sind eine der reinsten Nutzungsmöglichkeiten, die das digitale Zeitalter geschaffen hat. Im Wesentlichen ist ein Thumbnail eine Vorschau, ein Versprechen, was Sie sehen werden, wenn Sie auf den Link klicken. Ein kleiner Blick mit weniger Daten, schneller zu laden und weniger gierig nach Bildschirm-Immobilien als das Full-Size-Asset. Sie sind ideal für Bilder, aber was ist mit Video?
Nun, indem wir eine Technik erweitern, die wir bereits für Button-Zustände verwenden, können wir erstaunliche animierte Thumbnails mit einfachem CSS und ein wenig jQuery erstellen.
Download-Geschwindigkeiten sind heutzutage für Webentwickler kein Problem mehr. Natürlich sind kleine Dateigrößen immer noch wünschenswert, aber die tatsächliche Leistung, die auf den meisten Sites erreicht wird, ist die Anzahl der HTTP-Anfragen. Jedes Mal, wenn Ihre Website ein Asset lädt, erstellt der Browser eine HTTP-Anforderung, die gesendet, verarbeitet und dann zurückgegeben wird. Überprüfen Sie Ihre Konsole, Sie werden sehen, dass ein großer Teil der Verzögerung auf Ihrer Website nichts mit der Bildgröße zu tun hat. Sie müssen nur auf eine Serverantwort warten.
Die Lösung ist die CSS-Sprite-Technik; Zusammenfügen mehrerer Bilder zu einer einzelnen Bilddatei und dann selektives Anzeigen verschiedener Teile des Bildes mit CSS.
Für jede Schaltfläche, die nicht mit grundlegenden CSS-Stilen erstellt werden kann, würden wir drei Zustände erstellen. ein off , ein over und ein down :
.button{background:url('off-state.png');}.button:hover{background:url('over-state.png');}.button:active{background:url('down-state.png');}Dies würde dazu führen, dass drei Bilder vom Server heruntergeladen werden und drei HTTP-Anfragen generieren.
Wenn wir dies als CSS-Sprite erstellen, speichern wir alle drei Bilder nebeneinander in einer einzigen Datei (so dass wir anstelle von drei 200px breiten Bildern ein 600px breites Bild haben) und die Position des Bildes mit der CSS-Eigenschaft background-position ändern :
.button{display:block;width:200px;height:83px;background:url('button-states.jpg');}.button:hover{background-position:-200px;}.button:active{background-position:-400px;}Stellen Sie sich das Element als ein Fenster vor, durch das Sie das Bild sehen. Sie können das Bild verschieben, aber das Fenster bleibt in der gleichen Position. Wenn Sie sicherstellen, dass das Element die gleiche Größe wie der Teil des Bildes hat, den Sie anzeigen möchten, ist der Effekt nahtlos: