BACKBONE {BLOG}

Merry Christmas and Happy New Year Everyone :D

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

A Cool jQuery Plugin that helps you to resize massive image

Here is the plugin description from official CJ Object Scaler Web site:

CJ Object Scaler will scale an object to either fit or fill within the boundaries of a destination object. I based this plug-in off another JavaScript project I made awhile back, you can read what it does in the CJ Image: Easily Calculate Image Scaling blog enry. It was a nice little function that would help you calculate the size and offsets to use when scaling an image to fit (or fill) within another element. It didn't actually do any scaling, per say, it merely provided you with the numeric amounts to use.

Why do we need a jQuery Image resizing plugin

When it comes to online store web development, you will have product images in different ratios and sizes. It's hard to make them all pretty unless you do some tricks. CJ Object Scaler is the plugin to help you out.

Demo

jQuery Code

$("#fill img").each(function()
{
  $(this).cjObjectScaler(
  {
    method: "fill",
    fade: 1000
  });
});

More details

You can see demo and download the plugin from the official website

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

Hey! We have just launched the brand new site of Plenty Store. Again Everything is built in HTML5 structure and CSS3. The Plenty Online Store is coming up soon, be sure to follow them on facebook and twitter :D

Visit Official Website of Plenty Store