css single day calender widget

on with Leave a reply

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.

css-cal-widget

HTML

<div class="cal">
  <span>03</span>
  <span>Oct</span>
</div>

CSS

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 4+ years experience. PHP, jQuery, WordPress, Magento and Symfony2 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.

Leave a Reply

Your email address will not be published. Required fields are marked *