CSS Animation

Are There Random Numbers in CSS? – Website Design Article

CSS allows you to create dynamic layouts and interfaces on the web, but as a language, it is static: once a value is set, it cannot be changed. The idea of randomness is off the table. Generating random numbers at runtime is the territory of JavaScript, not so much CSS. Or is it? If we factor in a little user interaction, we actually can generate some degree of randomness in CSS. Let’s take a look! Randomization from other languages There…

Read More

Creating Wild and Crazy Backgrounds with CSS & JavaScript – Website Design Article

The ability of developers to do amazing things with code never ceases to amaze. Sure, functionality still plays a huge role. But these days, we’re also seeing some otherworldly visuals come to life through the help of CSS and JavaScript, among others. Today, we’re going to focus on an area that is sure to grab your attention: Background patterns. Note that there is no subtlety here. The code snippets we’re about to show you turn up the volume to 11.…

Read More

10 Examples & Snippets of the Curtain Effect in Web Design – Website Design Article

Bringing a user’s eyes up to content in a non-intrusive way is a kind of a dream for every website owner. We are always looking for ways to draw attention to the message that we want to convey to our audience. Whether it is a promo page, personal portfolio, corporate portal or a travel blog, we need a small helping hand from dynamic solutions. The goal is to enrich otherwise static content and meet the expectations of the modern world.…

Read More

8 Fantastic Pure CSS Border Effect Code Snippets – Website Design Article

Borders are often thought of as small details that are used as a finishing touch to an image or container element. They serve as a nicety, but hardly anything to get excited about. But as CSS evolves, they have the potential to become something more. With more complex coloring and special effects, designers can leverage borders to draw attention to important information. They can also play a role in user engagement and microinteractions. With that in mind, let’s take a…

Read More

A Course About CSS Layout and Animations – Website Design Article

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.…

Read More

Forge Your Own (Animation) Path with These Snippets – Website Design Article

In some ways, it seems like we’re in the golden age of animation on the web. Mainly because there are so many options for implementing it into our projects. Certainly, you can leverage some high-powered JavaScript libraries to create something other-worldly. But you can also use the effects already built into CSS3 to add movement to your website. Either way, the end user doesn’t necessarily need any fancy hardware or browser plugins to view your creation. That brings us to…

Read More

Writing Animations That Bring Your Site to Life – Website Design Article

Web animation is one of the factors that can strongly enhance your website’s look and feel. Sadly, unlike mobile apps, there aren’t as many websites using animation to their benefit as you would think. We don’t want to count yours among those, so this article is for you and anyone else looking for ways to use animation for a better user experience! Specifically, we’re going to learn how to make web interactions delightful using CSS animations. Here’s what we’re going…

Read More

Slide an Image to Reveal Text with CSS Animations – Website Design Article

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…

Read More

Set Your Text in Motion with These Dazzling Effects – Website Design Article

The trend of setting everything in motion rules the roost these days. You cannot help but to follow this madness and develop an obsession of injecting life into every detail of a website. The static era is gone. Everything is dynamic. And you know what? Users are perfectly aware of it. For some, that is bad news, since it will take Herculean efforts to trick users into believing that a static website brings an exciting experience. For others it is…

Read More