10 useful CSS and CSS3 tips for web developers

Selectors are one of the most helpful yet ignored topic of CSS. These selectors are highly used along with J-Query, to apply effects to content of the site.

This is a very useful example of how resize and text-overflow property of CSS3 can be used together. Resize property allows us to specify if an element is resizable. It can be resized either horizontally, vertically or in both directions. Moreover we can give a max-width, so it won’t break the layout completely, and a min-width so that we can’t make it to small either.

At times its not possible to display all text inside an element, the text needs to be clipped. For instance when it overflows the element’s box. When this happens, and we want to leave a visual “hint” to the user that text has been clipped we can use the text-overflow property.

The word-wrap property allows long words to be able to be broken and wraped onto the next line. It takes in two values; normal or break-word. If the width of box is already fixed the long word breaks out of the box as there isn’t enough width for it to be fully contained in the box. If break-word property is used then the long word is broken into two pieces, so that the second part wraps onto the next line. This is currently supported in IE, Safari, and Firefox 3.1

.clsforp{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}

The transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move, skew, etc., elements. Out of these, we are considering Scale, Scale method helps in scaling the height and width of the element, i.e. the size of the element can be increased or decreased along the X and Y axis. This kind of transformation can be highly used to give beautiful HOVER effects.

.mytransform{
margin:10px;
width:100px;
height:20px;
background-color:#FFD1ED;
border:1px solid #fff;
}
.mytransform:hover{
background-color:#FFBDBE;
padding-left:5px;
margin:10px;
transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5); /* IE 9 */
-webkit-transform: scale(1.5,1.5); /* Safari and Chrome */
-o-transform: scale(1.5,1.5); /* Opera */
-moz-transform: scale(1.5,1.5); /* Firefox */
}

The CSS linear-gradient() function creates an image which represents a linear gradient of colors. The result of this function is an object of the CSS gradient data type. Like any other gradient, a CSS linear gradient is not a CSS colour but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.


#insetBgd {
width: 550px;
height: 100px;
background: #E900D9; /* Old browsers */
background-color: #E900D9;
background: -moz-linear-gradient(top, #E900D9, #86007d);
background: -o-linear-gradient(top, #E900D9, #86007d);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#E900D9), color-stop(1,#86007d));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E900D9', endColorstr='#86007d');
}


This kind of gradient images are mostly used many times in Web pages, to create background of page or to create shaded menu or to create buttons. Replacing images and using gradient effect is beneficial as images take time to load, and it gets difficult to modify the images if any changes are to be made in them.

CSS image sprites are a way to use single large image made up of smaller images to improve our page loading time, by reducing the number of requests our server does to load different images. Have a look at the following image, this is a single image.

We have now created the below images of Home and Next by using parts of this single image.

	HOME
	NEXT

At times its important to display one HTML element on top of other HTML elements, this can be the case while performing any transaction or by default showing some element over other, this can be done using Z-index.