舒彩光的互联网生涯
用心做事做人,做最认真的程序员

使用HTML5和CSS3设计一款的日历图标

2014年01月18日 01:22,by 舒彩光

几年前我们做一个日历图标必须要用GIF或PNG图片,但是用这种方法修改起来比较麻烦,而且不容易被搜索引擎检索到。当然,我们也可以用SVG来实现这个功能。不过使用HTML5+CSS3的方式能够更简单的实现这个图标。

日历图标效果图

我们使用比较不常用的标签<time>。它的唯一功能就是标记一个日期或时间。这个标签可以用如下的方式来表示2014年9月20日晚上9点01分:

<time>2014-09-20T21:01:00Z</time>

上面的格式是国际标准时间的格式,便于机器识别。但看上去总是怪怪的。所以可以把国际标准时间的格式方到 “datetime”属性中去。标签的内容中放置容易阅读的本地时间格式:

<time datetime="2014-09-20T21:01:00+08:00">2014年9月12日 下午 9点01分</time>

<time>标签就介绍到这里,下面来看看如何用它做日历图标。

日历图标的HTML代码

代码如下:

<time datetime="2014-09-20" class="icon">
  <em>星期六</em>
  <strong>九月</strong>
  <span>20</span>
</time>

我们给time标签加上了名为icon的样式。在time标签中我们分别用em表示星期,strong表示月份,span表示日期。这些都是没有严格语义的内联元素。即使在没有加载样式的情况下,我们也能识别日期。当然,我们也可以使用其他标签。

日历图标的CSS

首先,我们先定义icon的css:

time.icon
{
  font-size: 1em; /* 改变字体的大小,图标的大小会跟着改变 */
  display: block;
  position: relative;
  width: 7em;
  height: 7em;
  background-color: #fff;
  border-radius: 0.6em;
  box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
  overflow: hidden;
}

这个图标的长和高我们都定义为7em。因此我们可以随意改变字体的大小,而这个图标的大小也会跟随字体的大小而改变。

我们定义了多个 box-shadow 来产生多重阴影效果,border-radius 用来产生圆角效果。为了防止内容超出圆边。定义了overflow: hidden。并且,我们用了position:relative做了相对定位,这样内部的元素就可以用绝对定位控制无素的位置了。我们接下来设置子元素的基本样式:

time.icon *
{
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}

通用选择器(*)给所有的子元素定义了统一的样式,这样可以简化很多重复的代码,然后我们分别给月,星期,日定义不同的样式。

月份区域的样式如下:

time.icon strong
{
  position: absolute;
  top: 0;
  padding: 0.4em 0;
  color: #fff;
  background-color: #fd9f1b;
  border-bottom: 1px dashed #f37302;
  box-shadow: 0 2px 0 #fd9f1b;
}

我们使用绝对定位把月份区域定位到图标的顶部。再用虚线下边框表示钍线缝制效果。但月份区域的黄色背景是要超过下边框的,所以再用box-shadow定义一个黄色的下阴影。

星期区域在图标的最下方,样式定义如下:

time.icon em
{
  position: absolute;
  bottom: 0.3em;
  color: #fd9f1b;
}

最大的日期显示在最中间,样式定义如下:

time.icon span
{
  font-size: 2.8em;
  letter-spacing: -0.05em;
  padding-top: 0.8em;
  color: #2f2f2f;
}

最后,我们再定交一个动画效果吧:当鼠标移上图标时,图标生左右晃动几下。具体的代码看一下的示例吧:

这个图标可以运行在IE9及更高的版本,以其他最新的浏览器上。该图标也有不错的兼容性,在IE9上不能展示动画效果,其他一切正常。在IE8及更低的版本上虽然效果差一些,但也有一个合理的展示。