Creating A Cool Post Date Icon Using CSS
Our featured tutorial for today is from Chris Spooner of LINE25, and what it’s about is recreating that classic and attractive calendar (or date) icon which I’m pretty sure is quite familiar to everyone; we usually see it on various user interfaces to represent an organizer app or widget.
But in this tutorial,,you’re going to recreate it to represent the date of your blog posts. And the best part of it is you won’t have to use Photoshop to make it. Instead, you’ll only be using CSS!
I’m only going to show the final product (i.e. HTML and CSS code) in this post, if you’d like to get a better understanding of how the whole process is done and want to have a real good idea on what each line of code represents, then I highly encourage you to check out Chris’ wonderful tutorial HERE. Otherwise, read on below.
The basic HTML markup looks like this:
<div>
<p>25 <span>May</span></p>
</div>
As for the CSS, there are two sets; one contains the attributes for the appearance of the box, while the other one is for the date:
BOX
.date {
width: 130px; height: 160px;
background: #fcfcfc;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
border: 1px solid #d2d2d2;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.1); }
DATE
.date p span {
background: #d10000;
background: linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;
display: block;
border-top: 3px solid #a13838;
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
padding: 6px 0 6px 0;
}
In his detailed tutorial, Chris also shows and points out the differences in the resulting appearance of the CSS icon between browsers (IE10, Chrome, Safari, and FireFox). You might want to look in on that too.
You can see a demo of the icon HERE.
0
503
