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 {

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;

}

Collection of best websites


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


css beauty
 cssnature

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 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.

http://knowfree.net

Fancy Menu


fancymenu.jpg

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.

http://devthought.com/cssjavascript-true-power-fancy-menu/

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 .
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


menu.jpg

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.

tab.jpg

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

tab_left.jpg

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

tab_right.jpg

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.