CSS Secrets from a CSS Guru

 A CSS Guru Reveals a Big CSS Secret

Of late, I have been fascinated with mouse-sensitive animation.

See this one called Particle JS that I forked onto Codepen.

See the Pen It’s alive! particles by Debbie Kay (@debbiediscovers) on CodePen.dark

Another version is this a pen that does not require any Javascript. This animation is triggered using CSS transitions only,

See the Pen Digital Explosion by Debbie Kay (@debbiediscovers) on CodePen.dark

Adapted from HongKiat.com

CSS3 Transition is a great addition to CSS3 that allows  transitional changing effects to CSS rules.

For each transition, there are four predefined timing functions that can be used:ease, ease-in, ease-out, ease-in-out and linear.

These are based on the Bezier curve and is defined with this syntax:

1
cubic-bezier(P0,P1,P2,P3);

Cubic Bezier Curve

The Bezier curve is a commonly used curve model in computer graphics like Adobe Illustrator. This curve is formed with four points as illustrated in the following figure:

Cubic Bezier Curve

Using the Cubic-bezier function, one can create custom speed for any animation. But defining the animation speed with the Cubic-bezier function is not that intuitive. Lucky for web designers, there is a web-app called Cubic-bezier.com that helps you calculate and preview the right parameters

Cubic Bezier Tool by CSS Guru

The CSS Guru

This tool was created by Lea Verou, also known as the CSS Guru (respect!) and it allows you to move around the Bezier curve while it instantly generates the values for you.

After stalking her on her Twitter timeline, one thing that caught my eye was that she just wrote a book called “CSS Secrets”, and the reviews on her timeline have all been stellar.

At first, I was afraid I would not be able to understand it – heck I can’t understand half of what she says on her timeline. But I could not resist and took a sneak peak and it was GOOD! So I decided to buy it and at point of check out, I was notified that it was DRM Day and the publishers were giving away a 50% discount on all book purchases!

Now that’s what I call fate.😎

For those interested, you can purchase the ebook for $32.99 at O’Reilly’s online store. Buy both the ebook and the hardcopy for $43.99 but note that international shipping for the hard copy is a mind blowing and frankly insane $49.50.

Stick to the e-book. You won’t regret it.

Leave a Reply