CSS Widget Box Tutorial for Tips Box between the Posts

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 :)

Pencil drawing online course - Download here


Join 40,000+ readers and get free notes in your email

0 comments:

Post a Comment