CSS3 – It Does Much More Than Just Styling the Page. See How!

CSS3 Logo

Changing the way you see the web and even interact with the page, CSS has made some huge advancements with its latest and completely backward compatible standard – CSS3. The more feature rich CSS becomes, lesser dependancy on utility softwares like Photoshop and others (of course, it is not replacement though.) The CSS3 specification is still under progress by W3C. However, most of the CSS3 features are implemented by modern browsers.

Please note, this explaination is going to be more interactive and full of examples and less on theories. Let’s take a brief look at new features one by one,

  1. CSS3 Borders
  2. CSS3 Gradients
  3. CSS3 Text Effects
  4. CSS3 Fonts
  5. CSS3 2D Transform
  6. CSS3 3D Transform
  7. CSS3 Animations
    1. Horse Animation
    2. Bird Animation
  8. CSS3 Transitions

1) CSS3 Borders

GoosPoos.com
CSS Code:

.rounded-border-example{
  border:4px solid #a1a1a1;
  border-radius:25px;
}
CSS Code:

.box-shadow-example{
  box-shadow: 10px 10px 5px #888888;
}

2) CSS3 Gradients
There are two main variaties in gradient. One being Linear (goes down/up/left/right/diagonally) and other being Radial Gradient (defined by its center.) Below there is an example of linear gradient with default direction (Top to bottom.) Earlier one needed to be dependant on Photoshop like utility for gradient but now it is not.

GoosPoos.com
CSS Code:

.gradiant-example{
  background: -webkit-linear-gradient(white, lightgrey); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(white, lightgrey); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(white, lightgrey); /* For Firefox 3.6 to 15 */
  background: linear-gradient(white, lightgrey); /* Standard syntax */
}

3) CSS3 Text Effects
Yet again, no need to rely upon third party softwares like Photoshop while creating text shadow effect.

GoosPoos.com
CSS Code:

.text-shadow-example{
  text-shadow: 5px 5px 5px #b5b4b4;
}

4) CSS3 Fonts
With help of @font-face rule in CSS3, designers are not forced to choose Web-Safe fonts.

GoosPoos.com
CSS Code:

@font-face
{
  font-family: faceFontUsage;
  src: url(http://themes.googleusercontent.com/static/fonts/blackopsone/v5/2XW-DmDsGbDLE372KrMW1fn8qdNnd5eCmWXua5W-n7c.woff);
}
.web-font-example{
  font-family:faceFontUsage;
}

Play with above four examples with this jsFiddle.

 
5) CSS3 2D Transform
With help of CSS3 2D transform, one can rotate, scale, move and skew an element.

GoosPoos.com

CSS Code:

.rotate-2d-example{
  -ms-transform: rotate(20deg); /* IE 9 */
  -webkit-transform: rotate(20deg); /* Chrome, Safari, Opera */
  transform: rotate(20deg);
}
CSS Code:

.scale-2d-example{
  -ms-transform: scale(1.5, 1.5); /* IE 9 */
  -webkit-transform: scale(1.5, 1.5); /* Chrome, Safari, Opera */
  transform: scale(1.5, 1.5);
}
CSS Code:

.skew-2d-example{
  -ms-transform:skewX(30deg); /* IE 9 */
  -webkit-transform:skewX(30deg); /* Chrome, Safari, Opera */
  transform:skewX(30deg); /* Standard syntax */
}
CSS Code:

.translate-2d-example{
  -ms-transform: translate(150px, 50px); /* IE 9 */
  -webkit-transform: translate(150px, 50px); /* Chrome, Safari, Opera */
  transform: translate(150px, 50px);
}

6) CSS3 3D Transform
Earlier if you have noted one obvious thing, 2D transform operations were taking place in XY plane. 3D transform allows element to move in Three-Dimensional space. For an instance, let’s look at how rotation takes place in 3D with one of my favorite cartoon characters, Bugs Bunny. He was under threat from Mr Fudd but CSS3 comes to the rescue of him.

bunny_screwed fud_shooting

CSS Code:

.bunnyImage
{
  -webkit-transform: rotateY(130deg); /* Chrome, Safari, Opera */
  transform: rotateY(130deg);
}
Play with simplified version of this example Here.

There are few other 3D transform operations. You may refer them in details as and when needed but what important is you to be aware of the capabilities.

7) CSS3 Animations
CSS3 animation lets an element to change from one style to another. You can change as many properties as you want for given time period. You may define progress in percentage (0% marks beginning of the animation while 100% is when it finishes) and duration for one cycle. Let's have look at two animation examples.

7.1 Horse Animation:
First of all, let's see the animation and then we will go into details about how CSS3 makes it happen.

HOW IT WORKS:
STEP.1 Create a simple place holder div with this background image which will be visible like an animation if moved rapidly
(Image Credit: Google.com)

STEP.2 Create CSS class as below

/* Define the frames in animation. You may define as many frames as per your need.
   I am just moving background-image horizontally and that's it! 
*/
@keyframes horse-ride {
	0% {background-position: 0 0;}
	100% {background-position: -804px 0;}
}
/* Adding below class to DIV will kick start the animation. 
   Here it is said, one cycle should be divided in 12 frames and should finish in 0.5 sec.
*/
.horserunning {
        animation: horse-ride 0.5s steps(12, end) infinite;
}

STEP.3 Add .horserunning class to the DIV and animation begins

Want to play with this example? Here is the jsFiddle

7.2 Bird Animation:
Here is yet another animation example. Explore this example with this jsFiddle

Image Credit: DePaul.edu

8) CSS3 Transitions

When it is intended to induce delay while changing from one style to another, use transition property. But obviously we need to look at how it looks like, right? CSS3 transition was used in almost all of the above examples. For example, open Bugs-Bunny jsFiddle once again and comment out last two properties in CSS class and see what happens.

Hope you would have liked this article. Post your feedback/suggestions in the comment.

1 Comment

  1. Divyang

    05.05.2014

    Wonderful live examples!

Leave a Reply

Ad

Like Us!