CSS Properties Tutorial – Part 1/2

Written by inAm from http://www.temptingmagazine.com on January 7th, 2010 | 1 Comment

This post is part of CSS2 properties tutorial where ill explain some very simple but extremely useful techniques using CSS2. The tutorial constitutes of properties like clip,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.

I have tried explaining them with examples and coding so please leave comments below for further questions. Also, Keep a bookmark for next part of tutorial.

White-space

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;
}

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 toabsolute. Then, specify the top, right, bottom, and left value relative to the element.

Image Clip Example

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

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;
}

Please share this post with others using bookmark icons below and Subscribe in readers : )

Related posts:

1. CSS Properties Tutorial – Part 2/2
2. Convert the Layout of Website Into HTML Template – Website Development Tutorial
3. How to Create Professional Website Layouts – Website Development Tutorial
4. Create Super Cool CD Stickers in Photoshop
5. PHP and MySQL Programming Tutorial

Looking for something else?

Subscribe to our feeds via email.