今日 Google 塗鴉:CSS Sprites 的原理

标签: 今日 google css | 发表时间:2011-05-11 17:53 | 作者:bobo 青蛙小子 
出处:http://www.techbang.com.tw/
蝦米!今天都過了一大半還來講解Google塗鴉衝蝦米?很多人可能都已經欣賞完今天的瑪莎葛蘭姆117歲誕辰動畫,關於她為什麼會動起來,其實並不是用以往常見的GIF動畫製成,背後也有一些好玩的背景知識,且聽我們娓娓道來:

如果我們以滑鼠右鍵來點選瑪莎女士的圖片,找到的只是一張她靜止不動的「起手式」而已,你得進一步查看原始碼,或者透過加裝Firebug擴充套件的Firefox瀏覽器(Chrome也有Firebug Lite)來找出其他的隱藏圖片,以及控制他們的程式碼。用Firebug解析會比較簡單,所以我們就用它來當小柯南。

▲在瑪莎的圖片上按右鍵>檢視圖片看看。

▲結果只有一張靜止不動的起手式,看來另有玄機。

▲安裝Firebug後,只要按右鍵>觀察元素,左下視窗就會彈出對應的原始碼。

Google首頁雖然簡潔,裡頭的原始碼也不少,透過Firebug便可直接跳到剛剛瑪莎的起手式圖片位置,這張graham11-hp-start.png的前後除了超連結的<a>標籤,再上一層還有一個<div>標籤,也就是被<div id=”hplogo”>和</div>包起來的,都是和瑪莎跳舞圖片相關的物件。

了解這一點之後,再往超連結關閉的</a>標籤往下看,會有一大串像這樣的圖片元件:

<div id="hplogo0" style="left: 307px; top: 48px; width: 88px; height: 89px; background: url("logos/2011/graham11-hp-sprite.png") no-repeat scroll 0px 0px transparent;"></div>

這些圖片從編號「hplogo0」一直遞增到了「hplogo154」,總共有155張,除了編號和其後的座標相關參數不斷微調之外,其中的「background: url("logos/2011/graham11-hp-sprite.png")」這一段是完全不變的,這是為什麼呢?把「logos/2011/graham11-hp-sprite.png」這張圖接到www.google.com網址後面,相信聰明如你一定可以馬上想到答案。

 

▲在瑪莎的圖片上按右鍵,再按「觀察元素」。

▲在起手式的圖片下方會有一大串後續的「分鏡圖」。

▲在網址列輸入www.google.com,再貼上logos/2011/graham11-hp-sprite.png就能看到隱藏版大圖(看原圖)。

發現了嗎?瑪莎跳舞的動畫,簡單的說就是把各個動作(frames)畫在同一張大圖上,再透過不同的座標和位移參數,串成一幅連環動畫而已。這時候好學的朋友舉手發問了:「為什麼不畫成一堆小圖,而是全部拼成一張呢?」這是因為你的瀏覽器每載入一張圖片,就會提出一次HTTP request,155張就是155次,在背景載入一張大圖,透過參數去變換它,會遠比傳155次request有效率得多,這樣的做法就叫做CSS Sprites。

Sprites這個字也相當有梗,喜歡研究遊戲設計的人應該會略知一二,在硬體資源有限的遊戲時代,比方說紅白機裡的瑪莉歐,會把瑪大叔所有的動作:跳躍、走路、蹲下等等拼成一張大圖,然後預先載入記憶體,再根據程式的指示秀出相關的部位。所以如果你在Google裡搜sprites,可以找到不少懷舊遊戲主角的各種姿勢圖片集,甚至有人已經幫你剪接成GIF檔,可以在論壇裡的大頭貼秀一下。

▲這是Google圖片搜尋Sprites的結果。

沒錯,這跟CSS Sprites做的事完全是異曲同工。而後期由於3D繪圖的盛行,Sprites也可以延伸解釋為將2D點陣圖片嵌入在3D場景的技術,回想一下你是不是曾經在遊戲場景裡看到一棵樹或一朵花,走近之後發現只是「紙片樹」或「紙片花」,那就是Sprites了。

