No replies to this topic

[web_designer]

[size=2]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:

[/size] 

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