Create smooth animations with CSS3 animations

CSS3 Animations Module that solves all these problems. In this new specification, the animation are keyframe-based which allows more complicated animations to be done easily and the syntax is pretty easy. First, let’s understand the syntax. You need to define a set of keyframes with the @keyframes rule first. Here’s an example:

@keyframes animation {
    from {
        transform: translateX(0px);
    }
    to {
        transform: translateX(-100px);
    }
}

In this example, it defines a set of keyframes called animation. It starts from the original position and moves to left by 100px. You can also add more than 2 keyframes by using percentages to indicate the position of the keyframe. Here’s an example:

@keyframes animation {
    from {
        transform: translateX(0px);
    }
    60% {
        transform: translateX(36px);
    }
    to {
        transform: translateX(-100px);
    }
}

DEMO In this example, the animation will first moves from its original position to it right by 36px then at the 60% of the whole animation it starts to move from the right to the left by 100px. This creates a bouncing animation. You can also animate more than one property at a time to create even more complex animations. After we have created the keyframes, we need to add the keyframes to the element that we want to animate by using the animation CSS3 property. Here’s the syntax:

animation: <keyframe_name> <duration> [<timing_function> <iteration>];

Where <keyframe_name> is the name of the keyframe you want to add, <duration> is the length of the animation in seconds, <timing_function> is a string indicates the progress of the animation and <iteration> is the times of repeated animations. Here’s an example:

.element {
    animation: animation 2s;
}

This will play an animation with a set of keyframes called animation in 2 seconds once. You can also make more changes to make an animation to look more natural by adding a timing function of ease

How to create triangles using CSS easily

We often see some tooltips that uses triangular arrows to emphasize the content and images were often used for the arrows. Now, with new techniques, we can create these arrows in CSS just fine.

Here’s an example:

CSS equilateral triangle

 

We’ll use CSS borders to create the triangles. You may ask, “Why can borders do that?”. It’s because browsers draw borders as triangles and we can use that to make triangles.

First, as the borders are drawn around the container we need to make sure the container has no width & height (i.e. set them to zeros).

HTML:

<div id="triangle"></div>

CSS:

#triangle {
    width: 0;
    height: 0;
}

Then, we need to add borders in. In order to aid the creation of triangles, we need to add colours to all sides. It’ll now look like this:

Triangles diagram

 

CSS:

#triangle {
    border-top: red 2em solid;
    border-bottom: green 2em solid;
    border-left: blue 2em solid;
    border-right: orange 2em solid;
}

You can now see 4 triangles showing up. By adjusting the thickness of each side of border, you can create different types and sizes of triangles. Examples are:

Triangles example 3Triangles example 2Triangles examples 1

After that, you need to eliminate the other parts by setting their colour to transparent. Now it’s finished just like the first diagram. You can even make dialogues using this technique with CSS3’s :before & :after selectors. It’s very cool, isn’t it?

Here’s some things that I’ve made with this technique. Check it out! http://dabblet.com/gist/5500863

Brackets – A nice, lightweight code editor for the web by Adobe

Before this, I used Dreamweaver to code. However, I found the CPU usage rises a lot when I use it and it costs me a few hundred megabytes to install. After that, I started to find other code editors that is lightweight and powerful. Finally, Brackets is the one that satisfies my needs so I recommend it to you. Below is some information that I quoted from their websites:

About Brackets

Brackets is an open-source editor for web design and development built on top of web technologies such as HTML, CSS and JavaScript. The project was created and is maintained by Adobe, and is released under an MIT License.

Guiding Ideas

FOR THE WEB, BY THE WEB

Brackets is built using HTML, CSS and JavaScript. If you can code in Brackets, you can code on Brackets.

OPEN DEVELOPMENT WORKS

Brackets, is a fully open-source, community-driven project. Want to influence its direction? Join the developer list and start contributing.

TOOLS SHOULDN’T GET IN YOUR WAY

Rather than clutter your workspace with floating panels, toolbars and icons, Brackets focuses on providing “Quick Edit” in-line views that provide context-sensitive access to your content, without taking you away from your code.

WORKS WITH YOUR BROWSER

The browser is your design view. Brackets hooks up directly to the browser, allowing you to design and develop in the same environment that you deploy.

Download it here.

My latest survey service – PollEndpoint

