你有没有看到西蒙娜萨拉的最近的一篇文章, 如何在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,同时发展示范 - 但我会保存为另一篇文章。
使用的代码为自己的日历图标效果有乐趣。