您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > 前端开发 > HTML5&CSS3

HTML5+CSS3创建圆角图标

作者:UncleToo  来源:原创  日期:2013-12-23 7:55:53
收藏  评论:( 1 )  阅读:809

随着HTML5的越来越流行,很多网站都开始扁平化设计、响应式设计,这里不可或缺的就是对于网站图标的处理,在以前我们都是用PNG或者GIF来创建图标,但是这样很不利于搜索引擎的抓取,而且可伸缩性也不好。本文UncleToo将给大家介绍如何利用HTML5CSS3来创建类似智能手机上的圆角图标。

这里我们创建一个日历的图标,大家可以先看一下效果:

<<效果预览>>

首先,我们需要用到一下HTML代码:

<time datetime="2013-13-23" class="icon">
  <em>星期一</em>
  <strong>十二月</strong>
  <span>23</span>
</time>

time标签是HTML5新增的标签,它表示一个日期或时间(也许是某个纪念日)。这里我们将time赋予icon的样式,即圆角样式。用em、strong及span来分割图标上的区域。

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,所以不起作用。

因为我们将time标签设置了相对位置,所以内部的标签可以固定位置,下面是基本样式:

time.icon *
{
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}

我们用通用适配器(*)来设置每一个元素的样式。注意,如果你有多个这样的图标就要明确样式。

月份的CSS代码:

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

这是图标顶部,我们在月份的下面使用了虚线分割。

星期部分我们放在最下面,CSS代码:

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

在实际应用中,图标的日期可用采用AJAX动态读取。

为了有更好的视觉效果,我们还可以添加了鼠标动画,下面我们看一下个完整的示例:

<<效果预览>>

HTML代码:

<time datetime="2014-09-20" class="icon">
  <em>星期一</em>
  <strong>十二月</strong>
  <span>23</span>
</time>

CSS代码:

body
{
  font-family: "Helvetica Neue Bold", arial, helvetica, sans-serif;
  font-size: 100%;
  margin: 10px;
  color: #333;
  background-color: #cecece;
}
h1
{
  margin: 0;
  font-weight: normal;
}
time.icon
{
  font-size: 1em; /* change icon size */
  display: block;
  position: relative;
  width: 7em;
  height: 7em;
  background-color: #fff;
  margin: 2em auto;
  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;
  -webkit-backface-visibility: hidden;
  -webkit-transform: rotate(0deg) skewY(0deg);
  -webkit-transform-origin: 50% 10%;
  transform-origin: 50% 10%;
}
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
{
  width: 100%;
  font-size: 2.8em;
  letter-spacing: -0.05em;
  padding-top: 0.8em;
  color: #2f2f2f;
}
time.icon:hover, time.icon:focus
{
  -webkit-animation: swing 0.6s ease-out;
  animation: swing 0.6s ease-out;
}
@-webkit-keyframes swing {
  0%   { -webkit-transform: rotate(0deg)  skewY(0deg); }
  20%  { -webkit-transform: rotate(12deg) skewY(4deg); }
  60%  { -webkit-transform: rotate(-9deg) skewY(-3deg); }
  80%  { -webkit-transform: rotate(6deg)  skewY(-2deg); }
  100% { -webkit-transform: rotate(0deg)  skewY(0deg); }
}
@keyframes swing {
  0%   { transform: rotate(0deg)  skewY(0deg); }
  20%  { transform: rotate(12deg) skewY(4deg); }
  60%  { transform: rotate(-9deg) skewY(-3deg); }
  80%  { transform: rotate(6deg)  skewY(-2deg); }
  100% { transform: rotate(0deg)  skewY(0deg); }
}

<<效果预览>>


本文由UncleToo原创,转载请注明出处!




除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/html5/750.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论