几年前我们做一个日历图标必须要用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及更低的版本上虽然效果差一些,但也有一个合理的展示。