當然啦,T客邦網站也有活用到Sprites的技術,你也找到了嗎?(Oops,好像完全沒提到瑪莎女士,再見)

相关 [今日 google css] 推荐:

今日 Google 塗鴉:CSS Sprites 的原理

- 青蛙小子  - T客邦
今天都過了一大半還來講解Google塗鴉衝蝦米. 用Firebug解析會比較簡單,所以我們就用它來當小柯南. ▲在瑪莎的圖片上按右鍵>檢視圖片看看. ▲結果只有一張靜止不動的起手式,看來另有玄機. ▲安裝Firebug後,只要按右鍵>觀察元素,左下視窗就會彈出對應的原始碼. Google首頁雖然簡潔,裡頭的原始碼也不少,透過Firebug便可直接跳到剛剛瑪莎的起手式圖片位置,這張graham11-hp-start.png的前後除了超連結的標籤,再上一層還有一個
標籤,也就是被
包起來的,都是和瑪莎跳舞圖片相關的物件.

模拟谷歌今日使用的css动画

- revlekt - 博客园-首页原创精华区
  不知道大家有没有注意到谷歌今天官网上的logo,刚开始一看还以为是gif,在仔细一看,发现并非如此,原来是使用CSS Sprite技术,利用一个初始图片和一张画满各个动作的拼接图片,从而实现了动画效果.   本人一时手痒,就想把这个扒下来,但发现谷歌的js写的太牛逼了,无奈,只能自己用自己的思维去模拟一个了.

Google计划从Bink中移除CSS区块

- - Solidot
CSS区块是一种布局模型,设计用于定义容器,让文本流从一个容器流动到另一个容器,从而提供一种复杂的多列布局. 它主要由Adobe创建,目前尚未成为正式标准,W3C只公布了工作草案. CSS区块受到很多争议,最大的争议是它违反了内容和样式分离的原则. 在五大浏览器中,只有Mozilla没有实现CSS区块,它提议用CSS Fragmentation作为区块的替代.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品,整體來說應該是接近寫完了,不過越接近完工,抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass,說這東西超神奇,超好用,還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了,只是文件實在看起來太他媽的眼花繚亂,因為專案進度一直在跑,不太敢貿然換掉寫 CSS 的方式.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单,也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”,这样您就可以跨站点应用它 — 也就是说,将样式应用到网站,它就会自行应用到每个网页的每个元素. ●XHTML:可扩展 HTML. 对于网站,将数据与设计分离是一个重要的概念:数据使用 (X)HTML 发送到 浏览器,而设计使用 CSS 应用到该数据.

css 圆角

- - CSDN博客推荐文章
作者:kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读:6 评论:0 查看评论.

CSS架构

- - 博客 - 伯乐在线
英文原文: CSS Architecture,编译: CSDN-张红月. Philip Walton 在AppFolio担任前端工程师,他在Santa Barbara on Rails的聚会上提出了CSS架构和一些最佳实践,并且在工作中一直沿用. 擅长CSS的Web开发人员不仅可以从视觉上复制实物原型,还可以用代码进行完美的呈现.

CSS总结

- - CSDN博客Web前端推荐文章
         接触过一段CSS,为简单理解,将CSS说成两步,一步是你做个“记号”,另一步是根据记号设置样式.      网页的内容和样式是分开的. “记号”便是能标识网页中某部分内容的关键字词(选择器),而根据记号设置样式呢,就是按图索骥根据记号设置标识的那部分内容的样式.     这段时间练习的每个CSS小例子,或是用id做记号,或是用name,或是用class,只有有了这些所谓的记号,CSS设定的样式才有用,.

CSS基础

- - CSDN博客Web前端推荐文章
1、引入CSS的四种方式. 行内样式、内嵌样式、链接样式、导入样式. 基本选择器:标签选择器,ID选择器,类选择器,通用选择器. 通用选择器:*{css代码}. 通用选择器作用:对整个网页中所有HTML标签进行样式定义. 常见用法:定义*{margin:0;padding:0}通用样式,并置于CSS文件最顶端,用于对HTML内所有的标签进行重置以保证页面能兼容多种浏览器.