time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 【HTML5实践教程】2、使用css制作时间 ICON

【HTML5实践教程】2、使用css制作时间 ICON

时间:2012-10-27 22:44 点击:2059次 字体:[ ]




  最近我在重新设计自己的博客站点,决定用一个日历样式的icon显示时间。以前的解决方案一般是用背景图片,感谢css3,现在我们用css3就能实现这样的功能。我将会用到一些linear-gradients, border radius 和 box shadow这些属性来代替以前的photoshop设计。

 

  photoshop 概念图

【HTML5实践教程】2、使用css制作时间 ICON_www.fengfly.com

 

  很多设计者采用直接在浏览器上设计的方式,但是我还是更喜欢先做photoshop的概念图的方式。虽然现在很多效果可以直接用css实现,但是用photoshop设计效果的方式比不断尝试修改css来最终达到你想要的效果的方式简单很多。

【HTML5实践教程】2、使用css制作时间 ICON_www.fengfly.com

  首先创建一个圆角矩形,设置圆角半径为10px,之后我们会用css的border-radius属性实现。

【HTML5实践教程】2、使用css制作时间 ICON_www.fengfly.com

  为矩形添加垂直方向的渐变,渐变颜色是从#dad8d8 到 #fcfcfc。

【HTML5实践教程】2、使用css制作时间 ICON_www.fengfly.com

  设置1像素的描边,颜色是#e3e3e3

【HTML5实践教程】2、使用css制作时间 ICON_www.fengfly.com



本文地址 : http://www.fengfly.com/plus/view-209944-1.html
标签: icon HTML5 css
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: