All posts in CSS

CSS !important

by PhpFreak on September 22, 2011 in CSS Tips, Tips & Tricks with No comments

I saw many XHTML/CSS coder use:

margin: 20px !important; margin: 10px;

I asked them why they use it? But they didn’t manage to satisfy me with their answer. Today I found this answer looks more appropriate. Please read below! Continue reading →

CSSDesk online CSS sandbox

by Arifur Rahman on September 12, 2011 in CSS Tips with No comments
Online Live Css Editor

CSSDesk is and online CSS sandbox. You can enter your html and css there. and view how it looks like.
You can share the icon and html with you user. You can also downlaod the result.
You also get some different background option.
Here is one of the share url of css desk share http://cssdesk.com/jLWnV

CSS Desk is nice tool for all the web developers to share there css and html with others.

 CSS Desk -Online CSS Sandbox

Hope this tutorial will help all of you.

Css Sprites for Website Performance

by Arifur Rahman on April 14, 2011 in CSS, CSS Tips with 5 Comments

In this tutorial you will learn about css sprites.
Sprite means one big image. You may seen css techniques where developer use css sprites.
When you hove on a button or image it will changed the background. But if you see thee css
then you will see that there they use one image rather than use two images.

By combining different image we make image sprites.

I haven’t used CSS Sprites in the past time. As i am developed and not expert on photo shop so i just used separate image.
After reading yahoo’s Best Practices for Speeding Up Your Web Site. I think that we have to use
css sprites. So i used css sprites for our this product. smart-social-network-count-wordpress-plugin

Here is the template image
css-sprites-smart-social-count-wodpress-plugin-template
Before use css sprite used 7 images which size is 9.56 KB (9,791 bytes)
Afer uses css sprite : 9.52 KB (9,749 bytes)
Continue reading →

Simple Ways to Create CSS Rounded Corners

by Arifur Rahman on March 2, 2011 in CSS with No comments

Now a days rounded corner uses has becoming very popular. Some one use moz rounded corner css3. Some uses images. But moz-rounded corner don’t show rounded corner in ie. So that people use image to build rounded corner. To day i search in Google for round corner in css. From Google i got some valuable link. I decided to share those link with you, so that you can find them.
But wait, there’s more

css round corner menu with image

by the coder on April 29, 2010 in CSS, CSS MENU with 6 Comments

In many site we see round corner menu. Which is made from image. Today i will show you how , you can make this kind of menu.
The menu will look like bellow.

For this we have to slice the round image in two part.
But remember we have to take the right image width big. It will be the max size of our menu text width.
As our background is black so we have to cut the image with black background. The left image is for left part and the right image is for right part.

We use the left image in .nav li.current a, .nav li a:hover

This means that when we hover over the menu it show the round image or when it is active.

Bellow is html code.

<div id="navigation">
			<ul class="nav">
			<li class="current"><a href="#"><span>Home</span></a></li>
			<li><a href="#"><span>Get Started</span></a></li>
			<li><a href="#"><span>How To Call</span></a></li>
			<li><a href="#"><span>SMS</span></a></li>
			<li><a href="#"><span>Recharge</span></a></li>

			
			</ul>
           
	  </div>

Here we use to show

  • current active menu. Which also use in hover menu.
    Here use the bellow code to show left image when hover to li a element.

    .nav li.current a, .nav li a:hover{
	color: #fff; /*left tab image path*/
	background-position: left top;
	background-image: url(images/menu_li_hover_left.png);
	background-repeat: no-repeat;
}

    The right image will show in span tag.

    .nav li.current a span, .nav li a:hover span{
	color: #000; /*right tab image path*/
	background-image: url(images/menu_li_hover_right.png);
	background-repeat: no-repeat;
	background-position: right top;
}

    Here we use a background image in navigation div which is

    #navigation {
	height:44px;
	background-image: url(images/menu_bg.png);
	background-repeat: repeat;
}

    So now we write the full css code for the menu.

     #navigation {
	background-color: #000;
	height: 44px;
	margin-right: 17px;
	
}
#navigation {
	height:44px;
	background-image: url(images/menu_bg.png);
	background-repeat: repeat;
}
.nav{
	height: 35px;
	list-style: none;
	line-height: 35px;
	padding-top:4px;


}
.nav li{
	float:left;
	padding-left:7px;
	
}
.nav li a{
	float:left;
	display:block;
	height:44px;
	text-decoration:none;
	padding-left:5px;
	font-weight:bold;
	color:#FFF;
}
.nav li a span{
	height:44px;
	float: left;
	display: block;
	padding: 0 10px 0 8px; /*Padding of menu items*/
}
.nav li.current a, .nav li a:hover{
	color: #fff; /*left tab image path*/
	background-position: left top;
	background-image: url(images/menu_li_hover_left.png);
	background-repeat: no-repeat;
}
.nav li.current a span, .nav li a:hover span{
	color: #000; /*right tab image path*/
	background-image: url(images/menu_li_hover_right.png);
	background-repeat: no-repeat;
	background-position: right top;
}

    [smProductImageAdd src="http://learneveryday.net/codecanyon/adverticement/add_codecnayon_smart-social-share-php.png" alt= "Smart Social Share" href="http://codecanyon.net/item/php-smart-social-share/202558" title="Smart Social Share (Php Plugin)" description="Smart Social share is a php plugin . Which helps you to give user to share your content with social book mark site. There are 4 plugin in this package." ref="marifdu"]
    This menu is relay easy to make. Bellow you can see the demo or you can download the code to use in your site.

    View Demo

    Download

    • Page 1 of 212