Textbox with background image using CSS

Share |

We can use CSS To make stylish textboxes like rounded corner textbox or textbox with some image inside. Rounded corner text box is like following image.

To make rounded corner textbox we use following logic. We will put textbox in some wrapper layer i.e. div tag and apply style to wrapper layer.

Now style applied to wrapper div tag is as follows

.tt-wrapper
 {
 background-image:url('images/user_box.png');
 margin:0;
 width:255px;
 height:35px; 
  }

In above style user_box.png is a background image (check following image.)

 Then we apply style to fit the textbox with in wrapper div class.

.tt{
 width:240px;
 height:25px;
 margin:5px 0 0 8px;
 border:none;
 background:none;
 }

And we are done with Textbox with rounded corner. To display some image inside textbox we simply need to add background image in the class applied to textbox

Read more...

CSS- Bubble Tool Tip

Share |

Very simple to use bubble tool tip, easy to implement.
I got this code some time back, during my initial phase of web development.

In the body tag put following code

<br /> <div id="container"><br /> <h1>CSS Bubble Tooltips</h1><br /> <p>This id demo <a href="#" class="tt">hover here!<span class="tooltip"><span class="top"></span><span class="middle">This is the Demo Tool tip... enjoy</span><span class="bottom"></span></span></a>. This is just a demo code...</p><br /> </div><br />


This code is very easy to understand, check style tag and download following images and change the paths accordingly in style tag.

Download Demo Code here --> Bubble Note.zip

Read more...