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

html5做一个简单的日历 用html做一个日历_html5做一个简单的日历

有没有可能建立在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,同时发展示范 - 但我会保存为另一篇文章。

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