Make Your Layout Look Better With Css… Try These 5 Css Properties… css properties

This is my first post and I want to share with a little bit about CSS. These CSS properties very useful, but I think it used rarely. these are: clip, min-height, white-space, cursor, and display the amazing thing about them that are widely supported by all browsers.

 

Let's start…

 

1- clip:

 

It works like a mask. That means it masks the content of the element in a rectangle shape. To use this property we should set the position to absolute, set the top, right, bottom and left to relative

 

Ex:

 

?

.clip {  position: relative;  height: 250px;  width: 400px;  border: 1px solid #0000;}.clip img {  position: absolute;  clip: rect(50px 160px 100px 50px);} ?

 

2- Min-height:?

 

This property allows us to specify the minimum height of the element. This is very useful when we want to balance our layout.

 

Ex:

 

?

.minheight {  min-height: 600px;}

The problem appears when we use the browser ie6. ie6 doesn't support this property but, don’t worry there is a hack.

.minheight {  min-height:600px;  height:auto !important;  height:600px;}

?

 

3. White-space:

 

This 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.

 

Ex:

 

?

em {  white-space: nowrap;}

?

 

4. Cursor :

 

When we change the behavior of a certain button, we should change the cursor too. For example, if we disable a button, then we should changed the cursor as well (to default arrow) to show the user that is not clickable any more.

 

Ex:

 

?

.disabled {  cursor: default;} .busy {  cursor: wait;} .clickable:hover {  cursor: pointer;} ?

 

5. Display inline / block :

 

These two properties are very useful when we try to arrange our layout. Inline elements (like <em>, <span>, and <strong> tags) are rendered on the same line. But bock elements (like <div>, <h1>, and <p> tags) are rendered on a new line.

 

Ex:

 

? .block em {  display: block;} .inline h4, .inline p {  display: inline;}

I wish you find this post useful...