Viele Leute haben Spaß am "Zeig deine Sprites!"-Wettbewerb. Ich habe den alten Zufallszahlengenerator benutzt und Lee Kowalkowski als großen Gewinner ermittelt, herzlichen Glückwunsch Lee! Schauen wir uns nun einige der Einreichungen an. Sprites zu betrachten, finde ich seltsam faszinierend. Es ist wie diese seltsame Geheimsprache des Webs, die nur wir Performance-Nerds wirklich verstehen =)
Einige davon wurden möglicherweise zugeschnitten oder vergrößert/verkleinert. Sie sind nicht dazu gedacht, übernommen und verwendet zu werden, ich hoffe nur, sie dienen als inspirierender Funke!
![]()

![]()
![]()
![]()





![]()
![]()
![]()


![]()
![]()
![]()

![]()


![]()

![]()
![]()
![]()
Wenn Sie sich das alles nur angesehen und gedacht haben: "Ähm, was zum Teufel war das?", Das nennt man CSS-Sprites und Sie können hier mehr darüber erfahren.
Ich liebe das Prince of Persia-Bild :D
Absolut!!!
Woher kommt das Prince of Persia?
Persien.
Oh je, das hat mich zum Lachen gebracht.
Perfekte Antwort! Hat mir den Tag versüßt! Danke!
Technisch gesehen ist es jetzt Iran.
Ich glaube, er meinte, von welcher Website. Aber ja, das ist eine lustige Frage/Antwort, falls das gemeint war.
Halt uns nicht zurück! Es wäre großartig, wenn Sie jeden Sprite mit seiner Website verlinken könnten, damit wir ihn in Aktion sehen können. Cheers
Es stammte aus einem sehr alten Videospiel mit demselben Namen (The Prince of Persia) aus den 80er Jahren. Traurigerweise bin ich alt genug, um mich lebhaft daran zu erinnern, es als Kind gespielt zu haben;)
Daher kommt übrigens auch der Begriff „Sprite“.
Tee-hee.
Toller Beitrag, es ist großartig zu sehen, wie oft Sprites verwendet werden!
Ich war der Meinung, dass Sprites am nützlichsten für Elemente mit unterschiedlichen Zuständen (aktiv, Hover, besucht) usw. sind. Ich hatte keine Ahnung, dass Leute diese Technik für die Mehrheit ihrer kleinen Layout-Elemente verwenden können und auch tun.
Tolle Sammlung.
Liking the Warsprite & Prince of Persia, das Prince-Bild hat wahrscheinlich viel Zeit gekostet. Und dann gibt es noch meines, das erste ;) , ich wünschte, ich hätte das Buch gewinnen können :D
Ich muss zustimmen, das Prince of Persia-Bild ist mein Favorit... Ich glaube, das liegt daran, dass es so schöne Erinnerungen weckt, obwohl ich nicht weiß, warum, da ich im Spiel schlecht war.
Sie sehen aber alle gut aus.
Bitte teilen Sie die Website mit, auf der wir dieses 'Prince of Persia' tatsächlich in Gebrauch sehen können. Das sieht großartig aus.
Sprites sind wirklich cool, wenn jemand meinen überprüfen möchte: http://indiepaper.com/images/indiepaper2/container_bg.png
Auf jeden Fall eine gute Idee für einen Wettbewerb (obwohl ich ihn nicht im Index gesehen habe, wurde er woanders gepostet?)
Sprites sind sicherlich cool... und scheinen sich definitiv weiterentwickelt zu haben!
Aber hier ist meine Frage: Wie zum Teufel erstellt/erinnert/kontrolliert man (einfach?) die notwendige Positionierung, wenn man einen Sprite wie diese erstellt?
Ich habe schon genug Mühe mit einem einfachen 2- oder 3-Zustands-Sprite für einen Button-Mouseover... Ich kann mir nicht vorstellen, die Positionierung dafür schnell/einfach einrichten zu können!!!! =:O
Mit einem Programm wie Photoshop ist es nicht so schwer. Sie können jeden Teil des Sprites leicht ändern, solange Sie ihn nicht stark bewegen, und Ihr CSS sollte sauber geschrieben sein, um jeden Teil davon anzuzeigen.
Meistens ordnen Sie Ihren Sprite nicht neu an, es sei denn, Sie überarbeiten einen Teil Ihrer Website. Dann müssten Sie die Zustände ziemlich neu finden. Ich benutze meine eigenen Techniken (mit Photoshop-Lineal, Zuschneiden), um die Koordinaten zu finden, aber um es pixelgenau zu machen, benutze ich auch das Web-Entwickler-Werkzeug und die Bearbeitungsfunktion für CSS.
Manchmal finde ich es nützlich, Firebug zu verwenden und das Element mit dem Hintergrund zu inspizieren. Dann können Sie auf den Pixelwert klicken und die Pfeiltasten (nach oben oder unten) verwenden, um den Wert zu ändern.
Danke, dass Sie meinen mit aufgenommen haben, Chris!
Jemand sollte eine Seite ähnlich wie CSS Gallery für uns Sprite-Nerds erstellen.
Perfekt!
Wenn die URLs enthalten wären, von denen sie stammen, wäre es besser~
Schön...
Weiß jemand, ob mehr horizontale (breitere) Sprites effizienter sind als vertikale (tiefere) Sprites? Gibt es Vorteile der einen über die andere?
Ich glaube nicht, dass es eine Rolle spielt. Pixel sind Pixel, in jede Richtung.
Vielleicht ist es offensichtlich, aber gehen Sie nicht in beide Richtungen. Versuchen Sie, so viel wie möglich auf so wenig Fläche wie möglich zu packen. Wirklich breit und wirklich hoch zu gehen und leeren Raum zu lassen, ist kontraproduktiv.
Es war wirklich cool, die WAR-Navigationsbuttons, die ich erstellt habe, hier featured zu sehen. Danke!
Danke, das ist es, wonach ich gesucht habe.
Ich habe am Freitag meinen ersten Sprite gemacht und bin total begeistert, sie von nun an für alle meine Websites zu verwenden :-)
VERKAUFE MAINE AN KANADA.
HAHA
Großartige Arbeit.
Wow, schöne Kollektion von Sprites :D