Archive | CSS RSS for this section

On Press Effect btn through css.

I want to make a btn (background image) effect in three different stage like.. normal, hover and press effect. Actually  I want to push btn inside in depth through css on mouse press. I was thinking that will happen with JavaScript and Ajax.. but when I tried with “a:active” stage.. that magic come up..

For that I cropped image as above and call them through background using “background-position” property.

So this was new learning for me in css. Here is that simple code to make such button effect:

Normal mode:

a.btnKnowMore {





margin:0px auto;



Hover Effect:

a.btnKnowMore:hover {


background-position:0px -28px;


Press effect:

a.btnKnowMore:active {


background-position:0px -56px;


Collection of best websites

Here i am posting some best inspired website which i found till now.

css beauty

design snack cssbased

cssmania cssElite

cssRemix unmatch Style

Knowledge Is Free

Last few weeks I was searching a link for free e-book downloading and today shuklendu send me link of This web portal is place where user can exchange freely e-books, video training and other materials for education purpose. So you can download e-books for free of charge.

Fancy Menu


I have found a very nice fancy menu using Javascript & CSS. Its look like flash animation and really it is a great work in CSS & Javascript.

Check this out.

CSS style sheet optimiser

CSS optimiser

If you want to optimise your CSS code please review below link.  It is online css tool which help you to delete unwanted css code.

Step are very easy :
1. Copy you code and paste it style textarea box or
2. Type your url and click on Go button. You will get a optimised code.

Check this out .

Inline style in html for OnMouseOver

One of the my project I want to define underline on link when mouse overlap. I tried and finally got the solution that how to write a inline style for onMouse Over text change.

code is
<a href=”#” style=”text-decoration:none;” onmouseover=” =’underline’;”
onmouseout=”’none’;”>My Link</a>

Rounded Tab menu through CSS


Tab menus (like above picture) are commonly used in website for the navigation. This tutorial will teach you how to make this tab menu through css.

Let us prepare an image of single tab. It should be big in width so that it can be use for the large text.


Now slice it into two part ( tab_left.jpg) one is left part which is used a little piece of the image.


second one is remaining part (tab_right.jpg) of the image.


Step 2
We completed step 1 now step 2 where we will write a code in html page for the tab menu (like below)

<ul class=”tabs”>
<li><a href=”page1.html”>Page 1 </a></li>
<li><a href=”page1.html”>Page 2 </a></li>
<li><a href=”page1.html”>Page 3 </a></li>

The most important part of the process is CSS stylesheet. Your CSS code should be like this :


ul.tabs li{
background:url(images/tab-active_right.jpg) no-repeat right top;

ul.tabs li a {
background:url(images/tab-active_left.jpg) no-repeat left top;
padding: 0px 20px;


You may have a question about how the two background image are arranged to produce the picture of single tab. So that, here we used larger part (tab_right.jpg) is attached to the right edge of the list item element (<li>). And the small one is (tab_left.jpg) is attached to the left edge of the anchor element (<a>) placed on top of the list.

As result you will get a nice looking tab menu with rounded corner. And tab width automatically adjust to the text width.