最近在开发个人博客,想在文章列表左侧用一个日历牌显示文章发布日期,于是在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. }
  9. .calendar-brand-body {
  10. position: absolute;
  11. left: 0;
  12. right: 0;
  13. top: 0;
  14. bottom: 0;
  15. border: 7px solid #fff;
  16. border-radius: 16px;
  17. background: #25b49b;
  18. }
  19. .calendar-brand-wrapper .calendar-brand-body:after {
  20. position: absolute;
  21. left: 0;
  22. top: 62px;
  23. right: 0;
  24. bottom: 0;
  25. content: '';
  26. border-radius: 0 0 8px 8px;
  27. background-color: rgba(0, 0, 0, 0.2);
  28. }
  29. .calendar-brand-month {
  30. height: 30px;
  31. line-height: 40px;
  32. text-align: center;
  33. padding: 0 10px;
  34. color: #fff;
  35. font-weight: bold;
  36. white-space: nowrap;
  37. overflow: hidden;
  38. text-overflow: ellipsis;
  39. font-size: 14px;
  40. }
  41. .calendar-brand-day {
  42. height: 60px;
  43. line-height: 63px;
  44. font-size: 48px;
  45. font-weight: bold;
  46. text-align: center;
  47. color: #fff;
  48. }
  49. .calendar-brand-wrapper .calendar-brand-day:before {
  50. position: absolute;
  51. left: 0;
  52. top: 57px;
  53. content: '';
  54. width: 4px;
  55. height: 10px;
  56. background-color: #fff;
  57. z-index: 1;
  58. }
  59. .calendar-brand-wrapper .calendar-brand-day:after {
  60. position: absolute;
  61. right: 0;
  62. top: 57px;
  63. content: '';
  64. width: 4px;
  65. height: 10px;
  66. background-color: #fff;
  67. z-index: 1;
  68. }

实现效果

测试代码

  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

代码效果

效果图