css3 tutorial for beginners with examples

By: Prem Tiwari | Last Updated: December 3, 2014 | In: HTML / CSS

CSS3 has been split into “modules”. It contains the “old CSS specification” (which has been split into smaller pieces). In addition, new modules are added.

CSS3 Modules

Selectors
Box Model
Backgrounds and Borders
Image Values and Replaced Content
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface

CSS3 Borders
You can create rounded borders, add shadow to boxes, and use an image as a border – without using a design program, like Photoshop.

div {

border: 2px solid;

border-radius: 25px;

}

CSS3 The border-image Property

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 15px solid transparent;

width: 250px;

padding: 10px 20px;

}

#round {

-webkit-border-image: url(border.png) 30 30 round; /* Safari 3.1-5 */

-o-border-image: url(border.png) 30 30 round; /* Opera 11-12.1 */

border-image: url(border.png) 30 30 round;

}

#stretch {

-webkit-border-image: url(border.png) 30 30 stretch; /* Safari 3.1-5 */

-o-border-image: url(border.png) 30 30 stretch; /* Opera 11-12.1 */

border-image: url(border.png) 30 30 stretch;

}

</style>

</head>

<body>

<div id="round">Here, the image is tiled (repeated) to fill the area.</div>

<br>

<div id="stretch">Here, the image is stretched to fill the area.</div>

</body>

</html>

CSS3 Linear Gradients

Example 1. Radial Gradient – Evenly Spaced Color Stops (this is default)

#grad {

background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */

background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */

background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */

background: radial-gradient(red, green, blue); /* Standard syntax */

}

Example 2. Radial Gradient – Differently Spaced Color Stops.

#grad {

background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1-6.0 */

background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.6-12.0 */

background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6-15 */

background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax */

}

CSS3 Text Effects
CSS3 has a sevral new text shaddow effect.

h1 {

text-shadow: 5px 5px 5px #FF0000;

}

CSS3 Transitions
You can use animation effects using CSS3 Transitions without using Flash animations or JavaScripts.

div {

-webkit-transition: width 2s, height 2s,-webkit-transform 2s; /* For Safari 3.1 to 6.0 */

transition: width 2s, height 2s, transform 2s;

}

About: Prem Tiwari

Prem Tiwari is the founder of freewebmentor.com and is a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby. View all posts by Prem Tiwari

css3 tutorial for beginners with examples

About: Prem Tiwari

You may also like:

Discount Coupons

Featured eBook

WordPress Security Guide

Popular Categories

Recommended Posts

Pincode Finder

Online Pincode Finder