CSS Sprites und schnelle MouseOver Effekte
Dienstag, 29.03.2011, 13:57 Uhr. Trackback | Zur Startseite.
A list apart hat einen interessanten Artikel über eine schon recht alte Technik: Verschiedene Einzelbilder zu einem Sprite-Gitter zusammenfassen und die gerade benötigten Bildteile per CSS laden lassen. Dies hilft einerseits bei MouseOver-Effekten, da nur ein Bild geladen wird, andererseites hilft es generell, die Anzahl der http-requests beim Laden einer Webseite zu verringern. Um aus seinem zusammengesetzten Sprite-Bild die richtigen HTML Codes zu erzeugen, hilft zum Beispiel dieser CSS Sprite Generator.
Auch Google nutzt zu einem Bild zusammengefügte CSS Sprites:
http://www.google.com/images/
Die Entwicklung des Google Sprite-Hintergrunds:
http://www.seodenver.com/
Anleitungen zur Nutzung der CSS Sprites:
http://www.noobcube.com/tutorials/html-css/ …
http://www.w3schools.com/css/css_image_sprites.asp
http://www.switchonthecode.com/tutorials/css-tutorial …
CSS Sprites und schnelle MouseOver Effekte
- HTML/CSS: Objekte „unten“ ausrichten
Um mit CSS Objekte unten auszurichten, gibt es die Platzierungsmöglichkeit "bottom: 0px;". Das sollte dann Layer, Objekte oder auch Hintergrundbilder immer ganz unten ausrichten. Ganz... - WebP Bilder öffnen oder umwandeln
WebP ist ein von Google entwickeltes Bildformat, das eine effiziente Komprimierung (und damit besonders kleine Dateigrößen!) von Webfotos ermöglicht und so für ein schnelleres Laden... - Photoshop: Bilder einfärben mit Verläufen und Gradient Maps
Der Designer Rikard Rodin zeigt in diesem YouTube Tutorial, wie man Bildern eine bestimmte Farbstimmung geben kann: Dabei hilft die "Gradient Map" von Photoshop -...