5 simple and useful CSS properties

This article introduces 5 useful CSS properties. You should be familiar with it, but will probably rarely use it. I'm not talking about looking ahead to new CSS3 properties, I'm talking about the old CSS2 properties like clip, min-height, white-space, curosr and display that are widely supported by all browsers. So don’t miss this article as you may find them of great use.

1. CSS Clip

The clip property is like a mask. It allows you to mask the content of page elements using rectangles. To clip an element: you must specify its position property as absolute, and then specify the top, right, bottom, and left values ​​relative to the element.

Image clipping example ( demo )

The following example demonstrates how to use the clip property to mask an image. First, specify the <div> element as position:relative, then specify the <img> element as position:absolute, and set the rect value according to actual needs.

.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}

 Image resizing and clipping ( demo )

In this example I'll show you how to resize and crop a picture. The stock image is rectangular and I want to cut it down to 50% of its size to create a square format thumbnail. So I used the width and height properties to resize the image, and the clip property to mask it. Then use the left attribute to move the image 15px to the left.

.

gallery li {
float: left;
margin: 0 10px 0 0;
position: relative;
width: 70px;
height: 70px;
border: solid 1px #000;
}
.gallery img {
width: 100px;
height: 70px;
position: absolute;
clip: rect(0 85px 70px 15px);
left: -15px;
}