advertisement
This post is about 5 useful CSS properties that you should be very familiar with, but will most likely rarely use. I’m not talking about the new fancy CSS3 properties. I’m referring to the old CSS2 properties such as: clip, min-height, white-space, cursor, and display that are widely supported by all browsers. So, don’t miss this post because you might be surprised how useful they are.
1. CSS Clip
The clip property is like a mask. It allows you to mask the content of an element in a rectangle shape. To clip an element: you must specify the position to absolute. Then, specify the top, right, bottom, and left value relative to the element.
how css clip works
Image Clip Example (demo)
The following example shows you how to mask an image using clip property. First, specify the
element to position: relative. Next, specify the ![]()
element to position: absolute and the rect values accordingly.
image clip
.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}
Image Resize and Clip (demo)
In this example, I’m going to show you how to resize and clip images. My original images are in rectangle format. I want to scale it down by 50% to create a thumbnail gallery in a square format. So, I used the width and height property to resize the images and mask them with the clip property. Then, I used the left property to shift the images to the left by 15px.
thumb gallery
.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;
}
2. Min-height (demo)
The min-height property allows you to specify the minimum height of an element. It is useful when you need to balance the layout. I used it on my job board to ensure the content area is alway taller than the sidebar.
job board
.with_minheight {
min-height: 550px;
}
Min-height hack for IE6
Note: min-height is not supported by IE6, but there is a min-height hack.
.with_minheight {
min-height:550px;
height:auto !important;
height:550px;
}
3. White-space (demo)
The white-space property specifies how white-space is handled in an element. For example, specify white-space: nowrap will prevent the text from wrapping to next line.
nowrap
em {
white-space: nowrap;
}
4. Cursor (demo)
If you change the behavior of a button, you should change its cursor as well. For example, when a button is disabled, the cursor should be changed to default (arrow) to indicate that it is not clickable. So, the cursor property is extremely useful for developing web apps.
cursor
.disabled {
cursor: default;
}
.busy {
cursor: wait;
}
.clickable:hover {
cursor: pointer;
}
5. Display inline / block (demo)
In case you didn’t know: block elements are rendered on a new line, whereas inline elements are rendered on the same line.
image clip
.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}
Image Resize and Clip (demo)
In this example, I’m going to show you how to resize and clip images. My original images are in rectangle format. I want to scale it down by 50% to create a thumbnail gallery in a square format. So, I used the width and height property to resize the images and mask them with the clip property. Then, I used the left property to shift the images to the left by 15px.
thumb gallery
.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;
}
2. Min-height (demo)
The min-height property allows you to specify the minimum height of an element. It is useful when you need to balance the layout. I used it on my job board to ensure the content area is alway taller than the sidebar.
job board
.with_minheight {
min-height: 550px;
}
Min-height hack for IE6
Note: min-height is not supported by IE6, but there is a min-height hack.
.with_minheight {
min-height:550px;
height:auto !important;
height:550px;
}
3. White-space (demo)
The white-space property specifies how white-space is handled in an element. For example, specify white-space: nowrap will prevent the text from wrapping to next line.
nowrap
em {
white-space: nowrap;
}
4. Cursor (demo)
If you change the behavior of a button, you should change its cursor as well. For example, when a button is disabled, the cursor should be changed to default (arrow) to indicate that it is not clickable. So, the cursor property is extremely useful for developing web apps.
cursor
.disabled {
cursor: default;
}
.busy {
cursor: wait;
}
.clickable:hover {
cursor: pointer;
}
5. Display inline / block (demo)
In case you didn’t know: block elements are rendered on a new line, whereas inline elements are rendered on the same line.
,
, and
tags are examples of block elements. Examples of inline tags are: , , and . You can override the display style by specifying display: inline or block.
display: inline or block
.block em {
display: block;
}
.inline h4, .inline p {
display: inline;
}
