Create Plain Calendar Icons Using CSS – cal.css

Preview:

Description:

cal.css is a CSS library to create simple plain calendar icons representing any dates.

How to use it:

1. Insert the cal.css stylesheet into the HTML page.

<link rel="stylesheet" href="cal.css" />

2. Create a calendar icon and replace the month & date as follows:

// Jan 1st
<div class="cal">
  <div class="month">January</div>
  <div class="date">1</div>
</div>

3. Override the default styles to create your own icon styles.

.cal {
  display: inline-block;
  border: .1px solid #CCCAC5;
  background-color: #FFF;
  width: 250px;
  font-family: Arial, sans-serif;
  text-align: center;
}
.cal .month {
  height: 50px;
  line-height: 50px;
  font-size: 2rem;
  text-transform: uppercase;
  background-color: #E75951;
  color: #FFF;
}
.cal .date {
  font-size: 10rem;
  color: #585858;
  line-height: 175px;
}