I created PollEndpoint originally for my homework assignment because other online survey service doesn’t match my requirements. So I made my own site for making online questionnaires and I found it pretty useful for others so I release it.

It is made with node.js which is pretty fast and stable (it’s been proven by Microsoft). It also has an easy-to-use step-by-step interface to create polls. It also has a nice real-time statistics which is easy to read. (Somehow I feel like advertising my product.)

It has some features that is, unique from other online questionnaire services. Examples are:

  1. Responsive design that fits your screen even if you’re using a mobile phone.
  2. Uses HTML5 Microdata and other tags to increase the view rate and achieve better SEO.
  3. PollEndpoint can be embedded to other webpages/blogs through the embed code.
  4. It contains no ads!

By the way, here’s a demo of the embed code.

<iframe width="100%" height="400" style="overflow: hidden;" src="https://pollendpoint-licson.rhcloud.com/widget/ddeqrX2e79xE-kxM-xxv4poP2"></iframe>

Do `Harlem Shake` on any websites!

These days you can see many dancing videos on YouTube and those dances are called Harlem Shake. I wonder if there’s others things that can dance the Harlem Shake.

Based on the idea of Vir Ascabano, He has created a little script that can do the Harlem Shake on websites! However, it’s not very perfect, so I create another one which is better in some circumstances.

Here’s the script:

(function(c){var b=c.getElementsByTagName("head")[0];a=c.createElement("script");a.type="text/javascript";a.src=unescape("%2F%2Fdl.dropboxusercontent.com%2Fs%2F82526m7wt4vpesr%2Fharlem-shake.js");a.async=true;b.appendChild(a);})(document);

It’s been reported that this doesn’t work on Facebook. It’s because Facebook limits what scripts can be loaded by using the Content Security Policy headers. To make it work on Facebook, we need to use the long script below instead of the one above.

(function(){function l(a){var c=a.offsetHeight;a=a.offsetWidth;return c>q&&c<r&&a>s&&a<t}function m(){for(var a=document.getElementsByClassName(f),c=RegExp("\\b"+f+"\\b");0<a.length;)a[0].className=a[0].className.replace(c,"")}var q=10,s=10,r=1E3,t=1E3,f="mw-harlem_shake_me",n=["im_drunk","im_baked","im_trippin","im_blown","im_hanging"],p,b=document.documentElement;p=window.innerWidth?window.innerHeight:b&&!isNaN(b.clientHeight)?b.clientHeight:0;var g;g=window.pageYOffset?window.pageYOffset:Math.max(document.documentElement.scrollTop,document.body.scrollTop);for(var b=document.getElementsByTagName("*"),h=null,e=0;e<b.length;e++){var a=b[e];if(l(a)){var d;d=a;for(var j=0;d;)j+=d.offsetTop,d=d.offsetParent;d=j;if(d>=g&&d<=p+g){h=a;break}}}if(null===a)a=b;else{a=document.createElement("link");a.setAttribute("type","text/css");a.setAttribute("rel","stylesheet");a.setAttribute("href","//dl.dropboxusercontent.com/s/nt5iljw2e0iac44/harlem-shake.css");a.setAttribute("class","mw_added_css");document.body.appendChild(a);a=document.createElement("audio");a.setAttribute("class","mw_added_css");a.src="//dl.dropboxusercontent.com/s/vyk1ctygfanj78p/harlem-shake.mp3";a.loop=!1;a.addEventListener("canplay",function(){setTimeout(function(){h.className+=" "+f+" im_first"},500);setTimeout(function(){m();var a=document.createElement("div");a.setAttribute("class","mw-strobe_light");document.body.appendChild(a);setTimeout(function(){document.body.removeChild(a)},100);for(var c=0;c<k.length;c++){var b=k[c];b.className+=" "+f+" "+n[Math.floor(Math.random()*n.length)]}},15500)},!0);a.addEventListener("ended",function(){m();for(var a=document.getElementsByClassName("mw_added_css"),b=0;b<a.length;b++)document.body.removeChild(a[b])},!0);a.innerHTML=" <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";document.body.appendChild(a);a.play();for(var k=[],e=0;e<b.length;e++)a=b[e],l(a)&&k.push(a)}})();

How to use?

  1. First, press F12 -> Console
  2. Then, copy-and-paste the code above and click enter.
  3. You should see the effect afterwards.

This effect works in Chrome, Firefox, IE10+, Safari and Opera.