按钮图标

精美纯CSS3扁平风格图标

面包多

精美纯CSS3扁平风格图标-创客云
这是一组使用纯 CSS3 制作的扁平风格的图标。这组图标共有 16 个,所有图标均由 CSS 渲染而成,没有使用任何图片。其中有 5 个图标在鼠标滑过时带有动画特效。

HTML 结构

所有的图标都是以 div.icon 作为包裹容器,里面放置需要的元素。在 email 图效果中,它的 HTML 结构如下:

也想出现在这里?联系我们
创客主机
  1. <div class="icon">
  2.   <div class="mail">
  3.     <div class="shadows"></div>
  4.   </div>
  5. </div>

CSS 样式

email 图标的 CSS 样式也非常简单:div.mail 元素是整个信封的主体,它设置了固定的宽度和高度,并设置了一个小圆角和一些阴影效果。

  1. .mail:before {
  2.   content:"";
  3.   width: 0;
  4.   height: 0;
  5.   position:absolute;
  6.   top:6px;
  7.   border-left: 54px solid transparent;
  8.   border-right: 54px solid transparent;
  9.   border-top: 50px solid rgba(0,0,0,0.3);
  10. }
  11.  
  12. .mail:after {
  13.   content:"";
  14.   width: 0;
  15.   height: 0;
  16.   position:absolute;
  17.   top:6px;
  18.   border-left: 54px solid transparent;
  19.   border-right: 54px solid transparent;
  20.   border-top: 39px solid #eeecdf;
  21. }

信封的阴影由三个部分组成:.shadows 元素是下方的三角形阴影,.shadows::after 是左侧的三角形阴影,.shadows::before 是右侧的三角形阴影。

  1. .mail .shadows {
  2.   width: 0;
  3.   height: 0;
  4.   border-left: 42px solid transparent;
  5.   border-right: 42px solid transparent;
  6.   border-bottom: 30px solid rgba(0,0,0,0.12);
  7.   position:absolute;
  8.   bottom:0;
  9.   left:50%;
  10.   margin-left:-42px;
  11. }
  12. .mail .shadows:after {
  13.   content:"";
  14.   position:absolute;
  15.   left:-54px;
  16.   top:-41px;
  17.   width: 0;
  18.   height: 0;
  19.   border-top: 41px solid transparent;
  20.   border-left: 54px solid rgba(0,0,0,0.06);
  21.   border-bottom: 39px solid transparent;
  22. }
  23. .mail .shadows:before {
  24.   content:"";
  25.   position:absolute;
  26.   right:-54px;
  27.   top:-42px;
  28.   width: 0;
  29.   height: 0;
  30.   border-top: 42px solid transparent;
  31.   border-right: 54px solid rgba(0,0,0,0.2);
  32.   border-bottom: 39px solid transparent;
  33. }

在 styles.css 文件中有所有图标对应的 CSS 样式,使用哪个图标可以直接引入相应的样式即可。

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!