BACKBONE {BLOG}

What is CSS3 PIE

CSS3 Pie is a javascript library that renders serveral CSS3 effects in IE 6-9

We have seen many javascript plugins that do this type of trick, but I have to say that CSS3 PIE is currently the best over the web. I have tried using CSS3 PIE on two sites so far and it works very well. (Unfortunately these two sites are still not live yet, I will post the links once we launch)

How To Use THE PIE

To Use the PIE, first you have to download the scripts from the CSS3 PIE official site.

Upload the scripts onto your server and make a call like the following the each class that has the css3 effect:

.shadow
{
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  
  behavior: url(/PIE.htc);
}

That's it! The CSS3 PIE will do the rest for you in IE6-9

Supported CSS3 Features

Currently CSS3 PIE is still in beta version but it works like a charm! and CSS3 PIE now supports CSS3 features like :

• border-radius
• box-shadow
• gradient
• border-image
• rgba
• css3 backgrounds

What's not good about CSS3 PIE

As I made the jquery animation onto the CSS3 PIE div, I found that animating speed isn't actually as good as you see in Firefox, Chrome or other good browsers. When you are using CSS3 PIE, be aware of that!

Demo from Backbone Tech

We recently just re-built Payfirma's website and the CSS3 PIE works very well on this site. You can check ot out by go to http://www.payfirma.com

Visit CSS3 PIE to get more information about how to use it. You can also see some live CSS3 PIE demos

Have Fun! :D

Another Fun CSS3 Animation - Barrel Roll!

Did you get the chance to play the barrel roll effect by searching 'do a barrel roll' on google? If not, try it!

This effect can be performed using CSS3 but currently it only works on good browsers such as Safari, Chrome, Firefox and Opera. This is the styles to do the trick:

.roll{
  -moz-animation-name: roll;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: 1;
  
  -o-animation-name: roll;
  -o-animation-duration: 4s;
  -o-animation-iteration-count: 1;
  
  -webkit-animation-name: roll;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes roll {
    from { -webkit-transform: rotate(0deg) }
    to   { -webkit-transform: rotate(360deg) }
}

@-moz-keyframes roll {
    from { -moz-transform: rotate(0deg) }
    to   { -moz-transform: rotate(360deg) }
}

@keyframes roll {
    from { transform: rotate(0deg) }
    to   { transform: rotate(360deg) }
}

Demo

Click Me!

Have Fun! :D

Create Multiple CSS3 Transition in 1 Line

Multi Transitions are actually very easy, all you have to do is to specify transitions separated by comma. Here is an example:

div{
  transition: color 200ms ease-out, top 300ms ease-in;
  
  -moz-transition: color 200ms ease-out, top 300ms ease-in;
  -webkit-transition: color 200ms ease-out, top 300ms ease-in;
  -o-transition: color 200ms ease-out, top 300ms ease-in;
  -ms-transition: color 200ms ease-out, top 300ms ease-in;
}

Basic CSS3 Transition Format

To perform css3 transition, you have to specify the css property, easing, duration and delay (optional). Here is a example of how you can do it:

.div
{
  transition: property easing duration delay;        
  -moz-transition: property easing duration delay;    /* Firefox 4 */
  -webkit-transition: property easing duration delay;    /* Safari and Chrome */
  -o-transition: property easing duration delay;      /* Opera */
  -ms-transition: property easing duration delay;      /* IE9? */
}

Multiple CSS3 Transitions

To create multiple css3 transitions, you just specify the transitions separated by comma:

.div
{
  color:#000;
  left:0;
  top:0;

  transition: color ease-in 200ms, left ease-out 500mms, top linear 5s;
  -moz-transition: color ease-in 200ms, left ease-out 500mms, top linear 5s;
  -webkit-transition: color ease-in 200ms, left ease-out 500mms, top linear 5s;
  -o-transition: color ease-in 200ms, left ease-out 500mms, top linear 5s;
  -ms-transition: color ease-in 200ms, left ease-out 500mms, top linear 5s;
}

.div:hover
{
  color:#FFF;
  left:-100px;
  top:-100px;
}

Custom CSS3 Transition Framework

I have already done couple CSS3 projects and I found that it's a great idea to have preset CSS3 transition classes with different durations in your reset stylesheet. Example of what the preset classes like:

.trans-all-300
{
  transition: all ease 300ms;
  -moz-transition: all ease 300ms;
  -webkit-transition: all ease 300ms;
  -o-transition: all ease 300ms;
  -ms-transition: all ease 300ms;
}

.trans-all-500
{
  transition: all ease 500ms;
  -moz-transition: all ease 500ms;
  -webkit-transition: all ease 500ms;
  -o-transition: all ease 500ms;
  -ms-transition: all ease 500ms;
}

.trans-color-250
{
  transition: color ease 250ms;
  -moz-transition: color ease 250ms;
  -webkit-transition: color ease 250ms;
  -o-transition: color ease 250ms;
  -ms-transition: color ease 250ms;
}

Trigger

Usually people will apply css3 transition on :hover, :active & :focus as there are not many pseudoclass in CSS. To create a 0.5s text color transition on hover, simply do this:

.div
{
  color:#333;
  
  transition: color ease 250ms;
  -webkit-transition: color ease 250ms;
  -moz-transition: color ease 250ms;
  -o-transition: color ease 250ms;
  -ms-transition: color ease 250ms;
}

.div:hover
{
  color:#FF7600;
  
  transition: color ease 250ms;
  -webkit-transition: color ease 250ms;
  -moz-transition: color ease 250ms;
  -o-transition: color ease 250ms;
  -ms-transition: color ease 250ms;
}

More CSS3 Transition Trigger With jQuery

Other than :hover, :active and :focus, you can have more triggers by using jQuery. There are triggers such as on-load, on-scroll, on-resize and much more. Following is example of creating position-left transition on page load:

/* CSS */
#preloader
{
  position:absolute;
  width:100%;
  height:100%;
  top:300px;
  left:300px;
  
  transition: left ease 1s;
  -moz-transition: left ease 1s;
  -webkit-transition: left ease 1s;
  -o-transition: left ease 1s;
  -ms-transition: left ease 1s;
}

#preloader.active
{
  left:-300px;

  transition: left ease 1s;
  -moz-transition: left ease 1s;
  -webkit-transition: left ease 1s;
  -o-transition: left ease 1s;
  -ms-transition: left ease 1s;
}


/* jQuery */
$(funciton()
{
  $(window).bind('load',function()
  {
    $('#preloader').addClass('active');
  });
});