Ich habe gestern meinen alten CSS Sprites Artikel aktualisiert, und ich dachte, es wäre nett, jeden aufzufordern, selbst erstellte Sprites zu teilen. Machen wir gleich ein kleines Gewinnspiel daraus!
Ich habe mein Exemplar von Dan Cederholms Handcrafted CSS fertig gelesen, das war sehr gut. Mein Exemplar ist jetzt natürlich leicht gebraucht, aber ich dachte mir, warum nicht weitergeben an jemanden, der davon lernen kann. Es ist auch die Version mit der DVD.
Zur Teilnahme, hinterlassen Sie einfach einen Link in den Kommentaren unten, der direkt auf Ihr Sprite-Bild verweist. Wenn Sie noch nie einen Sprite erstellt haben, finden Sie einen interessanten im Web und verlinken Sie direkt darauf. Stellen Sie sicher, dass Sie bei der Kommentierung Ihre echte E-Mail-Adresse angeben, damit ich Sie kontaktieren kann, falls Sie gewinnen. Ich wähle nächste Woche einen Gewinner aus.
Wenn Sie denken, Sie werden versuchen, einen Sprite anderswo zu finden, aber nicht wissen, wie, würde ich empfehlen, Firebug zu verwenden. Öffnen Sie es und fahren Sie mit der Maus über die Dinge auf der Website, um zu versuchen, Dinge zu finden, die Hintergrundbilder verwenden. Fahren Sie über den URL-Pfad zum Hintergrundbild und sehen Sie, ob mehr dahinter steckt, als man auf den ersten Blick sieht. Das ist einer meiner Sprites, wie er in Firebug aussieht
![]()
Der Facebook Sprite. Alles an einem Ort ;)
https://#/rsrc.php/z136G/hash/3ay18ob4.png
LOL Das ist lustig
Dieser muss gewinnen
Das ist ähnlich wie das, was ich weiter unten gepostet habe. Ich habe darüber nachgedacht, eine Art verrücktes Template zu erstellen, das Sprites wie diesen verwendet.
Wann endet dieser Wettbewerb?
Ich arbeite gerade an einer neuen Website, in der ich Sprites verwenden möchte. Ich meine, bis zu dem Punkt, an dem ich nur noch ein Bild auf der gesamten Website haben werde, das ich gerne dafür verwenden würde.
Die Website sollte morgen Abend fertig sein.
Ich habe hier einen.
http://debasish.org/demo/traffikwise/assets/sprite-main.png
Noch nicht fertig, arbeite daran :)
Google hat einen guten Sprite – http://www.google.com/images/nav_logo7.png
Chris – Ich habe deine Screencasts befolgt, um diese WP-Site von Grund auf neu zu erstellen (mit Starkers)
http://stevebrodner.com/
Ich hatte auch noch nie Sprite-Bilder erstellt, daher war das auch eine Premiere.
http://stevebrodner.com/images/menu_art.jpg
(Ich möchte hier darüber kommentieren, was für ein brillanter Künstler, Illustrator und politischer Kommentator Steve ist, aber ich glaube, darum geht es hier nicht)
Normalerweise verwende ich HTML für die Navigation, aber um Steve ein einzigartiges Design zu geben, wollte ich seine Schriftzüge verwenden.
Ken
PS Ich hoffe, du bist heute sehr glücklich, nachdem Favre/Vikes nicht gewonnen haben, aber dein geliebter Pack schon.
Drachen-interaktiver Navigations-Sprite
http://dragoninteractive.com/lib/i/navigation/sprite.jpg
Kein Bild, aber ein ziemlich gutes Online-Tool zum Erstellen davon.
http://spriteme.org/
Andi,
Das ist ziemlich cool. Ich habe sie immer von Hand erstellt und dann ein wenig ausprobiert und Fehler gemacht.
Versuchen Sie, das auf Digg.com zu verwenden. 6 Anfragen und 77 KB gespart, und der daraus resultierende Sprite ist sehr beeindruckend…
Von der Dragon Interactive Website
http://dragoninteractive.com/lib/i/navigation/sprite.jpg
http://dragoninteractive.com/lib/i/subnavigation/sprite.jpg
Hier ist einer meiner eigenen für ein altes Design, das ich hatte
http://stormink.net/images/STORMINKspriteOLD.png
Apple Menü Sprite
http://images.apple.com/global/nav/images/globalnavbg.png
Von der Yahoo! Sports Website
http://l.yimg.com/a/lib/uh/15/sprites/sports_gray-1.0.0.png
INSight Design Conference Nav Sprite
http://www.insightdesignconference.com/img/bg_navigation.png
Hier sind zwei von der Navigation auf zwei meiner Websites
http://www.thedesigned.com/wp-content/themes/thedesigned-v2/images/bg-nav.gif
http://www.submitcss.com/wp-content/themes/SubmitCss-v4/images/bg-navigation.gif
Und hier ist einer, den ich mag und den Digg verwendet
http://digg.com/img/menu-current.gif
Dies ist ein kleiner Sprite für meine Social-Media-Links auf meiner Portfolio-Website.
http://www.renepolitiek.nl/img/social-media-logos.png
Einfacher Social-Networking-Sprite, den ich für einen Kunden mit WP gemacht habe
http://www.studio8.net/wp-content/themes/studio8dotnet/images/socialbuttons.png
Ich nehme nicht am Wettbewerb mit diesem hier teil, aber
jQuery UI ThemeRoller Sprite ist wirklich schön.
http://www.henryfroes.com/jonatan/goiano/images/all_tops.jpg
Slider dieses Themas: http://migre.me/9Wqa
Amazon hatte früher einen intensiveren Sprite als diesen, dachte ich, aber er ist immer noch ziemlich gut!
http://g-ecx.images-amazon.com/images/G/01/gno/images/orangeBlue/navPackedSprites_v12._V222883957_.png
Dieser Sprite von Yahoo ist ziemlich beeindruckend: http://farm4.static.flickr.com/3548/3366898583_e6a4c551ec_o.png
Hallo von der Westküste. Hier ist mein persönliches Portfolio. Ich habe gestern erst angefangen, Sprites für meine dynamische Dropdown-Navigation zu verwenden. Lädt 7x schneller... Erstaunlich.. Ich wusste bis zum Lesen deines Artikels nicht einmal, was ein Sprite ist. Danke. :)
http://www.guylepage.info/images/work.png
Hey Mann, dieses Bild ist eigentlich kein Sprite. =/
So sah Amazon früher aus
http://www.jonnyhaynes.com/wp-content/uploads/2009/02/amazon.png
Ich habe seine Website besucht und Firebug verwendet. Es ist tatsächlich ein Sprite in seiner Verwendung.
Meiner ist unter http://www.adeledecaso.com/style/tab.png, der die Tabs für http://www.adeledecaso.com macht. Er verwendet eine Mischung aus sich wiederholenden und nicht wiederholenden Teilen, um die Tab-Navigation über eine einfache UL zu realisieren.
Meine Navbar verwendet Sprites.
http://curtisblackwell.com/
http://www.cyclingnews.com/i/sprite.png
Ja, es ist meiner. Es ist aber nicht 100% der Seite.
Ich arbeite nicht mehr für das Unternehmen.
Yahoo! Indien http://l.yimg.com/t/img/1226894530icons_sprite3.gif
Yahoo! Shopping http://l.yimg.com/a/i/us/sh/topshop08/sprite_040208_8bit.png
Es sieht so aus, als ob alle Yahoo!-Websites Sprites verwenden…
Hier ist der Sprite für http://www.peerpressurecreative.com
http://www.peerpressurecreative.com/images/sprite.png
http://images.apple.com/global/nav/images/globalnavbg.png
Es gehört zu Apple, aber dort habe ich zum ersten Mal von dem Konzept erfahren.
Ich verwende mehrere Sprites auf meiner Website. Dies ist ein cooles mit einem „Hover“-Zustand und 3 Buttons
http://www.marcofolio.net/templates/marcofolio2/images/tech-icons.png
Gute Arbeit, Chris!
Blog von Thomas Olausson
http://www.ultravoid.com/wordpress/?p=101
Hier ist einer meiner für alle Misc-Icons auf meiner Website
icons.png
Ich hätte auch einige Bier-Sprites verlinken sollen!
http://paulasaur.us/css/images/beers.png
Darf ich Ihnen einige Silhouetten anbieten?
http://areyoudesign.com/blog/wp-content/themes/Invitation%20to%20the%20Crazytrain/images/date.png
Blog von Thomas Olausson
http://ultravoid.com/test-nav/#grapefruit
http://ultravoid.com/test-nav/menu-nav.png
Mein Sprite von http://turgrad.by (Header-Navigation).
http://turgrad.by/sites/all/themes/turgrad/img/hdr-bgs.png
Alice Coopers Navigation
http://www.alicecooper.com/images/template/ALI_nav.png
YouTubes massiver Sprite
http://s.ytimg.com/yt/img/master-vfl125983.png
Ein guter Sprite von der Warhammer Online Website
– http://mythicmktg.fileburst.com/war/us/en/global/images/new-nav_matrix.gif
Das ist ein bisschen viel, oder? Es könnte 2/5 der Größe sein.
Hier ist der Sprite, den ich für makesometime.com gemacht habe
http://makesometime.com/system/application/views/images/Sprite.png
Von einer Website, die ich verwalte.
http://www.dublin.oh.us/recreation/images/all-icons.png
Mein Blog-Header bei Anime² verwendet einen Sprite. (Unser Slogan ist „wir lieben Maid“, und wir gehören eigentlich eher zur Ani-Blogosphäre als zur Design-Blogosphäre, also wundern Sie sich nicht, das erklärt unser Maskottchen ^^)
http://anime2.kokidokom.net/wp-content/themes/whitespacedtypography/images/header-maid-mizugi.png
Dieser von der SAPO-Homepage wird in Hintergründen verwendet.
http://h.s.sl.pt/imgs/imgs.gif
Diese Website habe ich entwickelt/designt, die Sprites in der Navigation verwendet
http://www.thelyndale.com/wp-content/themes/the-lyndale/images/btn-map.jpg
http://www.thelyndale.com
Dies ist von Rachael Taylor Designs
http://www.rachaeltaylordesigns.co.uk/assets/css/images/rachaeltaylordesigns_menu.png
Ups, das war das falsche Bild [oben].
Hier ist es
http://www.thelyndale.com/wp-content/themes/the-lyndale/images/btns-nav.jpg
Tutorial9 hat einen netten Sprite für seine Navigation
http://tutorial9.s3.amazonaws.com/themes/stylesheets/images/tab-sprites.jpg
CSS-Tricks hat einen tollen Sprite
http://images.css-tricks.com/theme-4/css-tricks.png
Chris Spooners Sprite deckt mehrere Abonnementmethoden und diverse Elemente ab.
http://blogspoon.s3.amazonaws.com/wp-content/themes/SpoonGraphics_V4/images/sprite.png
Und zuletzt, Apples Navigations-Sprite
http://images.apple.com/global/nav/images/globalnavbg.png
Ich entschuldige mich, mein vorheriger Kommentar sieht aus wie eine Liste von Links mit einem schlecht beschreibenden Titel, aber es gibt keinen einfachen Weg, eine Liste von ein paar Sprite-Bildern interessant zu machen.
Habe diesen für die Stadionübersicht unserer Supporter-Seite vor einiger Zeit erstellt
http://www.isberget.no/uploads/images/stadionkart/all.jpg
Verwendet auf http://www.isberget.no/tromso-il/alfheim
http://borkweb.com/playground/sprite/sprite_sheets/running_megaman.png
Nicht meiner, aber dieser Megaman-Sprite muss einer der besten überhaupt sein. Man kann ihn hier in Aktion sehen.
http://borkweb.com/playground/sprite/sprite.html
Megaman FTW!
Schöne Grüße,
Albert
Hier sind drei Image-Sprites von zwei Websites, an denen ich gerade arbeite, die Websites sind noch nicht live.
1. http://www.ricardozea.net/sprites/bg-sprites.png
2. http://www.ricardozea.net/sprites/img-sprites.png
3. http://www.ricardozea.net/sprites/bg-frame.png
Website eines Immobilienmaklers: http://www.soprisrealty.com/images/button-sprite.png
Nicht der spannendste, aber im Interesse des Gewinnens, hier ist einer, den ich für eine Website verwendet habe… http://www.seven-acres.co.uk/images/menuSprite.png
Hier ist meiner von RIPT Apparel (http://riptapparel.com)
http://riptapparel.com/ript/wp-content/themes/riptTheme/images/navBG.jpg
Sprite, der auf meiner Website verwendet wird (http://www.imagomedia.be)
http://www.imagomedia.be/wp-content/themes/imagomedia_juli09/img/buttons_sprite.gif
Sprite aus meiner Header-Navigation: http://www.davidrojas.net/wp-content/themes/davidrojasv2/images/menu.png
http://cymweb.com.ar/images/menu.jpg
Ich habe ein paar Sprites auf meiner Website, aber hier sind die drei Hauptobjekte
Kleine Social Icons
http://www.tedgoas.com/wp-content/themes/brown-archer/images/bg-sm-icons.png
Homepage Icons
http://www.tedgoas.com/wp-content/themes/brown-archer/images/icn-how.png
Und die Hauptnavigation
http://www.tedgoas.com/wp-content/themes/brown-archer/images/bg-nav.png
Hier ist meiner: http://media.lib.byu.edu/images/hbll/li_buttons.jpg. Ein Sprite, den ich für eine WordPress-Website in der Bibliothek, in der ich arbeite, erstellt habe.
OBEY YOUR THIRST! – Sprite
Hier ist der Link zu einem fabelhaften Prince of Persia Sprite!
http://img178.imageshack.us/img178/9213/princespriteswb3.gif
Hier ist einer meiner kleinen von meiner Portfolio-Website: http://www.racinewebworks.com/img/icons/sprite.png
Neuer Sprite: http://www.csskarma.com/img/sprite.jpg
Myspace Such-Sprite
Da ist eine Menge.
Hier ist ein einfacher, den ich auf einer Website verwende (noch in der Entwicklung): http://advantage-media.com/newsite/images/nav.gif.
Ich habe CSS-Sprites noch nicht so viel verwendet, aber hier sind die, die ich für ein paar Icons verwende.
http://fwebde.com/wp-content/themes/fwebde2/images/icons.png
Google.cn hat eine nette kleine Animation auf der Titelseite.
http://www.google.cn/intl/zh-CN/images/toolbar_animation_20090618.png
Tolle Idee.
Hier ist meine
http://www.sparkhouse.com/sites/all/themes/sparkzen/images/nav_pri_bg.gif
Ich freue mich darauf, hier eine gute Liste zu sehen.
Deviant Art
http://st.deviantart.net/minish/gruzecontrol/icons-small-modules.gif?6
http://pepelsbey.net/wp-content/themes/pepelsbey/i/graphics.png
Erster (und bisher einziger) Versuch mit Sprites für ein neues Blog-Design, an dem ich arbeite
http://matte.ws/wp-content/themes/two/images/icons-black.jpg
Ich habe noch nichts so Komplexes wie den Facebook-Sprite ausprobiert, aber es wäre interessant, ihn bei einem bevorstehenden Projekt auszuprobieren
Dies ist der Sprite, den ich für einen Javascript-Countdown-Timer erstellt habe, er hat so gut funktioniert!
http://www.quinnipiacbobcats.com/fls/17500/madness/images/countdown_sprite.gif
Das ist genial, wie hast du das gemacht?
Ich habe zwei
1. http://stabilitynetworks.valitics.com/images/cssimg/4ways_spr.png
2. http://youasparent.com/images/cssimg/nav_sprite.png
Beide sind meine eigenen, die erste ist im Prozess der Einführung und die zweite ist auf einer bereits veröffentlichten Website.
Hier ist ein kleiner von meiner Website
http://wsdesign.bestnoise.com/wp-content/themes/wsdesign2/style/images/rss-image-sprites.jpg
Aus China
https://img.alipay.com/pa/page/index/bg.png
Von meinem (veralteten) Blog-Design
http://koew.net/blog/wp-content/themes/AllPraiseToCoffee/images/aptc_sprite_03.png
Beachte das Easter Egg, das ich extra für neugierige Benutzer gemacht habe! ;)
Von TheCampusList
http://www.thecampuslist.com/images/master-images.png
Hier ist einer, den ich für Svensk Handel gemacht habe http://www.svenskhandel.se/styles/images/spritesmap.png
Ich würde dieses Buch gerne bekommen!
Es gibt hier einen schönen. Nicht meiner allerdings. http://dragoninteractive.com/lib/i/navigation/sprite.jpg
Navigation für eine Spec-Site, an der wir noch arbeiten.
http://www.kandsadv.com/stellar/IMAGES/navigationBar.jpg
Von Jquery Theme Roller
Themeroller Sprite
Ein kleiner, den ich für eine Website gemacht habe
http://www.schweizer-illustrierte.ch/_img/media_buttons_all2.gif
Amazon Sprite
Kleiner Navigations-Sprite
Hier ist ein Download-Sprite, den ich gemacht habe, er ist ziemlich harmlos, erledigt aber seinen Zweck.
http://cssaid.com/images/download.png
Ich habe durch das Lesen dieses Blogs Sprites kennengelernt. Hier ist ein einfaches Sprite-Bild, um einen sauberen Button-Effekt zu erzielen
http://dano-dna.com/images/portfolio-sprites-dimaging.gif
Ich habe mehrere davon für diesen Kunden erstellt
http://waterscapespro.com/
Mein erster CSS-Sprite
Hier ist er
http://www.figurinesthedetour.dk
Dieser wird im Footer einer meiner Live-Websites für Smoke & Spice Southern Barbeque in Ontario, Kanada, verwendet!
Das ist kein sonderlich komplizierter Sprite, aber er ist ganz mein... LOL.
http://smokenspice.com/images/partners.png
Um einen Begriff von Chris zu verwenden, ist dieser Sprite „gridular“, da ich die Übergangsbilder so ausgerichtet habe, dass weniger im CSS geändert werden musste.
Hier ist ein einfacher: http://www.getascent.com/app/views/site/images/bg-images.png
Verwendet für diese Scentsy-Website: http://www.GetaScent.com
Ich habe einen Sprite für den jQuery-Schiebe-Karussell im Footer von http://www.driftwoodbeer.com verwendet. Hier ist das Sprite-Bild: http://driftwoodbeer.com/wp-content/themes/driftwood2/images/jcarousel-sprite.png
Meine Lieblings-Sprites:
Mobile Me, Electronic Arts und Fantasy Interactive.
Hier ist der aus der Hauptnavigation von whitehouse.gov
http://www.whitehouse.gov/sites/default/themes/whitehouse/img/nav-sprite.gif
Hier ist ein Sprite, den ich für ein Navigationsdesign erstellt habe
http://www.24-7ministries.org/images/buttons.gif
Sie können ihn hier ausprobieren, auf der rechten Seite
http://www.24-7ministries.org/
Meine Website ist derzeit im Bau, aber ich wollte an diesem Wettbewerb teilnehmen. Ich habe einen Sprite, bitte schauen Sie sich diesen an http://www.sixtein.web.id/images/images.gif
Übrigens, es tut mir leid, mein Englisch ist nicht so gut xD
Das folgende Bild wird nicht als CSS-Sprite verwendet, aber das folgende Bild kann für mich als Beispiel für einen sehr schönen Sprite dienen. :)
http://www.sixtein.web.id/images/images.gif
Noch einer xD http://img108.imageshack.us/img108/7093/powmettaurzxhu8.gif
Eigener
http://fred-art.dk/Fred-art.dk2/images/graphics/navigation_sprite.png
Kontain.com verwendet viele sehr gute Sprites
http://static2.kontain.com/1_0_3_0/css/assets/sprite_login.png
http://static2.kontain.com/1_0_3_0/css/assets/sprite_header.png
http://static1.kontain.com/1_0_3_0/css/assets/bg.png
http://static3.kontain.com/1_0_3_0/css/assets/sprite_icons.png
http://static3.kontain.com/1_0_3_0/css/assets/sprite_gui.png
http://static3.kontain.com/1_0_3_0/css/assets/sprite_widgets.png
Und natürlich YouTube
http://s.ytimg.com/yt/img/master-vfl119884.png
Ich verwende einen ziemlich einfachen Sprite aller Icons auf meiner Website
http://sokolov.cc/img/iconsWithLightWorld.png
Hier ist der Sprite aus dem neuen Design von CNN.com
http://i.cdn.turner.com/cnn/.element/img/3.0/global/buttons/Sprite_BT_master.gif
Ich habe eine Website eingerichtet, die 2 Sprites für die obere und linke Spaltennavigation verwendet. Ich werde sie nach dem Lesen dieses Artikels zusammenführen.
http://totos.com/
Bilder
http://totos.com/images/navmenu.png
http://totos.com/images/locations.png
Hier ist einer von [H]ard|OCP
http://www.hardocp.com/images/sprite.png
Google: http://www.google.nl/images/nav_logo7.png
Und einer, den ich für einen Kunden gemacht habe
http://www.poker-trips.eu/imgs/layout/bgs.png
http://www.poker-trips.eu/imgs/layout/evtr.png
http://www.poker-trips.eu/imgs/layout/evtr-cats.jpg
http://www.poker-trips.eu/imgs/layout/nl/menu2.png
Die Seite ist übrigens auf Niederländisch :)
Meine eigene Website verwendet derzeit keine Sprites, aber ich plane, sie für die nächste Version zu verwenden.
Sprite-Sheet von Made Me LOL
http://www.mademelol.net/images/sprites.png
Sprite-Sheet aus meinem Portfolio
http://www.cameronbaney.com/wp-content/themes/cameronbaney/images/sprite.png
Das ist großartig, ich hätte nie daran gedacht, nachzusehen.
Bei meinem letzten Job (http://www.elmachips.com.br) habe ich viele Sprites verwendet, wie z.B.:
http://www.elmachips.com.br/images/sprites_buttons.png
http://www.elmachips.com.br/images/sprites_logos_yb.png
http://www.elmachips.com.br/images/sprites_logos_bg.png
Das habe ich für einen Kunden gemacht
http://www.discountcapital.com/css/img/SoCAL.jpg
Ich habe gerade das CSS meines 80er/90er-Jahre-Blogs Saturday Morning Central aktualisiert, daher ist es vielleicht einer der buntesten/aufdringlichsten Sprites im Wettbewerb. :)
http://saturdaymorningcentral.com/wp-content/themes/smc3/images/smc.png
Entschuldigung für die doppelte Eingabe, aber ich habe gerade auch meine persönliche Musik-Website aktualisiert.
http://tommyday.com/wp-content/themes/td/images/tommyday.png
Ich liebe diesen von Tim Van Dammes Website: http://maxvoltar.com/img/footer.png.
Beides aus einer Demo, die ich vor ein paar Monaten gemacht habe
http://demos.ailurus.fr/ailurus-v0/img/HEADLINKS/DARK/headlinks.jpg
http://demos.ailurus.fr/ailurus-v0/img/BLOCS/580/top.jpg
Verdammt, ich habe das Gefühl, ich bin weit hinterher, wenn ich hier kommentiere!
Hier ist der Sprite, den ich für DesignBump verwende
http://designbump.com/sites/all/themes/designbumpv3/img/imagebase.png
Ich versuche, kontinuierlich Bilder hinzuzufügen, um die Leistung der Website zu verbessern.
Ich mag auch den, den Sharenator.com verwendet
http://www.sharenator.com/images/s.gif
Schöner Sprite von Invoice Machine
http://assets.invoicemachine.com/images/application.png
Hallo Chris,
Macht weiter so mit eurer guten Arbeit…
http://www.myvouchercodes.co.uk/public/images/tab-sprites.jpg
Ein paar, die ich kürzlich gemacht habe
http://www.sechiropractic.com.au/images/sprites.png
http://www.publishfirst.org/lyc/images/nav.png
Wenn ich jemals Image-Replacement für eine Navigationsleiste verwende, verwende ich immer ein einzelnes Bild, aber ich habe das nur ein paar Mal auf die Spitze getrieben, um mehr Website-Bilder einzubeziehen, werde aber http://spriteme.org/ dafür in Zukunft häufiger nutzen.
Ich habe Sprites im Menü einer Website verwendet, an der ich für einen College-Jiu-Jitsu-Club arbeite. Danke für den großartigen Podcast… dort habe ich es gelernt.
http://www.adaltadesigns.com/testvideo/index.html
Definitiv nicht der beste, aber hier ist meiner. Aus meinem Portfolio, http://www.scottblock.com, für die Icons verwendet.
http://scottblock.com/icons.gif
Dies ist einer, den ich auf einer von mir erstellten Website für LogicBUY verwendet habe.
http://www.logicbuy.com/images/nav.jpg
Ich habe mehr auf der Website verwendet, aber das ist die Haupt-Sprite.
http://200.192.177.238/novoletras/sprite_barras.png
http://200.192.177.238/novoletras/sprite_plugins_interna.png
http://200.192.177.238/novoletras/rdp.gif
http://200.192.177.238/novoletras/sprite_botoes_lista.png
http://200.192.177.238/novoletras/sprite_acc.gif
http://200.192.177.238/novoletras/sprite_suggest.png
http://200.192.177.238/novoletras/sprite_bss.gif
Diese ändern sich jeden Tag
http://letras.terra.com.br/sprites/diario/top1_1256550728.jpg
http://letras.terra.com.br/sprites/diario/top2_1256550728.jpg
http://letras.terra.com.br/sprites/diario/usuarios_1256590871.jpg
http://letras.terra.com.br/sprites/diario/cifra_1256590896.jpg
Ich habe einen ziemlich großen für eine Website mit einem Möbel-E-Shop
http://www.asko-nabytek.cz/
Und der Haupt-Sprite ist hier, es gibt noch 2 weitere, aber kleine.
http://www.asko-nabytek.cz/skin/frontend/default/asko/design.png
Alles handgefertigt, kein Generator verwendet.
Ähm… darf ich das posten?
http://cdn-www.pornhub.com/images/mega-bgv26.png
:)
Dies ist einer aus der Hauptnavigation von whitehouse.org
http://www.whitehouse.gov/sites/default/themes/whitehouse/img/nav-sprite.gif
Leider habe ich noch keinen eigenen erstellt, sondern erst gestern deinen Artikel mit dem Tutorial gelesen und arbeite noch daran.
Ich habe diesen jedoch vor etwa einem Jahr bewundert und dachte, es sei eine großartige Idee, also teile ich stattdessen diesen.
http://images.play.com/SiteCSS/Play/Live1/2009102202/css/sprites/core-site.gif
Ooo ja, sprits es auf YO!
Dies ist von meiner Fotografie-Agentur, die ich mit meinen Kumpels gemacht habe, aber ich habe die Website gemacht und sie haben die Bilder gemacht.
Sprite: http://acaimages.com/gfx/navBar.jpg
Die beste Website, auf der man Sprites sehen kann, ist http://www.godaddy.com, was sie sehr schnell macht, obwohl sie viele Inhalte hat.
Hier ist einer, den ich für die Navigation auf einer Kunden-Website gemacht habe. Der Text links ist weiß, daher sieht er auf weißem Hintergrund seltsam aus.
http://www.juliamorris.com/09site/wp-content/themes/juliamorris/assets/child/i/ir/nav-sprites-24-fs8.png
Ich habe einen für eine Splash Page gemacht. Oh ja, eine Splash Page. Der Chef hat darauf bestanden, und nun ja, er war derjenige, der bezahlt hat.
Hier ist er
http://www.systemsevillaeste.com/_img/splash.png
Wow, toller Preis! Tolle Idee.
Der beeindruckendste Sprite, den ich je gesehen habe, ist der, der auf Florida Flourish verwendet wird.
Er ist hier zu sehen und ist satte 1043x697px groß.
Hier ist meiner http://www.msinkinson.co.uk/images/dates.png
Habe noch nie zuvor CSS-Sprites ausprobiert, werde sie aber definitiv studieren, lernen und in meinen zukünftigen Projekten verwenden.
Ich verwende zwei für die Künstler-Website, die ich für ihn erstellt habe, eine für sein Top-Menü und eine für sein Hauptmenü.
Das obere Menü ist nur im nicht-aktiven und im Hover-Zustand.
http://matthughesart.com/indeximg/top_nav.png
Das Seitenmenü hat nicht-aktive, Hover- und aktive Zustände (aktiv ist weiß).
http://matthughesart.com/indeximg/main_menu.png
Toller Tipp, mag diese Methode definitiv.
Habe diese von TV1.rtp.pt gefunden
http://kylesteed.com/wp-content/themes/steed/styles/images/social_sprite16.png
http://www.pointconceptsurf.com/gallery.html
Sprite-Menüleiste!
Sprites wurden für die Navigation dieser Portfolio-Website verwendet, die ich kürzlich erstellt habe
creativeinabox.com
http://creativeinabox.com/images/menu-imgs-hover.png
Sprites wurden für die Twitter- und RSS-Links im Footer verwendet.
http://www.fedena.com/images/follow.png
Hier ist mein allererster, erstellt nach deinem Guide, Chris!
http://spectrum-massage.com/newsite/wp-content/themes/spectrum/images/menubar.png
Eric
Hier ist meiner…
http://www.pawanpillai.com/images/nav/nav-sprite.png
Sprites verwendet auf der Power Miners-Website auf LEGO.com
http://cache.lego.com/upload/contentTemplating/PowerminersMenu/images/pic33360EF749458B11AF6B5AD4A3EE08BE.gif
(http://powerminers.lego.com/en-US/default.aspx)
/Sune
Seufz, ich habe keine persönlichen Stücke vorzuzeigen, aber ich habe festgestellt, dass sie auf einer Website, die ich Tag für Tag anstarre, nützlich eingesetzt werden. Erkennen alle /.-Fans dieses? Das sind natürlich die Kategorie-Icons für einzelne Beiträge.
Nützliche Link-Icons
http://www.uifreak.com/media/583/spritesmall.png
CSS auf der Website.
Eigentlich ist es nur ein Menü. Aber ich habe das vor 5 Jahren benutzt. Lange bevor es diesen „Sprite-Wahnsinn“ gab :)
http://modelarch.pl/img/menu.png
Ich hoffe, das hat noch niemand gesagt, aber ich habe diesen auf der Website von BlackMoon Designs gefunden.
http://blackmoondev.com/wp-content/themes/blackmoon/img/top-bg.jpg
Ein ziemlich cooler Sprite, auch wenn ich es selbst sage. Obwohl die begleitende Website nicht meine beste Leistung ist.
http://connectionselectrical.co.uk/style/light-trans.png
Diesen Sprite habe ich bei AOL.com gefunden. Es ist ein sehr langer vertikaler Sprite http://portal.aolcdn.com/p/_v11/css/blue/blue_skin.png
Abgesehen davon habe ich diesen CSS-Sprite gefunden, der verwendet wird, um einen fantastischen Hover-Effekt im Menü zu erzeugen. Ich habe von diesem Sprite schon vor langer Zeit im CSS-Tricks-Forum erfahren. Dieser gehört zu http://www.gilleardmarketing.com und der Sprite ist http://www.gilleardmarketing.com/images/topnavbg.png
Und am Ende mein allererster CSS-Sprite :) http://www.code-pal.com/wp-content/themes/codepal/images/twitter.jpg
http://mooshell.net/mooshellmedia/img/sprites.png
Für http://mooshell.net/
Hallo Chris,
Ich finde die Sprites, die Apple für iWork.com und Me.com verwendet, sehr detailliert und interessant. Es zeigt einfach, wie sehr Apple sich um Benutzerfreundlichkeit und Design kümmert.
Hier sind sie
iWork.com Sprite
Me.com Sprite
Das ist auch ein kleiner Sprite, aber berühmt?
Hoppla, mein Bild wird nicht angezeigt, nochmals mit a-Tag
Donating Obama
Ich wusste nicht, dass Leute Sprites so verwenden, ich habe sie nur für Buttons für Hover- und aktive Zustände verwendet. Es ergibt Sinn, denn es gibt weniger Anfragen vom Server, also nehme ich an, die Seiten würden schneller laden.
Ich habe zwei wirklich schöne, die ich für mein Haupt-Layout verwende. Ich bin sehr stolz auf meine Sprites, lol.
http://cdn.myunv.com/img/resource/sitewide/b6/assets.sprite.png
http://cdn.myunv.com/img/resource/homepage/sidebar-tabbed-sprite.png
YouTube's Sprite: http://s.ytimg.com/yt/img/master-vfl125983.png
Yahoo's neues, für wiederholende Hintergründe: http://d.yimg.com/a/i/ww/met/gsprite_071309.gif
Last.fm: http://cdn.last.fm/flatness/header/headersprite.1.png
Mashable: http://ec.mashable.com/wp-content/themes/v5/img/bg.png
http://pixelcoder.co.uk/clients/tragic-town/images/ttSprite.png
Seite in nicht-standardmäßigen Browsern derzeit etwas kaputt :(
http://pixelcoder.co.uk/clients/tragic-town/
meiner ist einfach, aber er ist mein Lieblings-Sprite, den ich je benutzt habe. Er verleiht meinen Links einen echten Wassereffekt.
http://euphoriastudio.freehostia.com/images/link.png
in Aktion: http://www.euphoria-studio.com
Nichts Besonderes an der Einfachheit des Sprites selbst, aber die Implementierung und Browserkompatibilität davon hat mich stolz gemacht.
http://publishthequest.com/sites/publishthequest/images/mainnav_sprite.png
Die Implementierung, die einiges an Bastelei für IE6-Probleme mit z-indexing und transparenten PNG-Problemen erforderte.
http://publishthequest.com/
Nebenbemerkung zu Sprites aus meiner Sicht…
Sie können großartig sein, wenn sie richtig verwendet werden. Sie begrenzen Verbindungen / Downloads und können die Ladezeit von Seiten und den Bedarf an Vorabladung reduzieren (und wir sind alle stolz auf diese pixelgenauen Kreationen).
Der Hype um die Verwendung kann stark missverstanden und schlecht implementiert werden, nur um „Sprites“ zu verwenden.
Berücksichtigen Sie die Implementierung, Nutzung und den Kosten-Nutzen-Vorteil Ihrer Lösung, bevor Sie sie in der Produktion implementieren. Aber haben Sie eine gute Zeit, die Möglichkeiten zu erkunden.
Entschuldigen Sie die Rede über Best Practices. Ich denke, es ist entscheidend, darüber nachzudenken, warum Sie etwas tun, wenn Sie lernen, es zu tun.
Ich verwende auch Sprites für die Navigation auf dieser Website, die ich für eine Myth-Rock-Band erstellt habe;
http://www.kingfishersky.com/
http://gidic.ee/i/sprite.png
http://viis.ee/images/icons.png
http://viis.ee/images/gradients.png
http://www.nordsafe-engineering.com/i/gfx.png
Neueste
http://www.back2.co.uk/images/bg_sprites.jpg
Ich habe diesen (mit weißem Hintergrund) gemacht http://www.pilottti.fr/squelettes/img/sprites.png
Twenga CSS-Sprite
:)
Meiner ist ziemlich einfach
http://www.30threedesign.com/img/navSprite.png
Ich habe auch ein Parallax, wenn man die untere rechte Ecke greift und hin und her vergrößert/verkleinert, bewegen sich die Risse auf der Seite im Header.
Wirklich elegante Verwendung von Parallax, Chad!
http://whyspam.me/images/WhyLogo.png
Der Effekt sieht großartig aus, wenn das Bild langsam eingeblendet wird, anstatt das erste Bild sofort zu ersetzen.
Hallo,
Ich habe gerade einen für eine WordPress-Website hier erstellt.
http://themustardplug.com/child/wp-content/themes/childaid/images/logos-sprite.png
Danke Chris.
elmalak
Ich habe ein paar gemacht, aber sie sind alle sehr einfach, nicht wirklich interessant (die meisten folgen dem klassischen Schema – alle Elemente des Menüs in drei verschiedenen Zuständen, so einfach ist das). Aber ich habe neulich Folgendes gefunden, ich würde es „Sprite Madness“ oder so ähnlich nennen…
http://www.ulmanen.fi/fugue/all_shadowless_compact.png
Gefunden hier, dieses Bild ist Teil eines Tools, mit dem man CSS-Sprites basierend auf dem Fugue-Icon-Set erstellen kann. Das ist auf den ersten Blick eine Ikone-Überdosis – aber irgendwie nützlich :)
Scheint, als wäre ich spät zur Party. Aber ich habe einen für die Domino-Website meines Freundes gemacht. Er hat alles in JavaScript programmiert.
Sprite
http://www.arisbartee.com/bigsix/images/bone-sprites.png
Domino-Spiel
http://bigsixtotheboard.com/
http://www.pitgroup.nl/assets/img/sprite.png
und
http://www.pitgroup2.net/netsociety/assets/img/sprite.png
noticias.rtp.pt und desporto.rtp.pt verwenden diesen http://img.rtp.pt/noticias/images/ImgNoticias_n_repeat.jpg. Er ist GROSS :)
Ich bin den ganzen Tag bei Google Reader, also war dies eine offensichtliche Wahl für mich: http://www.google.com/reader/ui/1454282699-lhn-sprite.png
Ich habe darüber für meine eigene Website nachgedacht (mexicometro.org; ja, hässlich wie die Hölle; ich bin kein Designer, aber ich lerne mich selbst über CSS, PHP usw.), aber ich habe nicht so viele Hintergrundbilder, dass es sinnvoll wäre.
Hier ist ein Link zu meinem CSS-Sprite
http://www.trewknowledge.com/images/global.png
Ziemlich einfach, aber die Website ist auch einfach :)
Einfacher Sprite, den ich für meinen Blog ausprobiert habe… Nächste – Vorher-Navigation…
http://4.bp.blogspot.com/_cJm1dkHdSEo/SunTQL_om2I/AAAAAAAAA3Q/LZ_KIWhZjYQ/s1600/randomize.gif
:)
Hallo,
Ich habe einen einfachen Sprite für meine Hauptnavigation auf meinem Portfolio verwendet.
http://sideradesign.com
http://sideradesign.com/images/menusprite.png
Die Yahoo-Suchleiste ist ziemlich nett. http://m.www.yahoo.com/. Der Sprite ist hier http://d.yimg.com/a/i/ww/met/th/slate/sprite_masthead_slate_062609.png
Ich habe ein Urban Art Projekt gemacht und brauchte eine Graffiti-Schriftart für die Hauptnavigation;
Urban Art Sprite
Haha :) Das scheint Spaß zu machen :)
Hier ist ein Sprite, den ich vor einiger Zeit für ein Tutorial erstellt habe.
http://www.faridhadi.com/demo/slide-your-contact-form-in-with-style/images/contact-sprite.gif
Hier ist ein gutes Beispiel von http://www.getdropbox.com
https://www.getdropbox.com/static/34502/images/sprites/sprites.png
Hier ist ein Sprite http://cahayaislam.com/wp-content/themes/CahayaIslam.com/images/sprite.png
Bei Publico.es haben wir einen großen, aber er ist immer noch sehr leicht im Vergleich zu allen einzelnen Bildern...
http://www.publico.es/v2/css/img/sprite.png
Ich erstelle gerade ein JavaScript Minesweeper – hier ist mein Sprite: http://www.skilldrick.co.uk/minesweeper/images/mine-sprite.png
Unser Titel-Sprite
http://www.primestudiosllc.com/images/titles.png
Meine Website-Navigation verwendet Sprites.
http://www.chadritchie.net/
Yahoo Sprites
http://d.yimg.com/a/i/ww/met/pa_icons/in_pa_sprite_072409.png
http://d.yimg.com/a/i/ww/met/sprite_pg_nontheme_081709.gif
http://d.yimg.com/a/i/ww/met/th/slate/sprite_masthead_slate_062609.png
Picasa hat einen ziemlich verrückten Sprite
h
http://lh4.ggpht.com/s/v/56.42/img/lh_sprite.gif
Da ich noch nie selbst einen Sprite erstellt habe, würde ich einen vom Suchgiganten leihen :)
http://www.google.com/images/nav_logo7.png
Übrigens, könnten Sie das Buch nach Indien versenden?
Seit etwa einem Monat arbeite ich an Sprites für die Firma, bei der ich arbeite. Es ist ein fantastisches Gefühl, wenn eine Website startet und fast jedes verwendete Bild in einem Sprite enthalten ist :)
Hier ist einer davon, verwendet für peterrdevries.nl
http://www.peterrdevries.nl/wp-content/themes/peterrdevries.nl/pix/global/sprite-peter.png
Hier ist einer für den Wettbewerb.
http://www.greenbayaja.org//images/navbarsprite1.gif
Ich habe diesen Sprite vor etwa einem Jahr gemacht. Ungefähr 50 HTTP-Anfragen auf 1 reduziert (~80 KB)
http://admanager.dba.dk/css/images/masterImage.png
Es hat wirklich Spaß gemacht, sie zu positionieren!
http://ebraun.adorama.com/pix/images/adoramaPixOrderingBG.png
Ich bin eine aufstrebende (und noch nicht verdienende) Webdesignerin aus Österreich, Europa. Ich lese regelmäßig Ihren Blog, Chris, und auch Artikel von Dan (liebe Simple Bits).
Daher bin ich sicher, dass dieses Buch mir von großem Nutzen sein würde! Es gibt nicht genug Frauen, die diesen Job machen – bei weitem nicht – und noch weniger, die in Österreich ansässig sind (und wenn, hätten viele Schwierigkeiten, ein Buch in englischer Sprache zu lesen). Ich hoffe, Sie entscheiden sich, "uns" (mich also ;-) ) zu unterstützen.
Liebe Grüße, Ruana