首页 > 网页教程 > CSS > 网页前端开发:微博CSS3适用细节初探

网页前端开发:微博CSS3适用细节初探

时间:2012-02-28    作者:Young_春宇   来源:微博UDC

浏览器,作为一神器,帮我们打开了缤纷万千的网络世界窗口。而她发展到今天,也诞生了一个又一个的怀神版本,可能有人钟情于她的花哨,有人痴迷于她的速度……我们,作为重构工程师,必然要更关注他背后的技术革新,那就是css3的支持了!上次,加菲猫已经给我们演示了夸张的css3动画。而这次,我们从细节入手,看看css3遇到weibo,会给人什么期待 。

当然在这之前,得先了解下拜访weibo.com的各位大侠的神器占比:

PS:(数据来自新浪微博“产品数据分析后台”的2012年1月份浏览器占比)

图标中可以看出,IE6占比逐渐降低,而支持css3的浏览器,也占有了相当的份额,也就意味着,我们一方面可以更多有选择的放弃IE6的兼容,另外,也可以在支持CSS3的高版本浏览器上做更多的考虑。

而具体在哪些细节上可以考虑锦上添花呢?此文仅做抛砖引玉,探讨下哪些css3的效果可以在产品细节上有所呈现,而我们也会在此文之后,尽快在微博的优化中,把提到的这些逐步上线!

利用伪类提升用户体验

比如说文本,大家在浏览网页的时候,经常会用鼠标反选一些文字内容,用来方便阅读。这时候网页文字通常呈现高亮白色文字+蓝底背景色显示。如下图:

但是微博主站有不同的皮肤,深深浅浅。当遇到一个暗色皮肤背景,依然显示蓝底儿白字,那效果就不是特别帅气了。这时候,其实可以考虑用伪类selection为网页文字的高亮提供了设计方案,来改变反选展示效果。鼠标选中文字后可设置相应的背景色和文字色,甚至是透明。简单一个属性就体现了产品对用户操作的关怀,从而提升用户使用感受。

利用渐变字色提升视觉冲击

随着css3的广泛使用,文字色渐变效果也越来越受到设计师和前端工程师的青睐。一个良好的渐变可以使文字看起来有质感,仿佛刻在纸面上一样,从而给用户一个良好的视觉感受。我们可以利用CSS3支持的文字透明,显示背景渐变的方式来模拟文字渐变。再加上一些过渡动画效果,我们甚至可以模拟一个简单的跑马灯的效果了。如下图:

哈哈。不过别对这个设计当真。这只是一个示范,不代表我们UDC的品味。

利用鼠标交互提升快感

鼠标点击(click)、滑过(hover)、激活(active)操作仍是当今webPC端上最重要的几个交互方式。新浪微博上大部分的互动操作也来自于此。以V4宽版为例当前微博主站可以有鼠标交互操作的模块大致包括:顶导,左侧栏导航,勋章列表,feed区,右侧栏皮肤选择按钮,皮肤选择弹层……

比如微博左侧导航的勋章栏,那里的向下展开操作区,在鼠标滑过时虽然有背景色变换,但略显生硬。时间久了,也许用户会对这种变换感觉厌倦了。没关系,现在我们可以通过CSS3可以把这里玩儿活。CSS3过渡属性(transition)的出现,可以很好的解决这个问题。通过设定过渡时间,可以让这种效果有一个过程化的变化效果,让鼠标滑过的变化效果,用柔和的渐显渐隐来处理。这样便改善了突兀的视觉变化,同时给人一种优雅的操作感受。

相关推荐
初识CSS3的强大功能
如何用CSS3 border-radius来实现圆角DIV?
CSS1-CSS3选择器汇总表
微软的IE9将要支持CSS3和HTML5?
CSS3亮点前瞻之线性渐变实例详解
不同浏览器在CSS3和HTML5下的兼容速查表
CSS3属性box-shadow(图层阴影)的使用教程
CSS3盒子模型(Flexible Box Module)之位置排序应用详解
CSS3盒子模型(Flexible Box Module)之尺寸应用详解
让IE6/IE7/IE8支持CSS3属性的脚本
Smashing Magazine CSS3设计赛获奖作品赏析
前端设计必备的CSS3开发实用工具集
看这些用CSS3绘制的图标,你震撼了吗
利用CSS3技术嵌入Web字体格式及浏览器兼容性介绍
24款超级实用的免费CSS3在线工具宝典
HTML5和CSS3开发的功能检测类库 — Modernizr
CSS3教程:17种用CSS实现的很酷炫的立体网页按钮和字体效果
6个设计精致使用CSS3技术美化的表单教程
5款立体质感的CSS3导航菜单(附英文教程和下载)
用CSS3圆角、盒子阴影、文字阴影效果和RGBa创建超酷的按钮
关注一些鲜为人知、试验性的CSS属性
36款超级实用的CSS3在线生成器和工具推荐
7个基于CSS3的工具提示(tooltip)教程推荐
CSS3教程:创意独特漂亮的CSS动画导航菜单设计
20个基于CSS3制作的3D按钮教程分享(附DEMO演示)
25个超酷的CSS3动画按钮和菜单教程分享
CSS3新手入门教程:快乐的CSS3之旅!
21个视觉效果超棒的CSS3动画特效欣赏(附演示)
7款免费的CSS3代码在线自动生成工具推荐
30款最佳的CSS3工具和应用程序推荐 web开发必备
8个CSS3前端开发必备的实用在线帮助手册
29款web开发最佳CSS工具和应用推荐
9种网页设计有用的CSS3属性和使用技巧
10款超级实用的在线CSS3代码生成工具推荐
5款生成CSS3动画效果的CSS3类库和工具
7款具有缩放、倾斜、旋转的CSS3折叠特效插件分享

精彩推荐

热门教程