如何通过 HTML5 和 CSS3 来实现日历图标样式

d78b267500b0cedc96b59b8177c4a818_1440w.jpg

可选方案

几年前我们可能需要使用PNG或者FIG图片来实现。你现在也可以继续使用这种方案,不过这种方案缺点很多,不方便修改,没法被搜索收录,并且无法缩放。一种更好的方案就是使用SVG。使用SVG的方案会非常灵活,但是我们没必要使用SVG。

因此,我将使用没太多人知道的HTML5元素time来实现。它是用来显示日期或者时间的——可能是一个日程或者节假日。下面是time元素最简单的使用语法(2014年9月20号下午9:01):

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

你可以写具体到天:2014-09-20,到月:2014-09后者到年:2014。最末尾的”Z”代表的是协调世界时(UTC)。你可以使用自己的时区替换它,例如+01:00、-06:00等。

虽然这样的事件格式很适合机器阅读,但是人并不好理解。因此,你可以给time元素添加一个datetime属性,将你的日期或者时间放在里面,使用更容易理解的内容,经过国际化等等。

<time datetime="2014-09-20T21:01:00+08:00">9:01pm, Saturday September 20<sup>th</sup>, 2014</time>

time在使用微数据和微格式时,您需要认真考虑该元素。

日历图标的HTML

使用下面这样的HTML来构成我们的日历图标:

<time datetime="2014-09-20" class="icon">
  <em>Saturday</em>
  <strong>September</strong>
  <span>20</span>
</time>

给这个time 元素添加样式”icon”。

我使用em、strong和span元素来代表周几、月和日,便于定义CSS样式。它们都是无语义行内元素,因此不需要其他样式,日期也是可读的。当然,你也可以根据需要使用其他元素。

日历图标的CSS

我们首先定义图标外围样式:

time.icon
{
  font-size: 1em; /* change icon size */
  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样式实现的。我最开始考虑使用伪类,但是这行不通,因为我们定义了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及以上的IE浏览器(动画在IE10+上有效)。在IE8及以下的浏览器中,如果你使用了HTML5shim的话,你可以看到一个还过得去的效果。我发现了一个Webkit/Blink动画的bug,在我实现这个示例时——不过我将在另外一篇文章来说明这个问题。

使用这些代码来实现你自己的日历图标吧,祝你愉快!

最终完整代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
	<style>
        time.icon {
            font-size: 1em;   /* change icon size */
            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;
         }

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

        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;
        }
	</style>
	</head>
	<body>
		<time datetime="2014-09-20" class="icon">
			<em>Saturday</em>
			<strong>September</strong>
			<span>20</span>
		</time>

		<time datetime="2014-09-20" class="icon">
			<em>9月</em>
			<strong>2022</strong>
			<span>20</span>
		</time>
	</body>
</html>


本文来源:转载
版权声明:本站內容部分来源于网络,仅供个人学习交流。如有侵权内容请留言告知,本站将会立即处理!
文章标题:如何通过 HTML5 和 CSS3 来实现日历图标样式
本文链接:https://www.zluckin.com/63.html
原文链接:https://www.sitepoint.com/create-calendar-icon-html5-css3/
0 条评论
623