Five Simple but practical CSS attributes

This article introduces five practicalCSSAttribute. You should be familiar with it, but it is very rare to use it. I am not talking about the new CSS3 attributes. I am referring to the attributes in the old CSS2, such as clip, min-height, white-space, curosr and display are widely supported by all browsers. Therefore, do not miss this article, because you may find that they have such a big purpose.

1. CSS Clip

The clip attribute is like a mask. It allows you to use a rectangle to mask the content of page elements. To edit an element: You must specify its position attribute as absolute, and then specify the top, right, bottom, and left values relative to the element.

Image editing instance (DEMO)

The following example shows how to use the clip attribute to mask an image. First, specify the <div> element as position: relative, specify the element as position: absolute, and set the rect value as needed.

. Clip {
Position: relative;
Height: 130px;
Width: 200px;
Border: solid 1px # ccc;
}
. Clip img {
Position: absolute;
Clip: rect (30px 165px 100px 30px );
}

Resize and edit images (Demo)

In this example, I will show how to adjust the image size and edit the image. The clip image is rectangular and I want to reduce it to 50% to create a thumbnail in square format. Therefore, I use the width and height attributes to adjust the image and use the clip editing attribute to mask it. Then, use the left attribute to remove the 15px distance from the image.

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

• Three pages in total:
• Previous Page
• 1
• 2
• 3
• Next Page