We have a whole selection of ways to align things in CSS today, and it isn’t always an obvious decision which to use. However, knowing what is available means that you can always try a few tactics if you come across a particular alignment problem.

Do it yourself using the aforementioned CSS/Sass, or take a shortcut by using a plugin like Animate.CSS. It contains ready-to-use utility classes for common animations, such as fades, slides, shake, and many more.

Use names. Use frs. Don't use a grid system. Wait, what? 2.17.2019

How a new technology is changing layout on the web

We can create grids that better control the placement of elements both vertically and horizontally. All of this brings classic graphic design and art direction approaches back to web design.

As a motion enthusiast, there is one question that I have been asked the most:

“How do I start with Motion Design?”

To this, I often reply savagely, “You start with Physics”; scaring away most of the seekers 😂 But here is the thing — someone who is genuinely interested never stops with a single query. They follow up with questions after questions after questions. I love them! ❤️

Welcome to CSS Animation 101, and thank you for choosing this book.

I’m delighted you’ve chosen to learn CSS animation. This book is a light and fun introduction to the topic, and I hope you find it helpful. We’re going to learn about CSS transitions and animations. By the end you’ll have a good understanding of CSS animations as well as the tools to create and experiment with our own.

There will be both theory and practical examples. We’ll learn how to easily create your own working environment, and look at lots of examples of animation along the way.

Wes Bos
Published on Aug 23, 2018
SUBSCRIBE 65K
This is a talk I did at Laracon on CSS Grid. If you want to learn more about CSS Grid, take my free course at https://CSSGrid.io. Slides for this talk available at https://wesbos.github.io/css-grid-talk - Enjoy!

If you're in the position of needing to interview someone about their skill and knowledge about CSS, it can be a little hard to think of things to ask on-the-fly. I thought I'd think up and round up some ideas for reference.

The first thing to look at is the timing function. In the above example, we’re using a linear timing function, which means that the box is constantly moving at the same speed. In some cases, this is desirable; however, in the real world, motion usually doesn’t work like that.

In this article, we take a look at the alignment properties in Flexbox while discovering some basic rules to help remember how alignment on both the main and cross axis works.

For every inline style that targets an element using the style attribute, 1 goal is assigned to goal post (a).
For every id selector, 1 goal is assigned to post(b).
For every class selector, attribute selector, and pseudo-classes present, 1 goal is assigned to post(c).
For every element selector and pseudo-element, 1 goal is assigned to post (d).
The way I remember this is by using the acronym, SICAPEP:

Hand-picked HTML and CSS code examples, tutorials and articles

Whether you’re fairly new to CSS or an experienced developer from elsewhere in the stack who wants to make sure your understanding of layout today is up to date, this guide covers everything you need to know about CSS Layout today.

In a short series of articles, I’m going to spend some time in detailed unpacking of Flexbox — in the same way I have done in the past with grid. We’ll have a look at the things Flexbox was designed for, what it really does well, and why we might not choose it as a layout method. In this article, we will take a detailed look at what actually happens when you add display: flex to your stylesheet.

How a Block Formatting Context (BFC) behaves is easiest to understand with a simple float example. In the below example I have a box that contains an image that has been floated left and some text. If we have a good amount of text it wraps around the floated image and the border then runs around the whole lot.

There are two ways in which we ordinarily fix this layout problem. One would be to use a clearfix hack, which has the effect of inserting an element below the text and image and setting it to clear both. The other method is to use the overflow property, with a value other than the default of visible.
.outer {
overflow: auto;
}

clearfix, centering, font-size

In this tutorial you’ll learn about using gradients on the web. I’ll give you some examples, some exercises (such as how to create gradients for borders), and I’ll also throw in some useful resources which will make creating gradients a lot easier.

So I became a bit obsessed about how further we can push the limits of what we can draw with CSS only. Basically, I noticed that you can play around with basic shapes like circles, rectangles and triangles to draw virtually anything. You can even put some drop-shadows and CSS filters to get some pretty cool effects as well.

In this pocket guide I'll write some examples from really easy to more complex things you can do to create cool drawings and animations with CSS.