Beginner’s Sample Guide to CSS3

The level 3 of Cascading Style Sheet or better known as CSS3 has a new features of like – the text shadows, border with images, opacity, multiple backgrounds, ect, just to name a few.

In this article we only give a few simple samples how to create and use CSS3 new features.

CSS3: Border

A guide to creating rounded border with CSS3’s border-radius property and the box-shadow property is used to add shadow to boxes.

CSS3: Border with Image

With the CSS3 border-image property you can use an image to create a border.

Border image stretched

The original image used to create the border above :

CSS3: Backgrounds

CSS3 contains several new background properties such as:

• background-size

Background stretched:

Background resize:

Multiple background image:

If you want to mix two or more pictures as a background, you can add in CSS3.

The background image we use for the image above is:   and 

• background-origin

The background-origin property specifies the positioning area of the background image. The background can be placed within the content-box, padding-box, or border-box area.

• background-clip

Specify the painting area of the background

CSS3: Text Effects

CSS3 contain several new text features like:

• word-wrap

In CSS3, the word-wrap property allows you to force the text to wrap – even if it means splitting it in the middle of a word.

Without word-wrap

With word-wrap:break-word

• text-shadow

The text-shadow property applies shadow to text.

We will provide another features sample of CSS3 on the next article. If you have any queries please Contact Us