Tag Archives: CSS3

Pause and slow down CSS3 animations in Chrome Dev Tools

Chrome Canary gives you a sneak peak of dev tools for CSS3 animation

 

Visually debugging CSS animation just got a whole lot easier! We’ve needed better debugging tools (or any debugging tools, really) for CSS animation for ages. Now we’re starting to see some show up in browsers! The latest version of Canary now has controls to globally slow down and pause animation right from Dev Tools. It’s such a huge help for both designing and troubleshooting your animations.

To try these out for yourself in Canary, open up Dev Tools and go to Styles tab under Elements. Look for the play button in the far right and you’re off to the races.

Read more from the source: valhead.com

Velocity.js: A fast animation engine with jQuery’s animate API plus built-in support for color animation, easing, scrolling and CSS3 animation

Try out the animation demos for Velocity.js and you’ll immediately see why it is better than jQuery animate

 

Download Velocity, include it on your page, and replace all instances of jQuery’s $.animate() with $.velocity(). You will immediately see a performance boost across all browsers and devices — especially on mobile.

The Secret Sauce. Although Velocity works alongside jQuery, it uses its own animation stack that delivers its performance through two underlying principles: 1) synchronize the DOM → tween stack to minimize layout thrashing, and 2) cache values to minimize DOM querying.

Read more at julian.com

A Complete Guide to Flexbox | CSS-Tricks

After reading several articles and tutorials, I finally started to understand CSS flexbox as explained in this awesome CSS Tricks article

 

From the article:

The Flexbox Layout (Flexible Box) module (currently a W3C Candidate Recommendation) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

Read the full article at CSS-Tricks

HTML5 mockups of popular devices, to showcase your portfolio and spice up your website

You know those fancy device photos designers use in mockups? Well now you can use them in HTML.

 

Thanks to Tomi Hiltunen and Angelos Arnis you can superimpose your working HTML mockups onto a realistic rendering of devices including iPhone, iPad, iMac, MacBookPro, Galaxy S3, Surface.

There is even an element positioned over the device button to allow the button to do something.

Read more from the source: aarnis.com