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. There are lot of new features added into the CSS 3.0. When we are busy discussing about the HTML 5, CSS 3.0 also brings lot of exciting things to the designers. This article explores some of the new features introduced with the latest version with few simple example. If you are interested in receiving the future updates on the latest articles, please follow us on @twitter and @facebook.
Text Effects in CSS 3.0
- 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
- 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
<style type="text/css"><!--
h1
{
text-shadow: 6px 6px 4px #blue;
}
h2
{
text-shadow: 4px 4px 4px #red;
}
--></style>
Output:
Example 2: word-wrap
<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>
<pre>
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:
<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
<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
<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
<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:   IE supports only .eot(Embedded OpenType).   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;
CSS 3.0 Background Properties
Several new background properties are provided by CSS 3.0 which will help us to get greater control of the background elements.
-
Background-size:
This property specify the size background image. Before CSS 3.0 , background size was decided by the actual size of the image. We can specify the size in percentage or pixels.
Syntax: background-size: percentage|cover|contain|length
Example 7: background-size
<style type="text/css"><!--
body
{
background:url("Infy.jpg");
-moz-background-size:800px 400px; /* Firefox */
background-size:800px 400px;
background-repeat:no-repeat;
padding-top:40px;
}
--></style>
-
Length –
width and height of the background image is set using this value. Width is set using the first value and height is set using the second value. If we give only one value , second is set to auto.
-
Percentage –
width and height of the background image is set in terms of percentage. Width is set using the first value and height is set using the second value. If we give only one value , second is set to auto.
-
Cover –
Using cover we can reduce the size of the image to the smallest value so that both width and height can fit inside the content area
-
Contain –
Using contain we can increase the size of the image to the largest value so that both width and height can fit inside the content area.
Example 8: background-origin
<style type="text/css"><!--
div
{
padding:40px;
border:4px solid black;
background:url(Infy.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
#div3
{
background-origin:padding-box;
}
--></style>
-
Multiple background images:
CSS3 allows us to have multiple images for a single element.
Ex: background-image:url(img1.png),url(img2.jpg);
Example 9: Multiple background Images
<style type="text/css"><!--
body
{
background-image:url(firebug128.png),url(wwwwge001.jpg);
}
--></style>
CSS 3.0 Transition
Using CSS 3.0 transitions we add effects when elements changes its style from one style to another. We need not use JavaScript or Flash animations for the same. To do this we need to add 2 things:
- We need to specify the CSS property for which effect need to be added.
- We need to specify the duration of the effect.Syntax: transition: property duration
Example 10: Transition
<style type="text/css"><!--
div
{
width:200px;
height:200px;
background:cyan;
transition:width 5s;
-webkit-transition:width 5s; /*Safari and Chrome*/
-o-transition:width 5s; /*Opera*/
}
div:hover
{
width:400px;
}
--></style>
Default value for the duration is zero where there wont be any effect.
Note:
- IE and Firefox does not support this property.
- For Chrome and safari we need to use prefix -webkit-
- For Opera we need to use prefix -o-.
- To add a transitional effect to more then one style , add more properties separated by comma.
CSS 3.0 Transforms
We can stretch, spin, scale, move and turn elements. Elements can be transformed using 2D and 3D transformation
Note:
- IE does not support this property.
- For Firefox we need to use prefix -moz-
- For Chrome and safari we need to use prefix -webkit-
- For Opera we need to use prefix -o-.
Different methods used in 2D transform are:
-
Translate():
Using translate method we can move the elements from its position by giving different parameters to left(X-axis) and the top(Y-axis) position.
The value translate(60px,40px) moves the element 60 pixels from the left and 40 from the top.Example11: Translate
<style type="text/css"><!-- div { width:150px; height:80px; background-color:cyan; border:2px solid black; } div#divID { transform:translate(60px,110px); -moz-transform:translate(60px,110px); /* Firefox */ -webkit-transform:translate(60px,110px); /* Safari and Chrome */ -o-transform:translate(60px,110px); /* Opera */ } --></style> -
Scale():
It allows the element to increase or decrease the size , depends on what parameter you give to width(X-axis) and height(Y-axis).
The value(4,6) scales the width to be 4 times its original size and the height to be 6 times its original size.Example12: Scale
<style type="text/css"><!-- div { width:40px; height:60px; background-color:cyan; border:1px solid black; } div#divEX { margin:105px; transform:scale(4,6); -moz-transform:scale(4,6); /* Firefox */ -webkit-transform:scale(4,6); /* Safari and Chrome */ -o-transform:scale(4,6); /* Opera */ } --></style> -
Rotate():
Element rotates clockwise and if negative values are given then elements rotates in counter clockwise.
The Value rotate(45deg) rotates the element 45 degrees clockwise.Example13: rotate
<style type="text/css"><!-- div { width:200px; height:150px; background-color:cyan; border:5px solid black; } div#divEX { transform:rotate(45deg); -moz-transform:rotate(45deg); /* Firefox */ -webkit-transform:rotate(45deg); /* Safari and Chrome */ -o-transform:rotate(45deg); /* Opera */ } --></style> -
Skew():
Using skew method we can turn the element to a given angle, depends on what parameter you give to horizontal(X-axis) and vertical (Y-axis) lines.
The value skew(60drg,40deg) turns the element 60 degrees around the X-axis and 40 degrees around the Y-axis.Example 14: Skew
<style type="text/css"><!-- div { width:105px; height:80px; background-color:cyan; border:2px solid black; } div#divEX { transform:skew(20deg,30deg); -moz-transform:skew(20deg,30deg); /* Firefox */ -webkit-transform:skew(20deg,30deg); /* Safari and Chrome */ -o-transform:skew(20deg,30deg); /* Opera */ } --></style>
If you are interested in receiving the future updates on the latest articles, please follow us on @twitter and @facebook.
