日历图标的纯CSS实现

今天我介绍采用纯CSS的方式来创建一个日历图标，你可以将其用在博客日志或者其它地方。自己也是学来的，但是效果是图片级的。如题所述，不在炫技，重在抛砖引玉。最终效果如下：

创新互联自成立以来，一直致力于为企业提供从网站策划、网站设计、成都做网站、网站设计、电子商务、网站推广、网站优化到为企业提供个性化软件开发等基于互联网的全面整合营销服务。公司拥有丰富的网站建设和互联网应用系统开发管理经验、成熟的应用系统解决方案、优秀的网站开发工程师团队及专业的网站设计师团队。

和从前一样，先看DEMO：

http://www.paper-rater.com/jian-ce/css-calendar-icon.html

这个日历图标中使用的HTML代码异常简单，如下：

 
 
 
 
    
  
  
  
  
  1. 7 February
    2.

我们需要用一个外围元素，在这里用的是p元素（或者使用HTML5中的新元素——TIME）。在这个外围元素中我们还需要一个包含着月份的元素。

实现原理：

现在，我们有两个可以操作的元素，另外，我们还要为每个真元素创建两个伪元素，这样我们总共有6个可以操作的元素，借助这些元素我们就可以对日历进行修饰。看看下面的图，你就清楚了。

实现过程：

首先我们对外围元素进行定义。你可能已经注意到我使用了 box-shadow、border-radius 以及 CSS渐变。并不是所有的浏览器都支持这些属性，但至少它们越来越普及。注意，我们没有定义固定的高度，所有的高度都是通过外围元素以及其中的 em 元素的 line-height 属性来控制的。

 
 
 
 
    
  
  
  
  
  1. .calendar{ 
    2. 
  
  
  
  
  2.     margin:.25em 10px 10px 0; 
    3. 
  
  
  
  
  3.     padding-top:5px; 
    4. 
  
  
  
  
  4.     float:left; 
    5. 
  
  
  
  
  5.     width:80px; 
    6. 
  
  
  
  
  6.     background:#ededef; 
    7. 
  
  
  
  
  7.     background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc));  
    8. 
  
  
  
  
  8.     background: -moz-linear-gradient(top,  #ededef,  #ccc);  
    9. 
  
  
  
  
  9.     font:bold 30px/60px Arial Black, Arial, Helvetica, sans-serif; 
    10. 
  
  
  
  
  10.     text-align:center; 
    11. 
  
  
  
  
  11.     color:#000; 
    12. 
  
  
  
  
  12.     text-shadow:#fff 0 1px 0;     
    13. 
  
  
  
  
  13.     -moz-border-radius:3px; 
    14. 
  
  
  
  
  14.     -webkit-border-radius:3px; 
    15. 
  
  
  
  
  15.     border-radius:3px;     
    16. 
  
  
  
  
  16.     position:relative; 
    17. 
  
  
  
  
  17.     -moz-box-shadow:0 2px 2px #888; 
    18. 
  
  
  
  
  18.     -webkit-box-shadow:0 2px 2px #888; 
    19. 
  
  
  
  
  19.     box-shadow:0 2px 2px #888; 
    20. 
  
  
  
  
  20.     }
    21.

em 元素包含着月份的名称，它的CSS定义如下：

 
 
 
 
    
  
  
  
  
  1. .calendar em{ 
    2. 
  
  
  
  
  2.     display:block; 
    3. 
  
  
  
  
  3.     font:normal bold 11px/30px Arial, Helvetica, sans-serif; 
    4. 
  
  
  
  
  4.     color:#fff; 
    5. 
  
  
  
  
  5.     text-shadow:#00365a 0 -1px 0;     
    6. 
  
  
  
  
  6.     background:#04599a; 
    7. 
  
  
  
  
  7.     background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a));  
    8. 
  
  
  
  
  8.     background:-moz-linear-gradient(top,  #04599a,  #00365a);  
    9. 
  
  
  
  
  9.     -moz-border-radius-bottomright:3px; 
    10. 
  
  
  
  
  10.     -webkit-border-bottom-right-radius:3px;     
    11. 
  
  
  
  
  11.     border-bottom-right-radius:3px; 
    12. 
  
  
  
  
  12.     -moz-border-radius-bottomleft:3px; 
    13. 
  
  
  
  
  13.     -webkit-border-bottom-left-radius:3px;     
    14. 
  
  
  
  
  14.     border-bottom-left-radius:3px;     
    15. 
  
  
  
  
  15.     border-top:1px solid #00365a; 
    16. 
  
  
  
  
  16.     }
    17.

