Tag Archives: CSS3

Moving along a curved path in CSS with layered animation

Using an inner and outer container you can animate content on a curved path

 

CSS animations and transitions are great for animating something from point A to B. That is, if you want to animate along a straight path. No matter how much you bend your bezier curves, you can’t make something move along a curved path by applying ananimation or a transition to an object. You can overshoot with custom timing functions, and produce spring-like effects, but the relative movement along the X and Y-axis will always be identical.

However, instead of turning to JavaScript for producing more natural looking motion, there’s an easy way to work around this limitation: layered animation. By using two or more objects to drive an animation, we get fine grained control over an object’s path, and can apply one timing function for the movement along the X-axis, and another one for the Y-axis.

Read more from the source: Tobias Ahlin

Fix scrolling performance with CSS will-change property

Use CSS will-change to push an element to its own composition layer

 

Chris Ruppel writes:

I recently saw Paul Lewis’ screencast demonstrating how trivial it can be to fix a particular kind of performance issue caused by scrolling. I knew the problem looked familiar and I realized it was happening right in my front yard, on the Four Kitchens homepage. Read on to see how easy it was to diagnose and fix.

Read more from the source: fourword.fourkitchens.com

A Visual Guide to CSS3 Flexbox Properties

CSS flex-box sounds like a lot to learn, but we need to start using it right now

 

The Flexbox Layout officially called CSS Flexible Box Layout Module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.

Many designers and developers find this flexbox layout easier to use, as positioning of the elements is simpler thus more complex layouts can be achieved with less code, leading to simpler development process. Flexbox layout algorithm is direction based unlike the block or inline layout which are vertically and horizontally based. This flexbox layout should be used for small application components, while new CSS Grid Layout Module is emerging to handle the large scale layouts.

Read more from the source: Scotch

Blurred Background in CSS

Create blurred backgrounds in CSS without the forthcoming blur API

 

While waiting for the official property, the trick is to create blurred version of the background, and set the background property both of them (main body background and box that want to be blurred) to be cover sized and fixed.

Read more from the source: CodePen