使用css如何制作时间ICON方法实践


Posted in HTML / CSS onNovember 12, 2012

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

photoshop 概念图
使用css如何制作时间ICON方法实践 
很多设计者采用直接在浏览器上设计的方式,但是我还是更喜欢先做photoshop的概念图的方式。虽然现在很多效果可以直接用css实现,但是用photoshop设计效果的方式比不断尝试修改css来最终达到你想要的效果的方式简单很多。
使用css如何制作时间ICON方法实践 
首先创建一个圆角矩形,设置圆角半径为10px,之后我们会用css的border-radius属性实现。
使用css如何制作时间ICON方法实践 
为矩形添加垂直方向的渐变,渐变颜色是从#dad8d8 到 #fcfcfc。
使用css如何制作时间ICON方法实践 
设置1像素的描边,颜色是#e3e3e3
使用css如何制作时间ICON方法实践 
最后添加向下的阴影效果,透明度为20%,0像素的距离和15像素的大小。这些效果在css中将会用box-shadow属性实现。
使用css如何制作时间ICON方法实践 
复制刚才的矩形,移除上边的部分。修改渐变,颜色从#790909 到 #d40000,填充新创建的矩形,这部分将要放置月份信息。
使用css如何制作时间ICON方法实践 
设置一个内阴影来表示上边框,颜色为#a13838,100%透明度,3px的距离和0px的大小。
使用css如何制作时间ICON方法实践 
用photoshop的字体工具设置日历icon上半部分时间内容的字体效果,字体为Helvetica,颜色为#9e9e9e。
使用css如何制作时间ICON方法实践 
在下面红色部分输入月份信息,字体设置为宽,颜色为白色。
使用css如何制作时间ICON方法实践
photoshop的模型就完成了。以前的话,我们会把图片抽出来作为背景,再在上面写上html的数字,但是现在所有这些都可以用css实现。
HTML结构
<div class="date">
<p>25 <span>May</span></p>
</div>
这次时间ICON demo的html非常简单。我们会用带有class为‘date’的div作为容器,然后用一个p标签来表示日期数字。天和月份在我们的设计里用不同大小的字符表示,所以我们会<span>标签来区别对待不同元素。
css样式

复制代码
代码如下:

.date {
width: 130px; height: 160px;
background: #fcfcfc;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
}

使用css如何制作时间ICON方法实践 
css样式首先设置了整个容器的高和宽,通过css的gradient又可以很容易的实现渐变的效果。
复制代码
代码如下:

.date {
width: 130px; height: 160px;
background: #fcfcfc;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
border: 1px solid #d2d2d2;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

使用css如何制作时间ICON方法实践 
用border属性可以实现photoshop中1px边框效果,然后用border-radius实现了圆角的效果。不要忘记加上-moz-和-webkit-前缀,以实现对老版本浏览器的兼容。
复制代码
代码如下:

.date {
width: 130px; height: 160px;
background: #fcfcfc;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
border: 1px solid #d2d2d2;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

使用css如何制作时间ICON方法实践 
最后一部分代码,通过box-shadow实现在photoshop设计中的下阴影效果。添加0px的水平和垂直的偏移量,增加15px的模糊度。用rgba实现对透明度的控制,在photoshop设计中的105,在这里换成了0.1。
复制代码
代码如下:

.date p {
font-family: Helvetica, sans-serif;
font-size: 100px; text-align: center; color: #9e9e9e;
}

使用css如何制作时间ICON方法实践
我们用给p标签定义样式,实现了为日期定义文字样式。字体,文字大小,文字颜色都是从photoshop中拷贝得到的,text-align设置为居中。但是样式也同样影响了月份文字,接下来我们会单独为它定义span标签样式。
复制代码
代码如下:

.date p span {
background: #d10000;
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
}

使用css如何制作时间ICON方法实践
红色部分的实现是通过为span的背景设置linear-gradient属性实现的,红色的数值也是来自于photoshop。
复制代码
代码如下:

.date p span {
background: #d10000;
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;
display: block;
}

使用css如何制作时间ICON方法实践 
修改文字样式,使它和设计匹配,大小设置为45px,设置为粗体字,颜色设置为白色,使用text-transform实现大写转换。将span标签设置为块元素,这样他就会匹配容器的大小了,设置红色背景。
复制代码
代码如下:

.date p span {
background: #d10000;
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;
display: block;
border-top: 3px solid #a13838;
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
padding: 6px 0 6px 0;
}

使用css如何制作时间ICON方法实践 
剩下的就是添加头部边框,用border-top样式实现,还有就是用border-radius属性实现下部两个圆角。一点点的padding属性可以让月份文字上下和其他元素有些间隔。
浏览器兼容性
使用css如何制作时间ICON方法实践 
尽管css改进的属性可以帮助我们实现photoshop中渐变和阴影的效果,但是我们仍然要面对以前web设计师要面对的问题,浏览器兼容性。
HTML / CSS 相关文章推荐
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 #HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 #HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 #HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 #HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 #HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 #HTML / CSS
input元素的url类型和email类型简介
Jul 11 #HTML / CSS
You might like
用PHP调用Oracle存储过程
2006/10/09 PHP
php中大括号作用介绍
2012/03/22 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
javascript 回调函数详解
2014/11/11 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
python list转dict示例分享
2014/01/28 Python
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
基层干部十八大感言
2014/01/19 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
股东出资证明书范例
2014/10/04 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript