css single day calender widget


We are going to see a short tutorial to create the single day calendar widget using css. It very simple widget with using few lines of css and html code. Lets see how to create that.



<div class="cal">


div.cal {
  height: 70px;
  width: 70px;
  border-right: 5px solid #fff;
  border-bottom: 5px solid #fff;
  box-shadow: 5px 5px 0px #000;
  -webkit-box-shadow: 5px 5px 0px #000;
  -moz-box-shadow: 5px 5px 0px #000;
  background: #09f;
  border-radius: 10px;
  text-align: center;

div.cal span {
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  display: block;

div.cal span:last-child {
  font-size: 18px;

That’s all your widget is ready use, hope it will useful for someone . Here we have live demo¬†JS fiddle for demo

Posted in Cocktail and tagged by .

About Gowri

I am professional web developer with 8+ years experience. PHP, jQuery, WordPress, Angular and Ionic are my key skills in web development. I am working with strong enthusiastic team with spirit. We provide all web related solution like HTML/CSS development, Web graphic design and Logo.