Introduction to CSS3 : Part 1

Welcome to my new article series of CSS3. In my previous article series, you learned about HTML5 Canvas for both beginners and advanced users.

Let's start.

A Little History about CSS

In 1994, CSS was introduced as a web styling language to solve the problems that occur in HTML. At the same time, there were some other styling languages introduced, like style sheets for HTML but CSS won the first battle.

In 1998, W3C recommended CSS2 and since then many changes were made on the internet. In 2011 a revision was made and CSS2.1 came into existence, but experts said that it's not the final version because many necessary features were still not there. In fact, many people didn't know that development on CSS3 was started after the submission of its first version. In other words, the W3C has been working on CSS3 since 1999, which is more than 10 years until the first stable version of CSS3 was released.

Introduction

CSS3 is the successor to CSS2 and it is one of the best web technologies available for web developers at present. A CSS3 document is a Cascading Style Sheet to control the layout and style of Web Pages. It has more features than previous versions of CSS that includes more graphic functions, shadow effects, gradients features and it also allows you to select more tags of HTML.

Vendor Prefix

Today nearly all major browsers support CSS3 features but some CSS rules still won't work properly without the vendor prefix because they help browsers to interpret the code. So, we need to use them with our CSS so that the browser in which you are testing is able to read the code. Have a look at all the vendor prefixes for all major browsers:

-moz- : Mozilla Browsers (Firefox)
-ms- : Internet Explorer
-o- : Opera
-webkit-: Webkit browsers such as Safari and Chrome

All CSS3 rules don't work with all browsers; you can check the support of CSS3 on caniuse.com.

Some new modules introduced in CSS3:

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

1. CSS3 Borders

You guys might have already heard about "border-radius" many times. It's really easy to use and is also supported by all the major browsers. You can create rounded borders, add shadow to boxes and you can also use an image as a border without using any design tool like Illustrator or Photoshop. There are the following three important border properties:

border-radius
box-shadow
border-image

Browser Support

1. border-radius

It's very easy to create rounded corners in CSS3. We can use the "border-radius" property to create rounded corners. Before we get started, it's important to know that there are three main syntaxes that you'll need to use as in the following:

border-radius: size;
-moz-border-radius: size;
-webkit-border-radius: size;

Here, the first one is for the un-prefixed version browsers that support it, which includes Opera, Safari 5 and IE9.

Example:

#round{
border: 5px solid #000;
padding: 50px 0;
margin: 50px;
width: 300px;
background: #888888;
border-radius: 30px;
-moz-border-radius: 30px; /* Mozilla */
-webkit-border-radius: 30px; /* Chrome */
}

Output

2. box-shadows

In CSS3, we can create a shadow using the "box-shadow" property. Let's have a look at its syntax:

box-shadow: offset_x offset_y blur_radius color;
-moz-box-shadow: offset_x offset_y blur_radius color;
-webkit-box-shadow: offset_x offset_y blur_radius color;

Here again, we need to use the vender prefixes for Mozilla and Webkit. Now in the box-shadow property, we have some pre-defined parameters. Here, the first two parameters are the offset positions that start from the left and top co-ordinates of the element. If you set a positive value then these properties move the shadow to the right and down from the element, and if you set a negative value then it moves the shadow to the left and up from the element. In the third parameter, we have a "blur radius" to apply the blur to your shadow. And the fourth parameter is a color property by which you can add color to the shadow. Now have a look at this example in which we apply a CSS3 effect to our div.

Example:

#shadow{
border: 5px solid #000;
padding: 50px 0;
margin: 100px 50px;
width: 300px;
background: #888888;
box-shadow: 10px 10px 5px #888888;
-moz-box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888;
}

Output

The CSS3 box-shadow has a neat feature that can be used by the "inset" keyword. If you use the inset keyword then the shadow will appear inside the box rather than outside. You can create nice looking buttons using this feature. Let's create a button using an inset shadow.

Example

#inset-button{
padding: 50px;
width: 200px;
margin: 50px;
border: 3px solid #000;
box-shadow: 0px 0px 30px #333 inset;
-moz-box-shadow: 0px 0px 30px #333 inset;
-webkit-box-shadow: 0px 0px 80px #333 inset;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
}

Output

There is one more and one of my coolest features of CSS3 box shadows is that we can add multiple shadows on the same element. It is really very useful for reducing the extra markup from your HTML that you used for adding an extra shadow. You need to create multiple shadows and then you've to separate them by using commas.

Example

#multiple-shadow {
border: 5px solid #000;
padding: 100px 0;
margin: 100px 100px;
width: 200px;
box-shadow: 0 0 80px #333 inset,
30px 25px 30px green,
-30px 25px 30px yellow,
-30px -25px 30px red,
30px -25px 30px blue;
-moz-box-shadow: 0 0 80px #333 inset,
30px 25px 30px green,
-30px 25px 30px yellow,
-30px -25px 30px red,
30px -25px 30px blue;
-webkit-box-shadow: 0 0 80px #333 inset,
30px 25px 30px green,
-30px 25px 30px yellow,
-30px -25px 30px red,
30px -25px 30px blue;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}

Output

3. border-image

The last property of the CSS3 border is the "border-image" property. We can create a border by using an image. Let's see its syntax first:

border-image: source slice width outset repeat;
-webkit-border-image: source slice width outset repeat;
-moz-border-image: source slice width outset repeat;

Here in the first parameter, you need to provide a source of the image. In the second parameter inward offsets are to be given. Then in the third one, the width of the image is required. Now in the fourth one, you need to provide the amount by which the image area of the border extends beyond the border-box. And in the last one, you can specify whether the border-image should be rounded, stretched or repeated.

Example:

#image{
border: 5px solid #000;
padding: 50px 0;
margin: 100px 50px;
width: 300px;
background: #ff6a00;
border-image: url(borderNew.png) 10 10 round;
-webkit-border-image: url(borderNew.png) 10 10 round;
-moz-border-image: url(borderNew.png) 10 10 round;
}

Output

Conclusion

In this article, we covered a little history of CSS and some introduction about CSS3. We also talked about its first module that "BORDER" which includes three properties. In my next article "Introduction to CSS3: Part 2", I'll cover all about background properties in CSS3.

Introduction to CSS3 : Part 1

Reactions

Comments

Introduction

Vendor Prefix

1. CSS3 Borders

1. border-radius

2. box-shadows

3. border-image

Conclusion