现在，我们来定义伪元素。外围元素的伪元素（:before 和 :after）用来创建两个圆孔。

 
 
 
 
    
  
  
  
  
  1. .calendar:before, .calendar:after{ 
    2. 
  
  
  
  
  2.     content:''; 
    3. 
  
  
  
  
  3.     float:left; 
    4. 
  
  
  
  
  4.     position:absolute; 
    5. 
  
  
  
  
  5.     top:5px;     
    6. 
  
  
  
  
  6.     width:8px; 
    7. 
  
  
  
  
  7.     height:8px; 
    8. 
  
  
  
  
  8.     background:#111; 
    9. 
  
  
  
  
  9.     z-index:1; 
    10. 
  
  
  
  
  10.     -moz-border-radius:10px; 
    11. 
  
  
  
  
  11.     -webkit-border-radius:10px; 
    12. 
  
  
  
  
  12.     border-radius:10px; 
    13. 
  
  
  
  
  13.     -moz-box-shadow:0 1px 1px #fff; 
    14. 
  
  
  
  
  14.     -webkit-box-shadow:0 1px 1px #fff; 
    15. 
  
  
  
  
  15.     box-shadow:0 1px 1px #fff; 
    16. 
  
  
  
  
  16.     } 
    17. 
  
  
  
  
  17. .calendar:before{left:11px;}     
    18. 
  
  
  
  
  18. .calendar:after{right:11px;}
    19.

而 em 的伪元素用来创建两个吊环。

 
 
 
 
    
  
  
  
  
  1. .calendar em:before, .calendar em:after{ 
    2. 
  
  
  
  
  2.     content:''; 
    3. 
  
  
  
  
  3.     float:left; 
    4. 
  
  
  
  
  4.     position:absolute; 
    5. 
  
  
  
  
  5.     top:-5px;     
    6. 
  
  
  
  
  6.     width:4px; 
    7. 
  
  
  
  
  7.     height:14px; 
    8. 
  
  
  
  
  8.     background:#dadada; 
    9. 
  
  
  
  
  9.     background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa));  
    10. 
  
  
  
  
  10.     background:-moz-linear-gradient(top,  #f1f1f1,  #aaa);  
    11. 
  
  
  
  
  11.     z-index:2; 
    12. 
  
  
  
  
  12.     -moz-border-radius:2px; 
    13. 
  
  
  
  
  13.     -webkit-border-radius:2px; 
    14. 
  
  
  
  
  14.     border-radius:2px; 
    15. 
  
  
  
  
  15.     } 
    16. 
  
  
  
  
  16. .calendar em:before{left:13px;}     
    17. 
  
  
  
  
  17. .calendar em:after{right:13px;}    
    18.

大功告成。。。。

网站栏目：日历图标的纯CSS实现
路径分享：http://www.stwzsj.com/qtweb/news41/17891.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站策划知识

分类信息网站

小谭建站工作室　　 　成都网站设计　　 　3D立体画　　 　鳄鱼养殖　　 　官网SEO排名　　 　安卓开发　　 　成都做网站　　 　营销网站定位　　 　成都定制网站　　 　高防服务器租用　　 　蓬安网站建设　　 　娃娃鱼鱼苗　　 　成都网站推广　　 　医药医疗网站建设方案　　 　网站SEO优化排名　　 　叙永网站建设　　 　四川成都网站制作　　 　光华机房服务器托管　　 　成都展柜制作　　 　德阳电信机房