• Beginner's Guide
  • Python is free and easy to learn after reading this tutorial.

Saturday, 20 October 2012

CSS Widget Box Tutorial for Tips Box between the Posts

Last updated on 05:16 - by Ramandeep Singh - Tags : ,

Today i have designed a CSS widget box which can be used for tips and showing important points in between the posts and pages. I took this idea from well known publishers who use " Point to be noted " box in the books. This widget can be used in between the posts and web pages to insert important points or tips for readers.

Demo



CSS CODING


.hint {
margin: 40px 0;
max-width: 560px;
min-height: 100px;
padding-top: 20px;
overflow: hidden;
background: #FFF5DF url(http://raman.googlecode.com/files/hint.png) no-repeat scroll left top;
border: 1px solid #CB9B4B;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 10px 10px 5px #d6d6d6;
-webkit-box-shadow: 10px 10px 5px #D6D6D6;
box-shadow: 10px 10px 5px #D6D6D6;
display: block;
overflow: hidden;
padding: 20px 40px 0 70px;
line-height: 20px;
font-size: 14px;
}

Understanding the CSS styling


You might want to tune the look and feel of widget, you can do this by editing the above CSS code, give a look how you can do this :-

Background image

I have used this image , you can use any other image with size of 55*93. You may increase or decrease the size of image as you find fit.

Background Color

I have used #FFF5DF as background color. You may change the background color by editing background property.

Typography

This CSS widget will pick your default body typography but you can add custom css by editing .hint CSS property above.

HTML

For putting any text in this box use hint div class, for example
<div class="hint">Your Text Here</div>

Comment below for additions and feedback :)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat volutpat nibh nec posuere. A die shopuf pogest concludi cum administrasset slushie intus calidum brioche.
Follow me @ramantoday
Subscribe to this Blog via Email :

0 comments:

Text Widget

Recent News

About Us

© 2014 DesignRapid. Designed by Ramandeep Singh
Powered by Blogger.
back to top