最近在开发个人博客,想在文章列表左侧用一个日历牌显示文章发布日期,于是在dribbble上找了一个设计稿,然后根据此稿用CSS尝试进行了实现,下面是实现过程。
注:实际实现效果与效果图不完全相同,仍有很大改进空间,欢迎交流批评
<div class="calendar-brand-wrapper">
<div class="calendar-brand-body">
<div class="calendar-brand-month">December</div>
<div class="calendar-brand-day">22</div>
</div>
</div>
.calendar-brand-wrapper {
position: relative;
width: 120px;
height: 120px;
border: 1px solid #25b49b;
border-radius: 16px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.calendar-brand-body {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 7px solid #fff;
border-radius: 16px;
background: #25b49b;
}
.calendar-brand-wrapper .calendar-brand-body:after {
position: absolute;
left: 0;
top: 62px;
right: 0;
bottom: 0;
content: '';
border-radius: 0 0 8px 8px;
background-color: rgba(0, 0, 0, 0.2);
}
.calendar-brand-month {
height: 30px;
line-height: 40px;
text-align: center;
padding: 0 10px;
color: #fff;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
}
.calendar-brand-day {
height: 60px;
line-height: 63px;
font-size: 48px;
font-weight: bold;
text-align: center;
color: #fff;
}
.calendar-brand-wrapper .calendar-brand-day:before {
position: absolute;
left: 0;
top: 57px;
content: '';
width: 4px;
height: 10px;
background-color: #fff;
z-index: 1;
}
.calendar-brand-wrapper .calendar-brand-day:after {
position: absolute;
right: 0;
top: 57px;
content: '';
width: 4px;
height: 10px;
background-color: #fff;
z-index: 1;
}
<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>日历牌</title>
<style>
</style>
</head>
<body>
<ul class="test">
<li>
<div class="calendar-brand-wrapper">
<div class="calendar-brand-body">
<div class="calendar-brand-month">December</div>
<div class="calendar-brand-day">24</div>
</div>
</div>
</li>
<li>
<div class="calendar-brand-wrapper">
<div class="calendar-brand-body">
<div class="calendar-brand-month">April</div>
<div class="calendar-brand-day">8</div>
</div>
</div>
</li>
</ul>
</body>
</html>
样例代码请见github。
代码效果