Nov 09
5 Simple, But Useful CSS Properties
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.
Image Clip Example (demo)
The following example shows you how to mask an image using clip property. First, specify the <div> element to position: relative. Next, specify the <img> element to position: absolute and the rect values accordingly.
.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.
.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.
.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.
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.
.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. <div>, <h1>, and <p> tags are examples of block elements. Examples of inline tags are: <em>, <span>, and <strong>. You can override the display style by specifying display: inline or block.
.block em {
display: block;
}
.inline h4, .inline p {
display: inline;
}
Fireworks vs Photoshop Compression Coding Clean and Semantic Templates
Comments
Pages: 21 20 19 18 17 16 15 14 13 12 11 … 1 » Show All
There are 203 comments (+Add)
Pages: 21 20 19 18 17 16 15 14 13 12 11 … 1 » Show All
Loading ...
203 Katie http://www.katieful.com
July 23rd, 2010 at 11:44 pm
Thanks for sharing these css properties. Can you display which browsers support which properties. I know there are some issues with white-space.
202 Mina
June 29th, 2010 at 10:50 am
Yay! Thanks for these tips! very useful. I already knew ‘cursor’ and ‘min-height’, but they are not very common properties. By the way, I love this site
201 doctormazo http://www.doctormazo.com/
May 28th, 2010 at 10:31 am
Cool article! Thanks!
200 elitstudio http://www.elitstudio.com/
May 21st, 2010 at 2:56 am
Cool tutorial!
199 Website Design http://www.newviewit.com
May 6th, 2010 at 7:45 am
interesting about the css clip… never used it.
Would the images still be the same size and take the same amount of time to load on the page? Why not just crop in PS to cut down on page load times?
198 drummer http://www.ivanovandrey.net/
May 4th, 2010 at 7:22 am
Great site and very nice info! Thanks!
197 Web Design http://exmmedia.com
April 28th, 2010 at 9:24 pm
quick and helpful tutorial..much thanks
196 Chris
April 28th, 2010 at 7:00 am
For display I think you missed out 2 values which are ery useful: ‘none’ and ‘inline-block’. None hides the element and is very useful with Javascript etc. and inline-block allows you to use some of the characteristics of a block elements (height, top and bottom padding etc.) on inline elements.
195 Josh http://www.joshbreslow.com
April 8th, 2010 at 5:19 pm
Hello, I think #3 is wrong. I believe setting the white-space to nowrap would keep it all on one line. Thus, not wrapping as the value suggests.
194 Diana http://twitter.com/Dianakc_
April 6th, 2010 at 11:59 pm
That is nice! Thanks!