php日历css样式,如何在HTML5和CSS3创建一个日历图标

你有没有看到西蒙娜萨拉的最近的一篇文章， 如何在Photoshop中创建一个日历应用程序图标 ？ 它看起来很棒，非常适合智能手机的日历应用程序，是大家非常关注的，因为我们进入2014年。

有没有可能建立在HTML5中使用和重新使用在任何网页了类似的图标？ 当然，这将... 否则我就不会写这篇文章！

查看HTML5和CSS3的日历图标演示 (将鼠标悬停在一个不错的效果的元素！)

选项

几年前，我们将需要一个PNG或GIF图像。 你仍然可以做到这一点，但他们不容易改变，不能被搜索引擎收录，而且不能扩展。 一个更好的选择将是一个可缩放矢量图形(SVG)，它会允许更多的灵活性，但我们并不一定需要它。

因此，我将使用鲜为人知的HTML5的time元素。 其唯一的目的是表示一个日期和/或时间 - 也许一个事件或纪念日。 基本元素使用下面的语法下午9点01分于2014年9月20日：

2014-09-20T21:01:00Z

你可以定义就在一天： 2014-09-20 ，月： 2014-09或年份： 2014 。 最后的'Z'代表协调世界时(UTC)。 你可以用你自己的时区，例如：+01:00，-06:00，等更换

而内容是机器可读的，它不是对人类特别容易。 因此，您可以将日期/时间定义在一个datetime属性，并使用一些更友好的是特定于语言和区域设置的内容，例如：

9:01pm, Saturday September 20th, 2014

你当然应该考虑的time使用时，元素微观数据和微格式 。

日历图标的HTML

我们的日历图标，将使用下面的HTML代码：

Saturday

September

20

该time元素被赋予一个类“图标”来表示，应该称呼。

我用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样式不同的y偏移。 我最初考虑使用伪元素，但他们不会工作，因为我们已经定义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;

}

这个职位的旗帜在图标的上方，并用虚线边框造成穿孔。 由于横幅比穿孔边缘较大，我用另一个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;

}

最后，我添加了一个小动画，当你悬停或聚焦的图标 - 但我已经离开你的工作说出来罢。

查看HTML5和CSS3的日历图标示范...

在所有的现代浏览器，包括IE9及以上(动画作品上的IE10 +)的图标作品。 效果优雅地降低在IE8及以下，虽然你应该会看到一个合理的效果，如果你申请了HTML5垫片到您的网页。 不过，我确实发现一个不寻常的的Webkit /眨眼动画的bug，同时发展示范 - 但我会保存为另一篇文章。

使用的代码为自己的日历图标效果有乐趣。