Top 100 CSS Tips

Category: CSS    |    1,133 views    |    Add a Comment  |   

 

CSS Rounded Corners

Rounded corners is one of the most popular and frequently requested CSS techniques. There lots of ways to create rounded corners with CSS, but they always require lots of complex HTML and CSS. Here are easy ways to achieve this effect.

 

CSS Sprites

CSS sprites save HTTP requests by using CSS positioning to selectively display composite background images. To maximize accessibility and usability, CSS sprites are best used for icons or decorative effects.

Read more…

 

Top One Line Css Tips

Category: CSS    |    1,044 views    |    Add a Comment  |   

The best solutions are often the simplest. Here’s a list of 8 tips that contain only one css property.

1. Vertical centering with line-height

line-height:24px;

When you have a container with fixed height you can use line-height property to vertically center the content.
Take a look at this demo.

2. Prevent oversized content to break fixed width floated layouts

#main{
 overflow:hidden;
}

When oversized content (i.e. wide image) is placed in fixed width floated container, it may break the layout. To prevent that use this trick. It will hide a part of the content but at least your layout structure will remain intact.

Read more…

 

Top CSS Best Hacks

Category: CSS    |    706 views    |    Add a Comment  |   

If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And also you must know how much time we are spending in all those hacks and fixes for various browsers.

Here is the list of 10 hand picked CSS hacks and tricks which can help you in your CSS code and also save some time.

Min-Height

selector {
min-height:500px;
height:auto; !important
height:500px;
}

Autoclear

.container:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {display: inline-table;}
/* Hides from IE-mac \*/
* html .container {height: 1%;}
.container {display: block;}
/* End hide from IE-mac */

Read more…