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: 18 17 16 15 14 13 12 11 10 9 8 … 1 » Show All
There are 180 comments (+Add)
Pages: 18 17 16 15 14 13 12 11 10 9 8 … 1 » Show All
Loading ...
180 Gypsy Babu http://workinprogress
February 2nd, 2010 at 4:24 pm
I am working on CSS .And this article will help me a lot.I request to you please share some more tips.
Thank you.
179 Gopinath http://www.thoughtsunlimited.com
January 29th, 2010 at 7:19 am
Thoughts Hosting:- Domain Name Rs.92/-only, 10Gb space, 100 Email id’s, Rs.2600/-only. And for every domain get FREE extras over 7900/-. *Start Your Own Web Hosting Company Only for Rs.4000/-. visit: http://www.thoughtshosting.com, Contact:9059747833
178 Elliot condon
January 28th, 2010 at 5:30 pm
Clipping! Awesome. I had no idea that could be done. Thanks heaps
177 phenomenia http://phenomenia.com
January 28th, 2010 at 4:43 pm
Didn’t know the clip attribute. Might by handy one day. Thx!
176 Wolfgang http://www0.fh-trier.de
January 20th, 2010 at 11:42 am
Hi,
I tried to change the position of this image stting: top to 0 and left to 0. but it didn’t work.
Do you know how i can proceed?
175 Mr. dametøj http://www.walkingartwork.com
January 15th, 2010 at 4:46 am
Great article, I didn’t know these properties…. but than again, I am quite the newbie… thanks for sharing
Cool design of your blog BTW - thumbs up!
174 Luana http://limoesdepapel.blogspot.com
January 13th, 2010 at 10:07 am
AMASING, very usefull post! thanks, i just didn’t understand the white space, i think that more exemples could be better, thanks!!
173 Dima
January 13th, 2010 at 7:09 am
min-height is the best! ty very much
172 Itsashirt T shirts http://www.itsashirt.com
January 13th, 2010 at 4:32 am
Love to play around with CSS, thnx for the post
171 Loan Expert http://nfo.atspace.com
January 12th, 2010 at 9:10 pm
Thanks for the CSS properties for web design