Select Page

Category: css animation

A Course About CSS Layout and Animations

Christina Gorton just released a new course called CSS Layout and Animations as a part of Design+Code, which is a $9/month. That includes a ton of video training on everything from stuff like this to React to Sketch to iOS development… and beyond! Christina approaches the course with my favorite way to learn this stuff: by starting from a lovely design and then pulling it off with code. That’s Figma as the design tool, which is another tool I love. Of course, what I really love is that: The course is full of CSS trickery and modern HTML &...

Read More

Slide an Image to Reveal Text with CSS Animations

I want to take a closer look at the CSS animation property and walk through an effect that I used on my own portfolio website: making text appear from behind a moving object. Here’s an isolated example if you’d like to see the final product. Here’s what we’re going to work with: See the Pen Revealing Text Animation Part 4 – Responsive by Jesper Ekstrom (@jesper-ekstrom) on CodePen. Even if you’re not all that interested in the effect itself, this will be an excellent exercise to expand your CSS knowledge and begin creating unique animations of your own. In...

Read More

1 Element CSS Rainbow Gradient Infinity

I first got the idea to CSS something of the kind when I saw this gradient infinity logo by Infographic Paradise: The original gradient infinity. After four hours and some twenty minutes, of which over four hours were spent on tweaking positioning, edges and highlights… I finally had the result below: My version of the rainbow gradient infinity. The gradient doesn’t look like in the original illustration, as I chose to generate the rainbow logically instead of using the Dev Tools picker or something like that, but other than that, I think I got pretty close—let’s see how I...

Read More

Making CSS Animations Feel More Natural

It used to be that designers designed and coders coded. There was no crossover, and that’s the way it was. But with the advent of CSS transitions and animations, those lines are blurring a bit. It’s no longer as simple as the designer dictating the design and the coder transcribing—designers must now know something about code, and coders must know something about design in order to effectively collaborate. As an example, let’s say a designer asks a developer to make a box bounce. That’s it—no additional instruction. Without some cross-knowledge and a common vocabulary, both sides are a little lost in this communication: the developer doesn’t have enough information to fully realize the designer’s vision, but the designer doesn’t really know what the options are and how to communicate them. With a very basic interpretation, you might end up with something that looks like this: See the Pen Bouncing Box 1 by Brandon Gregory (@pulpexploder) on CodePen. Not very exciting. Although, to be fair, this does meet all of the criteria given. We can definitely do better than this, though. 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....

Read More
www.000webhost.com