In the world of Software Development more revisions means more features. What ever the Software you develop in the initial stage you need to prepare the basic version. Later depending upon the Customers feedback you need to enhance your Software. The same story happened here, CSS3 is the third revision of Cascading Style Sheets (CSS). Initial version of Cascading Style Sheets (CSS V.1) was developed by Bert Bos, Hakon Wium Lie & World Wide Web Consortium (W3C) & released on 17th December 1996. Later further versions (CSS V.2 & CSS V.2.1) released to stay update with market demand. CSS2 run over the market for several years. During this period it was observed that there are some areas where CSS2 can be update. These updates will save programmers time & can help to improve performance in web designing. Let us discuss those CSS3 New Features.
Calc() Function
Calc() is a mathematical function. In CSS3 it is used to Calculate values. Let’s talk about a case where I want a div with width 100% but from right side of browser window I required a gap of 50 pixels. In this case using CSS2 you can do this by declaring div width to 100% & additional you need to set margin for right side of the div. The same you can achieve in CSS3 without setting margin. Here calc() function helps. Look at the class below.
.myDiv {
/* Using Calc() function to Calculate the width */
width: calc(100% - 50px);
background-color: #DDD;
}
Gradients
You may remember the early age of programming, where to achieve a Gradient horizontal bar we generally do create an image with 1px width & Gradients background colors as we required. Then repeating that image as a background of the div. If any time we required to update the Gradients color, first we need to update that image. Do you don’t feel this is little bit time consuming job & required more focus to maintain. That’s why CSS3 introduced a new feature Gradients. Using this you can easily create a Gradient background with a single line of code.
Generally CSS3 Gradients are 2 types Linear & Radial Gradient. Linear Gradient by default is Top to Bottom. You can customize linear gradient in various ways. Look at the examples below.
Example of Linear Gradient from Top to Bottom (By Default):
.li-grad {
background: linear-gradient(#0A65D4, #98BAE2); /* Default One */
background: -webkit-linear-gradient(#0A65D4, #98BAE2); /* For Safari & Google Chrome */
background: -o-linear-gradient(#0A65D4, #98BAE2); /* For Opera */
background: -moz-linear-gradient(#0A65D4, #98BAE2); /* For Firefox */
}
Example of Linear Gradient from Left to Right:
background: linear-gradient(left, #0A65D4, #98BAE2); /* Default One */ background: -webkit-linear-gradient(left, #0A65D4, #98BAE2); /* For Safari & Google Chrome */ background: -o-linear-gradient(left, #0A65D4, #98BAE2); /* For Opera */ background: -moz-linear-gradient(left, #0A65D4, #98BAE2); /* For Firefox */
Example of Linear Gradient Diagonally:
background: linear-gradient(left top, #0A65D4, #98BAE2); /* Default One */ background: -webkit-linear-gradient(left top, #0A65D4, #98BAE2); /* For Safari & Google Chrome */ background: -o-linear-gradient(left top, #0A65D4, #98BAE2); /* For Opera */ background: -moz-linear-gradient(left top, #0A65D4, #98BAE2); /* For Firefox */
OR
background: linear-gradient(bottom right, #0A65D4, #98BAE2); /* Default One */ background: -webkit-linear-gradient(bottom right, #0A65D4, #98BAE2); /* For Safari & Google Chrome */ background: -o-linear-gradient(bottom right, #0A65D4, #98BAE2); /* For Opera */ background: -moz-linear-gradient(bottom right, #0A65D4, #98BAE2); /* For Firefox */
Example of Linear Gradient using Angles:
background: linear-gradient(180deg, #0A65D4, #98BAE2); /* Default One */ background: -webkit-linear-gradient(180deg, #0A65D4, #98BAE2); /* For Safari & Google Chrome */ background: -o-linear-gradient(180deg, #0A65D4, #98BAE2); /* For Opera */ background: -moz-linear-gradient(180deg, #0A65D4, #98BAE2); /* For Firefox */
Example of Linear Gradient using Multi-Color:
background: linear-gradient(red, green, yellow, white, blue); /* Default One */ background: -webkit-linear-gradient(red, green, yellow, white, blue); /* For Safari & Google Chrome */ background: -o-linear-gradient(red, green, yellow, white, blue); /* For Opera */ background: -moz-linear-gradient(red, green, yellow, white, blue); /* For Firefox */
Example of Radial Gradient:
.ra-grad {
background: radial-gradient(to bottom, #0A65D4, #98BAE2); /* Default One */
background: -webkit-radial-gradient(#0A65D4, #98BAE2); /* For Safari & Google Chrome */
background: -o-radial-gradient(#0A65D4, #98BAE2); /* For Opera */
background: -moz-radial-gradient(#0A65D4, #98BAE2); /* For Firefox */
}
Rounded Corners
Followed by Customer Demand many times we required to implement round corner content area. You may recall those days when we use images to achieve this. This difficulty is addressed in CSS3. To round corner of a div you required only one CSS property border-radius. Look at the example below:
.myDiv {
border: 2px solid #000000;
border-radius: 15px; /* Default One */
-webkit-border-radius: 15px; /* For Safari & Google Chrome */
-o-border-radius: 15px; /* For Opera */
-moz-border-radius: 15px; /* For Firefox */
width: 100px;
}
Webfonts using CSS3
Year back in web programming we have limited web-safe fonts. How this is if we have a central store from where we can add any kind of fonts to our application? The same thing CSS3 did. Using CSS3 web-fonts you can use fonts from On-line. Few popular font directories are Google Fonts and typekit. Integrating fonts using CSS3 webfonts is very easy. Morden web-fonts comes with vector graphics. On the way of better performance these icons helps a grate. It reduces http requests & load time. Look at the examples below how to use CSS3 webfonts.
In HTML Head:
<link href="http://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet" /> <div class="webfonts">This is the example of using webfonts in CSS3.</div>
CSS Class:
.webfonts {
font-family: Satisfy, cursive;
font-weight: normal;
font-size: 14px;
}
Border Images
In the previous versions of CSS3 you can’t set image for border. Only border color you can define. It was found in many places programers required to add image around. To full fill this CSS3 introduced border-image property. Using this you can easily set border image. The only trick you need to follow is according to your image height you need to set border-width & make border transparent. Look at the example below.
border:40px solid transparent; border-image: url(img/decoration.png) 40 40 round;
CSS3 Media Queries
Today there are several devices from where users are accessing web. To make a web page compatible for any resolution & various devices CSS3 introduced Media Queries. Media Queries are the technique using which you can write CSS for any specific media. Let’s talk about a mobile device with resolution 320px. In this case to optimize your web page for this resolution you can use media queries. To know more about CSS3 Media Queries please refer our another release Introduction to CSS3 Media Queries.
Example:
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* Styles for Screen Resolution 768px to 1024px */
}
@media screen and (max-width: 600px) {
/* Styles for Screen Resolution up to 600px */
}
Advanced Selectors
Selector is a key in CSS. Using Selector in CSS we do categories the HTML elements for specific Style. You must aware of various of selectors using CSS2. Still in the real-world of programming programmers found various scenarios where they required some additional selectors. That all is introduced in the latest revision of CSS. From the following examples you can track advanced CSS3 selectors.
Example:
/* CSS3 Selector to select first letter from span's: */
span::first-letter {
background-color: #DDD;
font-size: 14px;
font-style:normal;
color: #FF0000;
}
/* CSS3 Selector to select first line from span's: */
span::first-line {
font-style: bold;
font-size: 16px;
font-family: Arial;
}
/* CSS3 selector to select first and last elements */
.elem:first-child, .elem:last-child {
background-color:#DDDDDD;
}
/* From nth elements how to set style for only odd elements */
.elem:nth-child(odd){
border-radius:30%;
}
/* Target elements by attribute */
.elem[data-foo=bar1] {
background-color: #DDD;
}
CSS3 Animations & Transitions
Compare to Flash or JavaScript animation CSS3 animation render faster. Animation is a new feature introduced in CSS3. Performance wise CSS3 animations are more programmers friendly. In this session let us make you clear about the trick to use CSS3 animation.
In CSS3 animation 2 major properties are “animation” & “@keyframes”. Refer to the below example I have a div with a class “animation”. To apply animation on this div I created a class animation. Inside the class I added CSS3 property animation: demoAnimation 5s;. Here demoAnimation is controlled by keyframes. Using @keyframes we need to define from & to properties. As in this example I am moving a div from left to right, I positioned the div to absolute and applying left property from 0 to 200px. Read more…
<style type="text/css">
.animation {
/* IE & FireFox */
animation: demoAnimation 5s;
/* Chrome, Safari & Opera */
-webkit-animation: demoAnimation 5s;
position: absolute;
}
/* IE & FireFox */
@keyframes demoAnimation {
from {left: 0px; background: red;}
to {left: 200px; background: yellow;}
}
/* Chrome, Safari & Opera */
@-webkit-keyframes demoAnimation {
from {left: 0px; background: red;}
to {left: 200px; background: yellow;}
}
</style>
</head>
<body>
<div class="animation">This is a Div.</div>
</body>
CSS3 Shadow Effects
Using Shadow effects we can get 3D look. If you worked for various Customers & their requirements you must observed in many places Customer wants to use shadow effect. Lets take an example of a login page. Generally login page comes with a central panel. To make this more attractive Customer ask us to put shadow effects. This problem is noted down by CSS3 & in CSS3 they addressed this problem. Using one property in CSS3 you can easily add shadow effect to any HTML element. CSS3 shadow is two types Text Shadow & Box Shadow. Look at the example below.
Text Shadow:
p {
text-shadow: 3px 3px 6px green;
}
Box Shadow:
span {
box-shadow: 6px 6px 6px green;
}
