New Features in CSS 3.0

Introduction To CSS 3.0

CSS 3.0 is the latest version of CSS. It is completely backwards compatible and all the browsers will always support CSS 2.0. Some latest browsers have implemented the properties of CSS 3.0.

Text Effects in CSS 3.0

1. Text Shadowing: Using this property we can apply shadow to text.

Syntax: text-shadow : h-shadow v-shadow blur color;

• h-shadow: horizontal shadow position. It is the Mandatory field. Negative values are allowed
• v-shadow: vertical shadow position. It is the Mandatory field. Negative values are allowed
• blur = blur distance
• color = color of the shadow
1. Word Wrapping: Using this property we can wrap the text within an area.

Syntax: word-wrap: normal | break-word;

• Normal: breaks words at allowed break points
• Break-word : unbreakable words to be broken

Example 1: text-shadow

1
2
3
4
5
6
7
8
9
10

<style type="text/css">
		h1
		{
			text-shadow: 6px 6px 4px #blue;
		}
		h2
		{
			text-shadow: 4px 4px 4px #red;
		}
	<style>

Output:

Example 2: word-wrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<style type="text/css">
		p.ex
		{
			width:11em;
			border:1px solid #000000;
		}
		p.ex1
		{
			width:11em;
			border:1px solid #000000;
			word-wrap:break-word;
		}
		p.ex2
		{
			width:11em;
			border:1px solid #000000;
			word-wrap:normal;
		}
	</style>

Output:

Other text properties introduced in CSS 3.0

Note : Below properties are still not supported by any browsers

• Hanging punctuation: To specify whether a punctuation mark should be placed outside the line box.
• Punctuation Trim: You can specify whether punctuation character should be trimmed.
• Text Emphasis: To apply emphasis mark
• Text outline: specify the text outline
• Text Shadow: add shadow to text
• Text Wrap : Breaking rules for text

Prefixes:

• When you are using any of the Border property in Firefox we need to have a prefix –mozEx: -moz-border-radius:25px;
• When you are using any of the Border property in safari and chrome we need to have a prefix –webkitEx: -webkit-border-radius:25px

CSS 3.0 Borders

We can use image as a border , add shadow to boxes and create rounded border.

Properties of border are: border-radius , box-shadow and border-image.

• Border Radius:

In CSS 2.0 for creating a rounded corner we used to use different images for each corner but using CSS 3.0 its very easy by using border-radius property.

Syntax: border-radius: 1-4 lengths;

Note:The Four values are given in the order top-left, top-right, bottom-right and bottom-left

Example 3: border-radius:

1
2
3
4
5
6
7
8
9
10
11
12

<style type="text/css">	
		div
		{
			border:5px solid blue;
			padding:25px 50px;
			background:cyan;
			width:400px;
			-moz-border-radius:25px;
			/* For Firefox  we need to add moz*/
			border-radius:30px;
		}
	</style>

Output:

• Box Shadow property :

We can add shadow to boxes using the shadow property of CSS

Ex: -moz-box-shadow

Syntax: box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow – position of horizontal shadow
• v-shadow – position of vertical shadow
• blur – blur distance
• spread – size of the shadow
• color – color of the shadow
• inset – changes the shadow from an outer to inner shadow

Example 4: Box-shadow

1
2
3
4
5
6
7
8
9
10
11

<style type="text/css">
		div
		{
			width:400px;
			height:200px;
			background-color:orange;
			-moz-box-shadow: 25px 25px 20px yellow; /* Firefox */
			-webkit-box-shadow: 20px 20px 10px yellow; /* Safari and Chrome */
			box-shadow: 20px 20px 10px yellow;
		}
	</style>

Output:

• Border – Image :

We can create a border using image.

Syntax: Syntax: border-image: source slice width outset repeat;

• Source : path of the image to be specified
• Slice : inward offsets of the image border
• Width :width of the image border
• Outset : outset of the image border
• Repeat : image has to be repeated, rounded or stretched

Example 5: Border-image

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<style type="text/css">
		div
		{
			border-width:20px;
			width:200px;
			padding:20px 30px;
		}
		#StretchIMG
		{
			-moz-border-image:url(about.png) 100 100 stretch; /* Firefox */
			-webkit-border-image:url(about.png) 100 100 stretch; /* Safari and Chrome */
			border-image:url(about.png) 100 100 stretch;
		}
	</style>

Note:Border property is not supported in any of the IE versions except IE 9.

CSS 3.0 Font

Using CSS 3.0 , users can use any font of their choice even though if it is not installed in their machine.

• We just need to include the font file in the web site and the same will be automatically downloaded to the user when needed. You just need to describe the new CSS 3.0 @font face rule.
• In the @font face we need to define the URL and also the name of the font.
• Using CSS 3.0 designers can use the fonts which are not web safe.

Example 6: CSS 3.0 Font

1
2
3
4
5
6
7
8
9
10
11
12

<style type="text/css">
		@font-face
		{
			font-family: FontEx;
			src: url('Sansation_Light.ttf')
			,url('Sansation_Light.eot') format("opentype"); /* IE */
		}
		div
		{
			font-family: FontEx;
		}
	</style>

Note:&nbsp&nbsp IE supports only .eot(Embedded OpenType).&nbsp&nbsp Other Browsers supports both type .ttf(True Type Fonts) and .otf(Open Type Fonts).

Bold Text: To make the font bold you can use one more property with font face

i.e : font-weight:bold;

Comments

comments