Ya está al aire! Archie's Trattoria, orgullo de Backbone Latam!

Colchones Spring es la fábrica de colchones con mayor trayectoria en el mercado colombiano, con 60 años de experiencia es la empresa líder de la categoría. Es una compañía productora y comercializadora de soluciones innovadoras para el buen dormir. Esta organización la conforman cerca de 700 empleados trabajando en función del cliente.

Nuestro reto, fue diseñar y desarrollar la plataforma en 1 mes, en la que se implementara la tienda en línea, que se activará en la segunda etapa. Nuestro departamento de estrategia montó las bases para la nueva cara de la marca en la web y su interacción en las redes sociales.

CSS3 Transform Origin

From the last post "Novice to Ninija : CSS3 Transform" we have mastered the basic of the transform but I forgot to mention how you can change the origin point.

CSS3 transforms such rotate() or scale() are default to center point of the element, you can change the origin point just like how you define the background-position

This Is How You Do It

transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;

Demo

Please hover on the HTML5 logo. You can see that we have changed the origin point to 0 0 (Top Left) :

.demo{
  width:300px;
  height:300px;
  position:relative;
  margin:0 auto;
  padding:50px 0;
  cursor: pointer;
}

.demo img{
  transition:all 300ms ease;
  -moz-transition:all 300ms ease;
  -webkit-transition:all 300ms ease;
  -o-transition:all 300ms ease;

  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
}

