炫耀你的精灵图！

Avatar of Chris Coyier
Chris Coyier 于

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度！

我昨天刚更新了我旧的 CSS 精灵图 文章，我想让大家分享他们自己创建的精灵图会很有趣。 我们也来快速举办一个赠品活动吧！

我完成了 Dan Cederholm 的 Handcrafted CSS 书籍，非常好。 我的书现在当然有点旧了，但我认为为什么不把它送给其他人，让他们也能从中学习呢。 它也是附带 DVD 视频的版本。 我会随机选择一个人送给他/她。

参与方式： 只需在下面的评论中留下一个链接，直接链接到您的精灵图图像。 如果您从未创建过精灵图，请在网络上找到一个有趣的精灵图并直接链接到它。 确保在评论时留下您的真实电子邮件，以便我可以在您获胜时与您联系。 我将在下周选出一位获胜者。

如果您正在考虑尝试在其他地方找到一个精灵图，但不知道如何操作，我建议您使用 Firebug。 打开它，然后在网站上四处移动鼠标，尝试查找使用背景图像的内容。 将鼠标悬停在背景图像的 URL 路径上，看看是否还有更多内容。 这是我的一个 精灵图 在 Firebug 中的样子

嘘！ 创建一个 DigitalOcean 帐户并获得 200 美元的免费额度 用于基于云的托管和服务。

