1. Home
  2. Code
  3. CSS实现日历牌效果
CSS实现日历牌效果
css
110 2 4 发布时间: 2015-12-24 最后更新时间: 2016-04-01
目录

最近在开发个人博客，想在文章列表左侧用一个日历牌显示文章发布日期，于是在dribbble上找了一个设计稿，然后根据此稿用CSS尝试进行了实现，下面是实现过程。

日历牌设计图

注：实际实现效果与效果图不完全相同，仍有很大改进空间，欢迎交流批评 :grin:

DOM结构

  1. <div class="calendar-brand-wrapper">
  2.   <div class="calendar-brand-body">
  3.     <div class="calendar-brand-month">December</div>
  4.     <div class="calendar-brand-day">22</div>
  5.   </div>
  6. </div>

CSS样式

  1. .calendar-brand-wrapper {
  2.   position: relative;
  3.   width: 120px;
  4.   height: 120px;
  5.   border: 1px solid #25b49b;
  6.   border-radius: 16px;
  7.   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  8. }
  10. .calendar-brand-body {
  11.   position: absolute;
  12.   left: 0;
  13.   right: 0;
  14.   top: 0;
  15.   bottom: 0;
  16.   border: 7px solid #fff;
  17.   border-radius: 16px;
  18.   background: #25b49b;
  19. }
  21. .calendar-brand-wrapper .calendar-brand-body:after {
  22.   position: absolute;
  23.   left: 0;
  24.   top: 62px;
  25.   right: 0;
  26.   bottom: 0;
  27.   content: ''; 
  28.   border-radius: 0 0 8px 8px;
  29.   background-color: rgba(0, 0, 0, 0.2);
  30. }
  32. .calendar-brand-month {
  33.   height: 30px;
  34.   line-height: 40px;
  35.   text-align: center;
  36.   padding: 0 10px;
  37.   color: #fff;
  38.   font-weight: bold;
  39.   white-space: nowrap;
  40.   overflow: hidden;
  41.   text-overflow: ellipsis;
  42.   font-size: 14px;
  43. }
  45. .calendar-brand-day {
  46.   height: 60px;
  47.   line-height: 63px;
  48.   font-size: 48px;
  49.   font-weight: bold;
  50.   text-align: center;
  51.   color: #fff;
  52. }
  54. .calendar-brand-wrapper .calendar-brand-day:before {
  55.   position: absolute;
  56.   left: 0;
  57.   top: 57px;
  58.   content: '';
  59.   width: 4px;
  60.   height: 10px;
  61.   background-color: #fff;
  62.   z-index: 1;
  63. }
  65. .calendar-brand-wrapper .calendar-brand-day:after {
  66.   position: absolute;
  67.   right: 0;
  68.   top: 57px;
  69.   content: '';
  70.   width: 4px;
  71.   height: 10px;
  72.   background-color: #fff;
  73.   z-index: 1;
  74. }

实现效果

测试代码

  1. <!doctype>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>日历牌</title>
  6.     <style>
  7.     </style>
  8.   </head>
  9.   <body>
  10.     <ul class="test">
  11.       <li>
  12.         <div class="calendar-brand-wrapper">
  13.           <div class="calendar-brand-body">
  14.             <div class="calendar-brand-month">December</div>
  15.             <div class="calendar-brand-day">24</div>
  16.           </div>
  17.         </div>
  18.       </li>
  19.       <li>
  20.         <div class="calendar-brand-wrapper">
  21.           <div class="calendar-brand-body">
  22.             <div class="calendar-brand-month">April</div>
  23.             <div class="calendar-brand-day">8</div>
  24.           </div>
  25.         </div>
  26.       </li>
  27.     </ul>
  28.   </body>
  29. </html>

样例代码请见github。

代码效果

效果图