Check out the Latest Articles:

Tutorial #3: Hot Dates With CSS

By Montoya Tuesday August 4, 2009

Tutorial #3: Hot Dates With CSS

I’m back from a long hiatus, and I present to you a classic tutorial from my blog, which I posted in 2006. Now you can watch my process in video form and see some new techniques not in the original tutorial. This is the first part; the second part will incorporate background images for more effects.

Remember to view in HD to get the proper quality.

Here is the HTML used in this tutorial:

<acronym class="published" title="August 11, 2009">
	<span class="pub-month">Aug</span>
	<span class="pub-date">11</span>
</acronym>

And here is the final CSS:

.published {
  display:block;
  text-align:center;
  float:left; 
  font-family:Arial, Helvetica, sans-serif; 
  border-bottom:none; 
}
.pub-month {
  display:block; 
  font-size:.9em; 
  margin:0; 
  padding:0; 
}
.pub-date { 
  display:block; 
  font-size:1.4em; 
  margin:0; 
  padding:0; 
}
 
.published { 
  border:1px outset #666; 
}
.pub-month { 
  background-color:#555;
  color:#fafafa; 
  padding:.2em .4em; 
}
.pub-date { 
}
 
body { 
  padding:2em; 
}
 
h1 { 
  font-size:1.5em; 
  margin-bottom:1em; 
}
 
p { 
  margin-left: 3em;
}
  • Share/Save/Bookmark


1 Comment
  1. designfloat.com

    CSS Video Tutorial: Calendar Style Dates for Blogs…

    A video tutorial from CSSIsEasy.com on making calendar-style dates for blog posts with pure CSS. …