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 {
background-image:url(Img/btnKnowMore.gif);
display:block;
height:28px;
width:128px;
margin:0px auto;
outline:none;
}
Hover Effect:
a.btnKnowMore:hover {
background-image:url(Img/btnKnowMore.gif);
background-position:0px -28px;
}
Press effect:
a.btnKnowMore:active {
background-image:url(Img/btnKnowMore.gif);
background-position:0px -56px;
}
Knowledge Is Free
Last few weeks I was searching a link for free e-book downloading and today shuklendu send me link of knowfree.net. 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
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 .
http://flumpcakes.co.uk/css/optimiser/
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=”this.style.textDecoration =’underline’;”
onmouseout=”this.style.textDecoration=’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.
Step1
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>
</ul>
Step3
The most important part of the process is CSS stylesheet. Your CSS code should be like this :
————
ul.tabs{
list-style-type:none;
padding:0px;
margin:0px;
}
ul.tabs li{
background:url(images/tab-active_right.jpg) no-repeat right top;
float:left;
height:32px;
padding:0px;
margin:0px;
margin-left:3px;
color:#990000;
}
ul.tabs li a {
background:url(images/tab-active_left.jpg) no-repeat left top;
height:32px;
padding: 0px 20px;
float:left;
padding-top:5px;
color:#990000;
}
————
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.
ashok suthar 
