-
We are concerned Rich Web Design, AJAX, jQuery, Interactive Design.
-
Hover 时，图片背景的集中处理
CSS 基础知识，高手请绕边。如上所示，要实现图片的鼠标 hover 事件，一般是为图片链接添加hover后的图片。如上图的 YouTube 标志效果。在图片的制作中一般要为每个图片链接添加两张图片，5个链接就要10张图片，这不仅细微的拖慢了页面的加载速度，在制作过程中也会有诸多不便，如图片的对齐问题，而将图片背景的集中处理是个很好的解决方案。
以上的效果背景图片为：
关键性的代码：
icon a{width:20px; height:20px; padding:0; background:url(social-icons.png) no-repeat;text-indent:-9999px; overflow:hidden;}
icon a:hover{background-position:0 -22px;}
twitter a{background-position:-20px 0;}
twitter a:hover{background-position:-20px -22px;}
flickr a{background-position:-40px 0;}
flickr a:hover{background-position:-40px -22px;}
facebook a{background-position:-60px 0;}
facebook a:hover{background-position:-60px -22px;}
. . . . . .
关键的代码在于对 background-position 这个属性的操作，每个按钮对应不同的背景图片相应位置。网站地址： Android and Me
- 发表评论
-
Android and Me 网站登录界面设计
Android and Me这个是属于关注Android设计及周边的新闻网站，确切的说是一个博客，虽然说博客使用登录系统并不是多，但是它的这个设计于网页最顶端的登录web part十分有新意：
首先，是那个Android机器人的头像，在每次登录时，它都会发生变化，这是PHP实现的一个功能，让用户感觉很有新意，很有web2.0的设计概念。记得日本的一个视频网站 ニコニコ動画(9) 也有这个功能，面向年轻用户的网站可以考虑这个设计。
其次，文本输入框的设计，将文字嵌入了文本输入框内，看起来十分简洁，可能是只有一个字母的关系，中文实现起来就可能是两个词了：“用户”、“密码”。
其余的设计也以简洁为主，save实现了记住密码的功能。整个设计中，那个Android机器人头像是点睛之笔。
网站地址： Android and Me
DEMO下载： uushare - 发表评论
-
Hello world！
欢迎使用 WordPress 。这是系统自动生成的演示文章。编辑或者删除它，开始您的博客！
IT界不成文的约定，一项新技术的第一个demo都是用“Hello world！”来实现，这篇文章留作纪念。
- 发表评论
Old Entries