评论

  1. Philipp Schmitt
    评论永久链接#

    Facebook 精灵图。 所有内容都在一个地方；)

    https://#/rsrc.php/z136G/hash/3ay18ob4.png

    • Ryan
      评论永久链接#

      哈哈，真有趣

    • euan
      评论永久链接#

      这个必须获胜

    • Thad Bloom
      评论永久链接#

      这就像我下面发布的其中一个。 我一直在考虑制作某种利用这种精灵图的疯狂模板。

  2. Daniel Groves
    评论永久链接#

    这场比赛什么时候结束？
    我现在正在做一个新的网站，我计划在其中使用精灵图。 我的意思是，达到整个网站只有一个图像的程度，我很乐意用它来参加比赛。
    该网站应该在明天晚上准备好。

  3. Debasish panda
    评论永久链接#

    我这里有一个。

    http://debasish.org/demo/traffikwise/assets/sprite-main.png

    尚未完成，正在努力中 :)

  4. Vincent Re
    评论永久链接#

    Google 有一个很好的精灵图 - http://www.google.com/images/nav_logo7.png

  5. Ken
    评论永久链接#

    Chris - 我按照你的屏幕截图从头开始制作了这个 WP 网站（使用 Starkers）
    http://stevebrodner.com/
    我之前也从未做过精灵图，所以这也是第一次。
    http://stevebrodner.com/images/menu_art.jpg
    （我想在这里评论一下 Steve 是多么杰出的艺术家、插画家和政治评论员，但我想这不是这次讨论的重点）
    通常我喜欢使用 html 进行导航，但在为 Steve 设计独特风格时，我想使用他的字体。
    Ken
    PS 希望你在今天 Favre/Vikes 没有获胜，但你心爱的 Pack 获胜后非常开心。

  6. Catalin
    评论永久链接#

    Dragon 交互式导航精灵图

    http://dragoninteractive.com/lib/i/navigation/sprite.jpg

  7. Andi
    评论永久链接#

    不是图像，而是一个非常好的在线创建精灵图的工具。

    http://spriteme.org/

    • Trever
      评论永久链接#

      Andi，
      这很酷。 我一直都是手动构建它们，然后进行一些试错。

    • David
      评论永久链接#

      尝试在 Digg.com 上使用它……节省了 6 个请求和 77k，并且生成的精灵图非常令人印象深刻……

  9. Ian Storm Taylor
    评论永久链接#

    这是我之前的一个旧设计中的精灵图

    http://stormink.net/images/STORMINKspriteOLD.png

  10. Jon Hunt
    评论永久链接#

    Apple 菜单精灵图
    http://images.apple.com/global/nav/images/globalnavbg.png

  11. Eddie
    评论永久链接#

    来自 Yahoo! Sports 网站

    http://l.yimg.com/a/lib/uh/15/sprites/sports_gray-1.0.0.png

  12. Atom
    评论永久链接#

    INSight 设计大会导航精灵图

    http://www.insightdesignconference.com/img/bg_navigation.png

  14. René
    评论永久链接#

    这是我的作品集网站上社交媒体链接的一个小精灵图。

    http://www.renepolitiek.nl/img/social-media-logos.png

  15. tommy
    评论永久链接#

    我为 客户 使用 WP 制作的简单的社交网络精灵图
    http://www.studio8.net/wp-content/themes/studio8dotnet/images/socialbuttons.png

  16. Guillaume
    评论永久链接#

    我不用这个参加比赛，但是
    jQuery UI ThemeRoller 精灵图 真的很好。

  18. Melissa
    评论永久链接#

    我以为亚马逊以前有一个比这个更强大的精灵图，但它仍然很不错！

    http://g-ecx.images-amazon.com/images/G/01/gno/images/orangeBlue/navPackedSprites_v12._V222883957_.png

  19. Paul Randall
    评论永久链接#

    来自 Yahoo 的这个精灵图非常令人印象深刻：http://farm4.static.flickr.com/3548/3366898583_e6a4c551ec_o.png

  20. Guy
    评论永久链接#

    来自西海岸的问候。 这是我的个人作品集。 从昨天开始在我的动态下拉导航中使用精灵图。 加载速度提高了 7 倍……太棒了……在阅读你的文章之前，我甚至不知道什么是精灵图。 谢谢。 :)

    http://www.guylepage.info/images/work.png

  21. Lee Kowalkowski
    评论永久链接#

    我的在 http://www.adeledecaso.com/style/tab.png，它为 http://www.adeledecaso.com 制作标签。 它结合使用重复和非重复部分在简单的 UL 上进行标签导航。

  22. curtisblackwell
    评论永久链接#

    我的导航栏使用精灵图。

    http://curtisblackwell.com/

  23. Pete Haughie
    评论永久链接#

    http://www.cyclingnews.com/i/sprite.png

    是的，是我的。 但它不是整个网站。
    不过我不再为该公司工作了。

  24. Pedro D.
    评论永久链接#

    Yahoo! 印度 http://l.yimg.com/t/img/1226894530icons_sprite3.gif
    Yahoo! 购物 http://l.yimg.com/a/i/us/sh/topshop08/sprite_040208_8bit.png

    看起来所有 Yahoo! 的网站都使用精灵图……

  25. Peer Pressure Creative
    评论永久链接#

    这是来自http://www.peerpressurecreative.com 的精灵图。

    http://www.peerpressurecreative.com/images/sprite.png

  26. Hamza Oza
    评论永久链接#

    http://images.apple.com/global/nav/images/globalnavbg.png

    它属于苹果，但这是我第一次了解这个概念的地方。

  27. Marco
    评论永久链接#

    我在我的网站上使用了几个精灵图。这是一个很酷的，带有“悬停”状态和3个按钮。
    http://www.marcofolio.net/templates/marcofolio2/images/tech-icons.png

    干得好，Chris！

  28. Dungol
    评论永久链接#

    Thomas Olausson 的博客
    http://www.ultravoid.com/wordpress/?p=101

  29. Paul Armstrong
    评论永久链接#

    这是我网站上所有杂项图标之一。
    icons.png

  32. Shut Pavel
    评论永久链接#

    我来自http://turgrad.by（头部导航）的精灵图。

    http://turgrad.by/sites/all/themes/turgrad/img/hdr-bgs.png

  33. Grant
    评论永久链接#

    Alice Cooper 的导航
    http://www.alicecooper.com/images/template/ALI_nav.png

  34. Jesse
    评论永久链接#

    YouTube 的大型精灵图
    http://s.ytimg.com/yt/img/master-vfl125983.png

  35. Pedro Ivo
    评论永久链接#

    来自战锤Online 网站的一个不错的精灵图

    – http://mythicmktg.fileburst.com/war/us/en/global/images/new-nav_matrix.gif

    • Liam Goodacre
      评论永久链接#

      是不是有点太多了，它可以缩小到2/5的大小。

  36. Gilbert
    评论永久链接#

    这是我为makesometime.com 制作的精灵图。

    http://makesometime.com/system/application/views/images/Sprite.png

  37. Mike Sawicki
    评论永久链接#

    来自我管理的一个网站。

    http://www.dublin.oh.us/recreation/images/all-icons.png

  38. Gargron
    评论永久链接#

    我的Anime² 博客标题使用了一个精灵图。（我们的标语是“我们爱女仆”，我们实际上属于动画博客圈而不是设计博客圈，所以不要奇怪，这解释了我们的吉祥物 ^^）

    http://anime2.kokidokom.net/wp-content/themes/whitespacedtypography/images/header-maid-mizugi.png

  39. PeTiNgA
    评论永久链接#

    这个来自 SAPO 首页，用于背景。

    http://h.s.sl.pt/imgs/imgs.gif

  40. A.Fruit
    评论永久链接#

    我设计/开发的这个网站在导航中使用了精灵图。

    http://www.thelyndale.com/wp-content/themes/the-lyndale/images/btn-map.jpg

    http://www.thelyndale.com

  42. A.Fruit
    评论永久链接#

    糟糕，那是错误的图片[上面]。
    这是它

    http://www.thelyndale.com/wp-content/themes/the-lyndale/images/btns-nav.jpg

  43. Baylor Rae'
    评论永久链接#

    Tutorial9 为他们的导航提供了一个简洁的精灵图。
    http://tutorial9.s3.amazonaws.com/themes/stylesheets/images/tab-sprites.jpg

    CSS-Tricks 有一个很棒的精灵图。
    http://images.css-tricks.com/theme-4/css-tricks.png

    Chris Spooner 的精灵图涵盖了一些订阅方法和杂项项目。
    http://blogspoon.s3.amazonaws.com/wp-content/themes/SpoonGraphics_V4/images/sprite.png

    最后，苹果的导航精灵图。
    http://images.apple.com/global/nav/images/globalnavbg.png

    • Baylor Rae'
      评论永久链接#

      对不起，我之前的评论看起来像一个链接列表，标题描述得很差，但没有简单的方法可以让几个精灵图的列表变得有趣。

  44. Frank Ronny Larsen
    评论永久链接#

    之前为我们支持者页面体育场概览制作了这个。
    http://www.isberget.no/uploads/images/stadionkart/all.jpg

    用于 http://www.isberget.no/tromso-il/alfheim

  45. J. Albert Bowden II
    评论永久链接#

    http://borkweb.com/playground/sprite/sprite_sheets/running_megaman.png
    不是我的，但这个洛克人精灵图必须是有史以来最好的之一。你可以在此处看到它在游戏中。
    http://borkweb.com/playground/sprite/sprite.html
    洛克人万岁！
    干杯，
    albert

  46. Ricardo Zea
    评论永久链接#

    以下是我目前正在处理的两个网站的三个图像精灵图，但网站尚未上线。

    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

  47. Christian Ross
    评论永久链接#

    一位房地产客户的网站：http://www.soprisrealty.com/images/button-sprite.png

  48. Andy Kleeman
    评论永久链接#

    不是最令人兴奋的，但为了获胜，这里有一个我用于网站的… http://www.seven-acres.co.uk/images/menuSprite.png

  51. David Rojas
    评论永久链接#

    来自我网站头部导航的精灵图：http://www.davidrojas.net/wp-content/themes/davidrojasv2/images/menu.png

  54. Grant Z
    评论永久链接#

    这是我的：http://media.lib.byu.edu/images/hbll/li_buttons.jpg。我为我工作的图书馆的一个 WordPress 网站制作的精灵图。

  55. gooflett
    评论永久链接#

    满足你的渴望！– 精灵图

  56. Jesse
    评论永久链接#

    这是我作品集网站上的一张小图：http://www.racinewebworks.com/img/icons/sprite.png

  57. Tim Wright
    评论永久链接#

    新的精灵图：http://www.csskarma.com/img/sprite.jpg

  58. euan
    评论永久链接#

    MySpace 搜索精灵图

    那里有很多。

  59. Mary H.
    评论永久链接#

    这是我在一个网站上（仍在开发中）使用的一个简单的：http://advantage-media.com/newsite/images/nav.gif。

  60. Eric B.
    评论永久链接#

    我还没有太多使用 CSS 精灵图，但以下是我用于一些图标的那些。
    http://fwebde.com/wp-content/themes/fwebde2/images/icons.png

  61. Peter Mathes
    评论永久链接#

    Google.cn 在首页有一个不错的动画。
    http://www.google.cn/intl/zh-CN/images/toolbar_animation_20090618.png

  62. Dave Vogler
    评论永久链接#

    好主意。

    这是我的

    http://www.sparkhouse.com/sites/all/themes/sparkzen/images/nav_pri_bg.gif

    我期待着在这里看到一个好的列表。

  65. Matt
    评论的永久链接#

    我正在开发的新博客设计的第一个（也是目前为止唯一一个）雪碧图尝试

    http://matte.ws/wp-content/themes/two/images/icons-black.jpg

    还没有尝试过像 Facebook 雪碧图那样复杂的东西，但在即将到来的项目中尝试一下会很有趣

  66. Adam
    评论的永久链接#

    这是我为一个 JavaScript 倒计时计时器创建的雪碧图，效果非常好！

    http://www.quinnipiacbobcats.com/fls/17500/madness/images/countdown_sprite.gif

  67. John Briggs
    评论的永久链接#

    我有两个
    1. http://stabilitynetworks.valitics.com/images/cssimg/4ways_spr.png
    2. http://youasparent.com/images/cssimg/nav_sprite.png

    这两个都是我自己的，第一个正在启动过程中，第二个已经在上线的网站上使用了。

  70. koew
    评论的永久链接#

    来自我（过时的）博客设计

    http://koew.net/blog/wp-content/themes/AllPraiseToCoffee/images/aptc_sprite_03.png

    注意我为好奇的用户专门制作的彩蛋！;)

  72. Martin Lenngren
    评论的永久链接#

    这是我为瑞典贸易协会制作的一个http://www.svenskhandel.se/styles/images/spritesmap.png

    我真的很想得到那本书！

  73. Alex
    评论的永久链接#

    这里有一个不错的。不过不是我的。http://dragoninteractive.com/lib/i/navigation/sprite.jpg

  74. Brian Scroggins
    评论的永久链接#

    我们仍在开发的一个规范网站的导航。

    http://www.kandsadv.com/stellar/IMAGES/navigationBar.jpg

  75. Soma
    评论的永久链接#

    来自Jquery Theme Roller

    Themeroller 雪碧图

    我为一个网站做了一个小雪碧图

    http://www.schweizer-illustrierte.ch/_img/media_buttons_all2.gif

  77. Cesar Figueroa
    评论的永久链接#

    这是我制作的一个下载雪碧图，它非常简单，但可以完成工作。

    http://cssaid.com/images/download.png

  78. Dan O
    评论的永久链接#

    我通过阅读这篇博客了解了雪碧图。这是一张简单的雪碧图图像，可以创建简洁的按钮效果
    http://dano-dna.com/images/portfolio-sprites-dimaging.gif

  79. Forrest
    评论的永久链接#

    我为这个客户创建了几个

    http://waterscapespro.com/

  80. simto77
    评论的永久链接#

    我的第一个CSS雪碧图

  81. simto77
    评论的永久链接#

    它在这里
    http://www.figurinesthedetour.dk

  82. Duane Neveu
    评论的永久链接#

    这个在我的一个网站的页脚中使用，用于加拿大安大略省的 Smoke & Spice Southern Barbeque！

    它不是一个非常复杂的雪碧图，但它完全是我自己的……哈哈。

    http://smokenspice.com/images/partners.png

    用克里斯的话来说，这个雪碧图是“网格化的”，因为我保持了过渡图片的对齐，这样 CSS 中需要更改的内容就更少了。

  83. Whitney Luna
    评论的永久链接#

    这是一个简单的：http://www.getascent.com/app/views/site/images/bg-images.png

    用于此 Scentsy 网站：http://www.GetaScent.com

  84. Leif Miltenberger
    评论的永久链接#

    我在 http://www.driftwoodbeer.com 页脚的 jQuery 滑动轮播中使用了雪碧图。这是雪碧图图像：http://driftwoodbeer.com/wp-content/themes/driftwood2/images/jcarousel-sprite.png

  85. Kyle
    评论的永久链接#

    我最喜欢的雪碧图:

    Mobile Me、艺电 和 Fantasy Interactive。

  86. webbografico
    评论的永久链接#

    这是来自 whitehouse.gov 主导航的雪碧图

    http://www.whitehouse.gov/sites/default/themes/whitehouse/img/nav-sprite.gif

  87. Chris
    评论的永久链接#

    这是我为导航设计设置的一个雪碧图
    http://www.24-7ministries.org/images/buttons.gif

    您可以在此处右侧尝试一下
    http://www.24-7ministries.org/

  88. d'sixTein
    评论的永久链接#

    我的网站目前正在建设中，但我对参加这个比赛很感兴趣。我有一个雪碧图，请查看一下http://www.sixtein.web.id/images/images.gif

    顺便说一句，我道歉，我的英语不太好xD

  90. Denis
    评论的永久链接#

    我在我的网站上使用了一个非常简单的包含所有图标的雪碧图
    http://sokolov.cc/img/iconsWithLightWorld.png

  91. Mountain Pixel
    评论的永久链接#

    这是来自新 CNN.com 设计的雪碧图

    http://i.cdn.turner.com/cnn/.element/img/3.0/global/buttons/Sprite_BT_master.gif

  92. Steve
    评论的永久链接#

    我设置了一个网站，该网站使用 2 个雪碧图进行顶部和左侧列导航。阅读本文后，我将把它们合并在一起
    http://totos.com/

    图片
    http://totos.com/images/navmenu.png
    http://totos.com/images/locations.png

  93. Matt
    评论的永久链接#

    这是来自[H]ard|OCP的一个

    http://www.hardocp.com/images/sprite.png

  94. Sebastaan Stok
    评论的永久链接#

    谷歌：http://www.google.nl/images/nav_logo7.png

    还有一个是我为我的一个客户制作的
    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

    顺便说一下，该网站是荷兰语的 :)

    我的网站目前不使用雪碧图，但我计划在下一个版本中使用。

  95. Cameron Baney
    评论的永久链接#

    来自 Made Me LOL 的雪碧图
    http://www.mademelol.net/images/sprites.png

    来自我作品集的雪碧图
    http://www.cameronbaney.com/wp-content/themes/cameronbaney/images/sprite.png

  96. Will
    评论的永久链接#

    太棒了，我从未想过要看看。

  98. Montana Flynn
    评论永久链接#

    我为一个客户制作了这个

    http://www.discountcapital.com/css/img/SoCAL.jpg

  99. Tommy
    评论永久链接#

    我刚刚更新了我80/90年代博客Saturday Morning Central的CSS，所以它可能是比赛中更丰富多彩/令人讨厌的精灵之一。 :)

    http://saturdaymorningcentral.com/wp-content/themes/smc3/images/smc.png

  100. Dylan
    评论永久链接#

    喜欢Tim Van Damme网站上的这个：http://maxvoltar.com/img/footer.png。

  102. John Campbell
    评论永久链接#

    哎呀，我觉得我在这个评论上落后太多了！

    这是我用于DesignBump的精灵
    http://designbump.com/sites/all/themes/designbumpv3/img/imagebase.png

    我一直在尝试不断向其中添加图像以提高网站的性能。

    我也非常喜欢Sharenator.com使用的那个
    http://www.sharenator.com/images/s.gif

  103. Colin
    评论永久链接#

    Invoice Machine 的漂亮精灵

    http://assets.invoicemachine.com/images/application.png

  104. Andrea
    评论永久链接#

    嘿，Chris，

    继续你的好工作……

    http://www.myvouchercodes.co.uk/public/images/tab-sprites.jpg

  105. John Faulds
    评论永久链接#

    我最近做的一些

    http://www.sechiropractic.com.au/images/sprites.png
    http://www.publishfirst.org/lyc/images/nav.png

    如果我曾经对导航栏使用图像替换，我总是使用单个图像，但我只在几次将此进一步扩展以包含更多网站图像，但将来会利用http://spriteme.org/来更多地这样做。

  106. Seth
    评论永久链接#

    我在我正在为一所大学柔术俱乐部制作的网站菜单中使用了精灵。感谢精彩的播客……我就是在那里学到的。

    http://www.adaltadesigns.com/testvideo/index.html

  107. Scott block
    评论永久链接#

    绝对不是最好的，但这是我的。来自我的作品集，http://www.scottblock.com，用于图标。

    http://scottblock.com/icons.gif

  108. Chris Muench
    评论永久链接#

    这是我在为 LogicBUY 做的一个网站上使用的。
    http://www.logicbuy.com/images/nav.jpg

    我在网站上使用了更多，但这是主要的。

  110. David K.
    评论永久链接#

    我有一个非常大的，用于一个有家具网店的网站

    http://www.asko-nabytek.cz/

    主精灵在这里，还有两个但很小

    http://www.asko-nabytek.cz/skin/frontend/default/asko/design.png

    全部手工制作，未使用生成器。

  111. Dusan
    评论永久链接#

    嗯……我可以发布这个吗？
    http://cdn-www.pornhub.com/images/mega-bgv26.png
    :)

  112. webbografico
    评论永久链接#

    这是来自whitehouse.org主导航的一个

    http://www.whitehouse.gov/sites/default/themes/whitehouse/img/nav-sprite.gif

  113. Steve
    评论永久链接#

    遗憾的是我还没有制作自己的，只是昨天阅读了你的文章和教程，所以还在努力学习中

    然而，大约一年前我欣赏过这个，并认为这是一个好主意，所以我将分享这个代替

    http://images.play.com/SiteCSS/Play/Live1/2009102202/css/sprites/core-site.gif

  114. Carlos
    评论永久链接#

    哦，是的，用精灵装饰一下YO！

    这是来自我和我的伙伴们做的摄影机构，但我做了网站，他们拍照

    精灵：http://acaimages.com/gfx/navBar.jpg

  115. George
    评论永久链接#

    你可以看到精灵的最佳网站是http://www.godaddy.com，它使网站速度非常快，尽管它有很多内容。

  116. Peter Wilson
    评论永久链接#

    这是我为客户网站上的导航做的一个。左侧的文字是白色的，所以在白色背景上看起来很奇怪

    http://www.juliamorris.com/09site/wp-content/themes/juliamorris/assets/child/i/ir/nav-sprites-24-fs8.png

  117. stygyan
    评论永久链接#

    我为一个闪屏页面做了一个。哦，是的，一个闪屏页面。老板坚持要它，好吧，他是付钱的那个。

    它就在那里

    http://www.systemsevillaeste.com/_img/splash.png

  118. Odin Dutton
    评论永久链接#

    哇，很棒的奖品！好主意。

    我见过的最令人印象深刻的精灵是Florida Flourish上正在使用的那个。

    它可以在这里看到，尺寸高达1043x697px

  119. Mark Sinkinson
    评论永久链接#

    这是我的http://www.msinkinson.co.uk/images/dates.png

  120. leo rapirap
    评论永久链接#

    以前从未尝试过CSS精灵，但肯定会学习并在未来的项目中使用它。

  121. David Powell
    评论永久链接#

    我为我为艺术家制作的网站使用了两个，一个用于他的顶部菜单，一个用于他的主菜单

    顶部菜单仅为非活动状态和悬停状态
    http://matthughesart.com/indeximg/top_nav.png

    侧边菜单有非活动、悬停和活动状态（活动状态为白色）
    http://matthughesart.com/indeximg/main_menu.png

  122. Darren
    评论永久链接#

    好建议，绝对喜欢这种方法。

    在TV1.rtp.pt上发现来自这些

  124. Jonny
    评论永久链接#

    http://www.pointconceptsurf.com/gallery.html

    精灵菜单栏！

  125. Graystatic
    评论永久链接#

    精灵用于我最近制作的一个作品集网站的导航
    creativeinabox.com
    http://creativeinabox.com/images/menu-imgs-hover.png

  126. Nithin Bekal
    评论永久链接#

    精灵用于页脚中的 Twitter 和 RSS 链接。

    http://www.fedena.com/images/follow.png

  127. Eric
    评论永久链接#

    这是我的第一个，按照你的指南创建的，Chris！

    http://spectrum-massage.com/newsite/wp-content/themes/spectrum/images/menubar.png

    Eric

  130. dp
    评论永久链接#

    唉，我没有任何个人作品可以展示，但我确实意识到它们在一个我每天都盯着看的网站中派上了用场。/ 的粉丝认出这个吗？当然，这些将是各个帖子的类别图标。

  131. Marc
    评论永久链接#

    有用的链接图标

    http://www.uifreak.com/media/583/spritesmall.png

    网站上的 CSS。

  132. Dawid
    评论永久链接#

    实际上它只是菜单。但我 5 年前就用过它了。早在所有这些“精灵狂潮”之前 :)

    http://modelarch.pl/img/menu.png

  133. Thad Bloom
    评论永久链接#

    希望还没有人说过这个，但我在BlackMoon Designs网站上找到了这个。

    http://blackmoondev.com/wp-content/themes/blackmoon/img/top-bg.jpg

  134. Matthew Webb
    评论永久链接#

    一个非常酷的精灵图，即使是我自己这么说。虽然配套的网站不是我最好的作品。
    http://connectionselectrical.co.uk/style/light-trans.png

  135. Sumeet Chawla
    评论永久链接#

    这个精灵图我在AOL.com上找到的。它是一个非常长的垂直精灵图 http://portal.aolcdn.com/p/_v11/css/blue/blue_skin.png

    除此之外，我还发现这个CSS精灵图被用来在菜单上创建很棒的悬停效果。很久以前我在CSS-Tricks论坛上就知道了这个精灵图。它属于 http://www.gilleardmarketing.com，精灵图是 http://www.gilleardmarketing.com/images/topnavbg.png

    最后是我的第一个CSS精灵图 :) http://www.code-pal.com/wp-content/themes/codepal/images/twitter.jpg

  137. Jay Welsh
    评论永久链接#

    嗨，Chris，
    我认为Apple用于 iWork.com 和 Me.com 的精灵图非常详细且有趣，这仅仅表明了 Apple 非常重视可用性和设计。

    它们在这里
    iWork.com 精灵图
    Me.com 精灵图

  138. Colo
    评论永久链接#

    这也是一个小精灵图，但很有名吗？

  139. Ben
    评论永久链接#

    我以前没意识到人们会这样使用精灵图，我只用它们来创建按钮的悬停和激活状态。但这确实有道理，因为服务器请求更少了，所以我想页面加载速度会更快。

  140. Sunny Singh
    评论永久链接#

    我有两个非常不错的，我用在我的主要网站布局中。我对我的精灵图非常自豪，哈哈。

    http://cdn.myunv.com/img/resource/sitewide/b6/assets.sprite.png

    http://cdn.myunv.com/img/resource/homepage/sidebar-tabbed-sprite.png

  142. Alistair
    评论永久链接#

    http://pixelcoder.co.uk/clients/tragic-town/images/ttSprite.png

    网站在非标准浏览器中有点损坏 :(

  143. Dani
    评论永久链接#

    我的很简单，但它是我用过的最喜欢的。给我的链接带来真正的水波效果

    http://euphoriastudio.freehostia.com/images/link.png

    实际应用： http://www.euphoria-studio.com

  144. Taeo
    评论永久链接#

    精灵图本身的简洁性没有什么特别的，但它的实现和浏览器兼容性让我感到自豪。

    http://publishthequest.com/sites/publishthequest/images/mainnav_sprite.png

    实现过程中，针对IE6的z-index和透明png问题进行了一些调整
    http://publishthequest.com/

    从我的角度来看，关于精灵图的旁注…

    如果使用得当，它们可以非常棒。它们可以限制连接/下载，并可以减少页面加载时间和预加载的需求（我们都为这些像素完美的创作感到自豪）。

    关于使用它们的炒作可能会被严重误解，并且为了使用“精灵图”而实施不当。

    在生产环境中实施之前，请考虑解决方案的实施、使用和成本效益。但要享受探索各种可能性带来的乐趣。

    对于最佳实践的演讲，我表示歉意。我认为在学习如何做某事时，思考为什么要做这件事至关重要。

  145. Michiel
    评论永久链接#

    我也使用精灵图进行导航，在这个我为一个神话摇滚乐队创建的网站上；

    http://www.kingfishersky.com/

  147. Peter
    评论永久链接#

    最新的一个

    http://www.back2.co.uk/images/bg_sprites.jpg

  148. hugo
    评论永久链接#

    我制作了这个（带白色背景） http://www.pilottti.fr/squelettes/img/sprites.png

  149. Mathieu
    评论永久链接#

    Twenga css 精灵图

    :)

  150. Chad Smith
    评论永久链接#

    我的很简单
    http://www.30threedesign.com/img/navSprite.png

    我还有一个视差效果，如果你抓住右下角并来回调整大小，页眉中的撕裂效果会移动。

  151. Think Bohemian
    评论永久链接#

    http://whyspam.me/images/WhyLogo.png

    当图片缓慢淡入而不是立即替换第一张图片时，效果看起来很棒。

  152. elmalak
    评论永久链接#

    嗨，
    我刚刚为一个WordPress网站制作了一个。

    http://themustardplug.com/child/wp-content/themes/childaid/images/logos-sprite.png

    谢谢，Chris。

    elmalak

  153. Marta
    评论永久链接#

    我制作了一些，但它们都非常基础，不太有趣（它们中的大多数遵循经典方案——菜单的所有元素都处于三种不同的状态，就这么简单）。但是，我前几天找到了这个，我会称之为“精灵图狂潮”或类似的东西…

    http://www.ulmanen.fi/fugue/all_shadowless_compact.png

    在 这里 找到，此图片是允许您根据Fugue图标集创建css精灵图的工具的一部分。乍一看是图标过载——但无论如何都很有用 :)

  154. Jason
    评论永久链接#

    看来我迟到了。但我为我朋友的多米诺骨牌网站制作了一个。他用JavaScript编写了所有代码。

    精灵图
    http://www.arisbartee.com/bigsix/images/bone-sprites.png

    多米诺骨牌游戏
    http://bigsixtotheboard.com/

  156. António Manuel Cardoso
    评论永久链接#

    noticias.rtp.pt 和 desporto.rtp.pt 使用这个 http://img.rtp.pt/noticias/images/ImgNoticias_n_repeat.jpg 。它很大 :)

  157. Richard
    评论永久链接#

    我整天都在使用Google阅读器，所以这个对我来说很明显： http://www.google.com/reader/ui/1454282699-lhn-sprite.png

    我考虑过在我的网站（mexicometro.org；是的，丑陋得要命；我不是设计师，但我正在自学css、php等），但我没有那么多背景图片，所以这样做没有意义。

  158. Anthony
    评论永久链接#

    这是我的css精灵图的链接

    http://www.trewknowledge.com/images/global.png

    很简单，但网站也很简单 :)

  159. mansur
    评论永久链接#

    我尝试为我的博客制作一个简单的精灵图… 上一篇-下一篇导航…

    http://4.bp.blogspot.com/_cJm1dkHdSEo/SunTQL_om2I/AAAAAAAAA3Q/LZ_KIWhZjYQ/s1600/randomize.gif

    :)

  160. paul
    评论永久链接#

    嗨，

    我在我的作品集中使用了简单的精灵图作为我的主要导航
    http://sideradesign.com

  162. Jorge
    评论永久链接#

    雅虎搜索框非常棒。 http://m.www.yahoo.com/。精灵图在这里 http://d.yimg.com/a/i/ww/met/th/slate/sprite_masthead_slate_062609.png

  163. Bryce
    评论永久链接#

    我当时正在做一个城市艺术项目，需要一个涂鸦风格的字体来作为主导航;

    城市艺术精灵图

  164. Farid Hadi
    评论永久链接#

    哈哈 :) 这看起来很有趣 :)

    这是我之前为一个教程创建的精灵图。

    http://www.faridhadi.com/demo/slide-your-contact-form-in-with-style/images/contact-sprite.gif

  167. Matteo
    评论永久链接#

    在Publico.es，我们有一个很大的精灵图，但与所有分离的图像相比，它仍然非常轻量级…

    http://www.publico.es/v2/css/img/sprite.png

  168. Skilldrick
    评论永久链接#

    我目前正在制作一个JavaScript扫雷游戏 - 这是我的精灵图：http://www.skilldrick.co.uk/minesweeper/images/mine-sprite.png

  169. Brad
    评论永久链接#

    我们的标题精灵图

    http://www.primestudiosllc.com/images/titles.png

  170. Chad Ritchie
    评论永久链接#

    我的网站导航使用精灵图。
    http://www.chadritchie.net/

  172. Heme
    评论永久链接#

    Picasa 有一个非常复杂的精灵图
    h
    http://lh4.ggpht.com/s/v/56.42/img/lh_sprite.gif

  173. Davis
    评论永久链接#

    由于我从未自己创建过精灵图，因此我将从搜索巨头那里借用一个 :)

    http://www.google.com/images/nav_logo7.png

    顺便问一下，您能否将书运送到印度？

  174. visaap
    评论永久链接#

    大约一个月前，我一直在为我工作的公司制作精灵图。当一个网站上线并且该网站上使用的几乎所有图像都位于一个精灵图中时，它会带来一种奇妙的感觉 :)
    这是其中一个用于peterrdevries.nl 的精灵图
    http://www.peterrdevries.nl/wp-content/themes/peterrdevries.nl/pix/global/sprite-peter.png

  175. John
    评论永久链接#

    这是我为比赛准备的一个精灵图。
    http://www.greenbayaja.org//images/navbarsprite1.gif

  176. Jesper
    评论永久链接#

    我大约一年前制作了这个精灵图。大约50个HTTP请求减少到1个（约80 KB）

    http://admanager.dba.dk/css/images/masterImage.png

  177. Eliazer
    评论永久链接#

    定位它们真的很有趣！

    http://ebraun.adorama.com/pix/images/adoramaPixOrderingBG.png

  178. Ruana V
    评论永久链接#

    我是一位来自欧洲奥地利，有抱负（但尚未赚钱）的女性网页设计师。克里斯，我定期阅读你的博客，以及丹撰写的文章（喜欢Simple Bits）。

    因此，我确信这本书对我来说将非常有用！从事这项工作的女性并不多 - 远非如此 - 而且在奥地利也更少（如果有的话，很多人很难阅读用英语写的书）。我希望你选择支持“我们”（也就是我;-））。

    爱，Ruana

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。

© 2024 . All rights reserved.