程序员之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > html5 >

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

  发布时间：2012-11-12 10:29:29   作者：佚名   我要评论
最近我在重新设计自己的博客站点，决定用一个日历样式的icon显示时间。以前的解决方案一般是用背景图片，感谢css3，现在我们用css3就能实现这样的功能；接下来将为您详细介绍
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

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

photoshop 概念图
 
很多设计者采用直接在浏览器上设计的方式，但是我还是更喜欢先做photoshop的概念图的方式。虽然现在很多效果可以直接用css实现，但是用photoshop设计效果的方式比不断尝试修改css来最终达到你想要的效果的方式简单很多。
 
首先创建一个圆角矩形，设置圆角半径为10px，之后我们会用css的border-radius属性实现。
 
为矩形添加垂直方向的渐变，渐变颜色是从#dad8d8 到 #fcfcfc。
 
设置1像素的描边，颜色是#e3e3e3
 
最后添加向下的阴影效果，透明度为20%，0像素的距离和15像素的大小。这些效果在css中将会用box-shadow属性实现。
 
复制刚才的矩形，移除上边的部分。修改渐变，颜色从#790909 到 #d40000，填充新创建的矩形，这部分将要放置月份信息。
 
设置一个内阴影来表示上边框，颜色为#a13838，100%透明度，3px的距离和0px的大小。
 
用photoshop的字体工具设置日历icon上半部分时间内容的字体效果，字体为Helvetica，颜色为#9e9e9e。
 
在下面红色部分输入月份信息，字体设置为宽，颜色为白色。

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样式首先设置了整个容器的高和宽，通过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;
}

 
用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);
}

 
最后一部分代码，通过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;
}


我们用给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%);
}


红色部分的实现是通过为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;
}

 
修改文字样式，使它和设计匹配，大小设置为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;
}

 
剩下的就是添加头部边框，用border-top样式实现，还有就是用border-radius属性实现下部两个圆角。一点点的padding属性可以让月份文字上下和其他元素有些间隔。
浏览器兼容性
 
尽管css改进的属性可以帮助我们实现photoshop中渐变和阴影的效果，但是我们仍然要面对以前web设计师要面对的问题，浏览器兼容性。

相关文章

  • 纯CSS3实现的动态天气小图标特效源码

    是一段实现了各大网站中经常出现的动态天气图标效果的代码，本款代码是纯CSS3实现的天气出太阳，下雨，雷阵雨等动画图标特效代码，本段代码适应于所有网页使用，有兴趣的朋
    2015-06-16

  • 纯CSS3实现天气动画图标特效源码

    这是一款基于纯CSS3的天气动画图标，利用CSS3特性，我们在这里绘制了7个关于天气的图标，并且每一个图标都有一套代表当前天气的动画特效
    2014-10-20

  • 详解CSS中iconfont的使用

    这篇文章主要介绍了详解CSS中iconfont的使用,阿里巴巴的iconfont库非常有人气,同时也介绍了iconfont的一些缺点,需要的朋友可以参考下
    2015-08-04

  • 使用icon fonts来辅助CSS处理图片

    这篇文章主要介绍了使用icon fonts来辅助CSS处理图片,在移动端网页的设计中使用较多,需要的朋友可以参考下
    2015-07-21

  • CSS3制作ajax loader icon实现思路及代码

    用到了两个CSS3属性transform、animation，实现原理为：transform控制每个小方块在Y轴的偏移，rotate控制旋转的角度，scale缩放至原大小的一半，具体祥看下文，希望对大家
    2013-08-25

  • CSS3 icon font完全指南(CSS3 font 会取代icon图标)

    大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face)，包括IE6都支持，只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon，我们就可以尝试使
    2013-01-06

  • z-blog用CSS定义分类RSS订阅图标

    关键字描述：订阅 图标 分类 定义 RSS CSS li 隐藏 默认 span.feed-icon z-blog分类小RSS图标是被<span class=“feed-icon”>包围的，可以在CSS定
    2009-06-06

  • CSS icon图标之纯CSS实现带动画效果的天气图标

    CSS3动画属性并不是很多，但重点其实是你怎样去运用它，从简单的hover状态或复杂的小动画，都可以巧妙的用CSS3动画属性来实现
    2016-01-27

最新评论

关注微信公众号

扫一扫
?


http://www.vxiaotou.com