.demo:hover img{
  transform:rotate(50deg);
  -moz-transform:rotate(50deg);
  -webkit-transform:rotate(50deg);
  -o-transform:rotate(50deg);

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

Panty By Post Website is now live in Russia

As the Russian site was launched, Panty By Post has presented a Fashion Summer Party in Moscow, Russia. You can see the gallery (HOT) here

Visit Russian Panty By Post for more information

Official Panty By Post is also now shipping Worldwide

Get it before it's not too late. Join the subscription of Panty By Post and get a pretty panty mailed monthly.

Visit Official Panty By Post for more information

Send & Read URL Variables Using jQuery getUrlVar

jQuery getUrlVar is a tiny piece of jQuery plugin that does wonderful job by reading the URL Variables. Sometimes you may need to read your own custom url variables and do changes on the other pages.

jQuery getUrlVar Plugin

jQuery.extend({
  getUrlVars: function(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name){
    return jQuery.getUrlVars()[name];
  }
});

You can download the script here

How to use jQuery getUrlVar

var profileId = jQuery.getUrlVar()["profileId"];
if(profileId != undefined)
{
  // do something
}

Example on Healthy Families BC Walking Challenge

The goal to use query getUrlVar is to show the Lumby popup when users land on the page. What we did is to pass a URL variable 'profileId'. We use getUrlVar to read the id and do the trick. It's very useful when it comes to the REAL WORLD

Before: http://www.healthyfamiliesbcwalkingchallenge.ca/Lumby

After: http://www.healthyfamiliesbcwalkingchallenge.ca/Lumby?profileId=8642

Canvas Image Loader

The Heartcode CanvasLoader is a lightweight JavaScript UI library, which uses the HTML5 Canvas element to draw and animate circular preloaders.

The Heartcode CanvasLoader runs in every 'good' browser which supports the HTML5 Canvas element.

Overall Review

It's very simple and easy. You can create your own canvas loader in 3 minutes.

Internet Explorer

Unfortunately the website is not IE Friendly at all, check the screenshot below :(

Supported Browsers

HeartCode Canvas Loader works on Google Chrome, Safari, Opera, Firefox and IE9+

Demo:

Horizontally and Vertically Center an Element

Centering the HTML elements is such a pain in CSS. When developing popup & overlay, I usually let jQuery Center handle the position. It's easy and IE friendly.

How to use jQuery Center

$('#mainDiv').center();
$(window).bind('resize', function(){
$('#mainDiv').center({ transition:300 });
});

You can download the jquery-center.js here

Choose you right HTML5 Video Tool

Currently all the modern browsers (Chrome, Opera, Firefox, IE & Safari) render HTML5 Video using custom browser UI. To make your website user-friendly, it is recommended to use 3rd party plugin to embed your HTML5 Videos. It's easy, quick and much more controls such as volume control, fullscreen, theme, and flash fallback for IE. Here is a list of popular HTML5 Video Players:

VideoJS supports all browers, fullscreen, CSS theme. Very nice work, I recommend it :D

Features

• Free & Open Source
• Lightweight. NO IMAGES USED
• 100% skinnable using CSS
• Library independent
• Easy to use
• Easy to understand & extend
• Consistent look between browsers
• Full Screen & Full Window Modes
• Volume Control
• Forced fallback to Flash (even when there is an unsupported source)

SublimeVideo is more like video player service where you can upload the videos onto their server and embed the video on your website. SublimeVideo is not free.

Features

• Works in any browser
• Mobile support
• Always up-to-date (Maintain by them)
• Cost effective
• Performance
• Management

Dailymotion supports all browers, snapshot, explode effect (I am not sure if you need it), and frame by frame view. Other than that, there are Facebook & twitter icons where you can share the video directly through the video player.

Dailymotion is driven by:

• HTML5
• VIDEO
• JAVASCRIPT
• CSS3
• CANVAS

FlareVideo has Flash fallback, themes and fullscreen control.

Features:

• HTML5 <audio> and <video> players in pure HTML and CSS.
• Custom Flash and Silverlight players that mimic the HTML5 MediaElement API for older browsers
• Plugins for Wordpress, Drupal, jQuery, and BlogEngine.NET
• See the MediaElement.js Github page

Theme:

• Default (Apple Quicktime)
• Vimeo
• Spotify

MediaElement supports multi subtitles, flash fallback, fullscreen.

One file. Any browser. Same UI.

• HTML5 <audio> and <video> players in pure HTML and CSS.
• Custom Flash and Silverlight players that mimic the HTML5 MediaElement API for older browsers
• Plugins for Wordpress, Drupal, jQuery, and BlogEngine.NET
• See the MediaElement.js Github page

Do you like the way our logo shakes? (Please hover on it!)

This CSS3 technique was originally posted by CSSReset.com. Firefox 5 has recently released and it is now supporting CSS3 @-keyframes, animation-name and much more, which means you can shake anything using CSS3!

CSS3 Shake animation on Chrome, Safari and Firefox!

I have modified the stylesheet a bit from the original one, please copy and paste onto your website:

@keyframes shake{
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(0px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(2px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(2px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@-moz-keyframes shake{
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}

@-webkit-keyframes shake {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

.shake{
display:inline-block;
}

.shake:hover,
.shake:focus{
animation-name: shake;
animation-duration: 0.8s;
transform-origin:50% 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;

-moz-animation-name: shake;
-moz-animation-duration: 0.8s;
-moz-transform-origin:50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;

-webkit-animation-name: shake;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

Next, add shake class to the element that you wish to apply the animation:

<img src="/media/blog-html5-logo.png" alt="/media/blog-html5-logo.png" class="shake" />

That's it! Enjoy it :D

Demo:

We have recently launch the website Healthy Families BC Walking Challenge. Want to become more active with your family? Check it out

Motion and Interaction Design for HTML5!

Short description from Adobe:

Adobe® Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.

Edge will be updated regularly to add new functionality, stay ahead of evolving web standards, and incorporate user feedback to provide the best functionality and experience possible. This is an early look at Edge with more capabilities to come.

Flash + Dreamweaver?

I believe that Adobe wants to make Edge as the next generation of Adobe Flash... but it looks cool! Check it out. It's FREE, you can download from Adobe

note: I just downloaded the software and realize you can do really great HTML5 animation from edge. How do I know? Check out the Adobe Edge Preview's Demo Page

HTML5 Reset

Just like any other web developers, I start every of HTML projects with a set of collected resources. HTML5 Reset is one of the best resource that I use when developing HTML5 website.

Why use HTML5 Reset?

Major Browsers such as Firefox, Google Chrome, Safari and IE (only IE9..) are starting to support HTML5 and CSS3. Our job is to make sure that the web pages always render the best in each browser. Besides the standard HTML tags, HTML5 Reset also resets the new HTML5 elements and a bit of IE fix.

Customize and build your own HTML5 Reset

you can download the files from HTML5 Reset GitHub. Be sure to modify the stylesheet before you use!

Here are some of the resets that I like to use:

/* Custom text-selection colors */
::-moz-selection{
background: #FFA300;
color: #FFF;
text-shadow: none;
}

::selection {
background: #FFA300;
color: #FFF;
text-shadow: none;
}


/* Anchor */
a {
text-decoration:none;
color:#333;
-webkit-transition:color 200ms ease;
-moz-transition:color 200ms ease;
-o-transition:color 200ms ease;
transition:color 200ms ease;
}

a:hover,a:active {
color:#FF7600;
-webkit-transition:color 200ms ease;
-moz-transition:color 200ms ease;
-o-transition:color 200ms ease;
transition:color 200ms ease;
}

::-moz-selection and ::selection change the text-selection colors, which is the MUST USE style in HTML5.

For the anchor, I always like to set a 200ms color transition on hover & active state. It gives a smoother feedback.

Do you like our tips and tutorials? like us on Facebook or follow us on Twitter

We are pleased to announce that the new project Sips Cellars is officially launched! Here is a little more information about them:

Sips Cellars was borne from the idea that good wine and good company pair well together. In addition, having a diversity of wines exposes pallets to more and greater varietals and brings about new experiences. We here at Sips Cellars intend to provide a friendly, fun atmosphere and a variety of value priced wines to our customers. We wish to share our love of wine, bring a smile to a heart and become a trustworthy partner in our community.

Check out the site to see more at sipscellars.com

Does your website support users in older browsers?

When it comes to HTML5 & CSS3 website development, the problem designers and developers often encounter when using HTML5 or CSS3 is how best to support older browsers which do not support features such as CSS transition, border-radius and box-shadow

Modernizr is the SOLUTION!

What is Modernizr? Modernizr is a Lightweight Javascript Library that helps you take advantage of emerging web technologies (HTML5 & CSS3) while still maintaining a fine level of control over older browsers that may not yet support these new technologies. More Information @ http://www.modernizr.com

How to use Modernizr?

You can "firebug" our backbone site to see how it works :D

Modernizr v2 just came out this June, you can customize and download the Modernizr script by go to the Modernizr Download Page. Then, install your javascript library as usual and you should be able to see the magaic like the image below:

If the current browser you are using does not support CSS3 rgba color, then in the html tag there would be a "no-rgba" class. From that, you can do a fallback CSS style for non-rgba browsers.