收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 5420|回复: 21

[教程] 纯手工打造CSS像素画--笨笨熊系列图标

[复制链接]
发表于 2009-3-9 00:27:32 | 显示全部楼层 |阅读模式
纯手工打造CSS像素画--笨笨熊系列图标

----------------------------------------------------------------------------------------------------------------------------------------------------
作者:冰极峰

博客地址:http://www.cnblogs.com/binyong  转载请注明出处

----------------------------------------------------------------------------------------------------------------------------------------------------
在cssplay网站看到有一组CSS像素画,于是也想摩仿一下,于是在网络上找到一组头像图标,看其结构比较简单,就拿它开刀吧!先看看预览图
1.gif

图一

基本原理:
没有什么技术含量,主要是利用背景色和边框色来渲染每一个像素点,加上绝对定位,就可以变换出不同的风格。在制作一幅图片之前最好是将图片黑白风格化,然后用PS放大图片,将各个点的位置计算精确。剩下的事情就是无穷的耐心和细心了。
演示:

 提示:您可以先修改部分代码再运行

评分

参与人数 1威望 +1 收起 理由
yoom + 1 楼主辛苦了!

查看全部评分

发表于 2009-3-9 09:25:13 | 显示全部楼层
无穷的耐心和细心
回复 支持 反对

使用道具 举报

发表于 2009-3-9 09:37:36 | 显示全部楼层
楼主神人也!!
回复 支持 反对

使用道具 举报

发表于 2009-3-9 09:45:41 | 显示全部楼层
赞一个,什么时候用纯CSS做一个蓝色的LOGO

估计3个DIV搞定

[[i] 本帖最后由 vocal 于 2009-3-9 09:47 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-3-9 10:16:22 | 显示全部楼层
这种耐心也毅力,神人也
回复 支持 反对

使用道具 举报

发表于 2009-3-9 10:30:00 | 显示全部楼层
果真有闲心的人
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-9 11:51:01 | 显示全部楼层

回复 4# vocal 的帖子

哈哈,蓝色的logo一个表格就搞定了
回复 支持 反对

使用道具 举报

发表于 2009-3-9 12:07:28 | 显示全部楼层
原帖由 [i]by0001 于 2009-3-9 11:51 发表
哈哈,蓝色的logo一个表格就搞定了


虽然可以只用一个table搞定,但是table里面照应要嵌套tr、td等,做下来也不简单。

下面是DIV+CSS方案:

 提示:您可以先修改部分代码再运行



PS:楼下IE6错位,我还真没有在IE6下测试。已经修正,添加overflow:hidden属性。

[[i] 本帖最后由 vocal 于 2009-3-9 14:01 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-9 12:11:34 | 显示全部楼层
IE6下错位了
1.png
回复 支持 反对

使用道具 举报

发表于 2009-3-9 13:43:39 | 显示全部楼层
楼主很强,楼主的博客也不错
8楼的确实错位
回复 支持 反对

使用道具 举报

发表于 2009-3-9 14:05:23 | 显示全部楼层
真是好汗啊,这么小的问题,竟然也会出现浏览器兼容性的问题……
回复 支持 反对

使用道具 举报

发表于 2009-3-9 15:31:44 | 显示全部楼层
赞一个,虽然也曾有过这样的想法,不过一直没动作做过,作者很有耐心
回复 支持 反对

使用道具 举报

发表于 2009-3-9 15:51:52 | 显示全部楼层
蓝色理想的 Logo 不需要用到定位,我只提供思路,不考虑兼容,IE 不能看的别怪我,只是大约地做了 hack

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2009-3-9 16:22:59 | 显示全部楼层
樓上的方法也很不錯
回复 支持 反对

使用道具 举报

发表于 2009-3-9 17:01:57 | 显示全部楼层
楼主耐心真好,,向你学习~~~
回复 支持 反对

使用道具 举报

发表于 2009-3-9 17:08:36 | 显示全部楼层
原帖由 [i]POPOEVER 于 2009-3-9 15:51 发表
蓝色理想的 Logo 不需要用到定位,我只提供思路,不考虑兼容,IE 不能看的别怪我,只是大约地做了 hack



我也来Test一个。。。。一种思路而已(来源于同事用C#画界面)。。。。
IE6+ FF已测试通过

希望追精简完美者优化之。。。


 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 goos 于 2009-3-9 17:12 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-9 17:18:29 | 显示全部楼层
哈哈,老大都来捧场了,真是荣兴啊!
偷个懒,来个table版的,大概测试了一下IE6,IE7,FF3

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2009-3-9 17:24:39 | 显示全部楼层
原帖由 [i]by0001 于 2009-3-9 17:18 发表
哈哈,老大都来捧场了,真是荣兴啊!
偷个懒,来个table版的,大概测试了一下IE6,IE7,FF3


比例失调
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-9 17:30:34 | 显示全部楼层

回复 19# goos 的帖子

哈哈,没有去计算宽高比.偷懒!!
回复 支持 反对

使用道具 举报

发表于 2009-3-10 11:58:31 | 显示全部楼层
真有耐心
回复 支持 反对

使用道具 举报

发表于 2009-3-10 18:12:25 | 显示全部楼层
这让我想到了十字绣
回复 支持 反对

使用道具 举报

发表于 2009-3-10 18:21:58 | 显示全部楼层
博客换个字体吧。。。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-9-22 08:00 , Processed in 0.218199 second(s), 15 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表