CSS3

CSS is used to control the style and layout of Web pages. CSS3 is completely backwards compatible, so you will not have to change existing designs. Browsers will always support CSS2.

CSS3 Example
div
{
transform:rotate(30deg);
}

CSS3 Modules
Some of the most important CSS3 modules are:
• Selectors
• Box Model
• Backgrounds and Borders
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface

CSS3 Borders
With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border.
In this chapter you will learn about the following border properties:
• border-radius
• box-shadow
• border-image
CSS3 Rounded Corners
div
{
border:2px solid;
-moz-border-radius:25px;
}

CSS3 Box Shadow
div
{
box-shadow: 10px 10px 5px #888888;
}

CSS3 Border Image
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round;
}

CSS3 Backgrounds
CSS3 contains several new background properties,which allow greater control of the background element.
background properties:
• background-size
• background-origin

CSS3 The background-size Property
The background-size property specifies the size of the background image.
Before CSS3, the background image size was determined by the actual size of the image. In CSS3 it is possible to specify the size of the background image, which allows us to re-use background images in different contexts.
Example
body
{
background:url(img_flwr.gif);
-moz-background-size:80px 60px;
background-size:80px 60px;
background-repeat:no-repeat;s
}

Example 2
div
{
background:url(img_flwr.gif);
-moz-background-size:100% 100%;
background-size:100% 100%;
background-repeat:no-repeat;
}

CSS3 The background-origin Property
The background-origin property specifies the positioning area of the background images.
The background image can be placed within the content-box, padding-box, or border-box area.
Example
div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}

CSS3 Multiple Background Images
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}

background-size:
Examples
background-size: 200px;
background-size: 200px 100px;
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;

body{
width: 550px;
height: 250px;
background-image:url(65.jpg);
background-repeat: no-repeat;
background-color: #EEE;
background-size: 200px;
}

background-size: 200px; background-size: 200px 100px;

background-size: auto 200px; background-size: 50% 25%;

background-size: contain; background-size: cover;

CSS3 Text Effects

CSS3 contains several new text features. CSS level 3 has a property called ‘text-shadow’ to add a shadow to each letter of some text.
text properties:
• text-shadow
• word-wrap
CSS3 Text Shadow
h1
{
text-shadow: 5px 5px 2px #FF3366;
}

Multiple shadows

h1
{
text-shadow: 0.2em 0.5em 0.1em #81D3E4,
-0.3em 0.1em 0.1em # EAD186,
0.4em -0.3em 0.1em # C488FF;
}

CSS3 Fonts

CSS3, web designers had to use fonts that were already installed on the user’s computer. The font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:

h1 {
font-family:”Monotype Corsiva”;
}
CSS3 Fonts

Using bold

h1 {
font-family:”Monotype Corsiva”;
font-weight:bold;
}

CSS3 Fonts

CSS3 Transforms
A transform is an effect that lets an element change shape, size and position.You can transform your elements using 2D or 3D transformation.
2D Transforms
2d transform methods:
• translate()
• rotate()
• scale()
• skew()
• matrix()

Example

div
{
transform: translate(50px,100px);
-moz-transform: translate(50px,100px);
}

div
{
transform: scale(2,4);
-moz-transform: scale(2,4);
}

3D Transforms
CSS3 allows you to format your elements using 3D transforms.
3D transform methods:
• rotateX()
• rotateY()

Example
rotateX()
div
{
transform: rotateX(120deg);
-moz-transform: rotateX(120deg);
}

CSS3 Transitions

CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.

div
{
width:100px;
height:100px;
transition: width 2s;
-moz-transition: width 2s;
}

div:hover
{
width:300px;
}

CSS3 Animations
CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in many web pages.

Example

“myfirst” animation to a div element, duration: 5 seconds:

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; }

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

CSS3 Multiple Columns
CSS3, you can create multiple columns for laying out text – like in newspapers.
multiple column properties:
• column-count
• column-gap
• column-rule

CSS3 Create Multiple Columns
Divide the text in a div element into three columns.

div
{
-moz-column-count:3;
column-count:3;
}

CSS3 Specify the Gap Between Columns
50 pixels gap between the columns.

div
{
-moz-column-gap:50px;
column-gap:50px;
}

CSS3 Column Rules
style and color of the rule between columns.

div
{
-moz-column-rule:3px outset #ff00ff;
column-rule:3px outset #ff00ff;
}

CSS3 User Interface
some of the new user interface features are resizing elements, box sizing, and outlining.
user interface properties:
• resize
• box-sizing
• outline-offset
CSS3 Resizing
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}

CSS3 Box Sizing
two bordered boxes side by side.

div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box;
width:50%;
border:1em solid red;
float:left;
}
CSS3 Outline Offset
The outline-offset property offsets an outline, and draws it beyond the border edge.

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}