3 Things You Can Do With CSS That Will Blow Your Mind

CSS is one of the first languages many coders learn, and it’s an integral part of building any website. But it can do a lot more than handle simple style elements.

While traditionalists may relegate it to the basics – fonts, styling, colors, etc. – it can actually handle a variety of design complexities, like animation.

In fact, many modern developers are taking CSS to new heights with a variety of cool and surprising projects. Some of them may be advanced for beginner designers, but each project proves that there are limitless possibilities for working with CSS.

Here are a few inspirational ways you can use CSS for your next project.

[ Content upgrade with ID = 360 not found ]

Animations

The use of animation in web design has certainly gained momentum over the last decade or so. The methods and techniques for adding motion to an interface have become more advanced as well.

Old school designers and developers may have once relied on JavaScript to create eye-catching animations and videos, but CSS has taken on some of the heavy lifting in recent years, as shown by some of the world’s best developers.

Julian Garnier created a 3D model of the planets in orbit, for example.

Julian Garnier

Source: Codepen

Roman Cortes has been known to make complex animations purely out of CSS. His spinning effect on the image of a can of Coke shows what’s possible with a few simple styling sheets. When you scroll back and forth on his image, it looks as though the can is spinning.

coke_bottle_css

Source: Roman Cortes

But animated elements don’t always have to be so obvious. In fact, many of the most popular animations using CSS for the web today are subtle, like an animated menu button effect.

Developer Marius Balaj created a simple button animation that materializes when you scroll down.

mariusbalaj

Source: Codepen

And Sascha Michael Trinkaus created a hover animation for a check mark button that changes the surrounding gradient color.

animated_checkmark_button

Source: Codepen

CSS can also be used with motion curves for even more realistic animations. (Smashing Magazine has an explanation and a few examples of that here), but whether it stands alone or is used in combination with JavaScript, CSS can do a lot for the world of animation.

Text Effects

CSS can also be used to create stunning visual effects for text. In some cases, additional languages like SVG or JavaScript may be used to enhance the effect, but some incredible effects can be added solely with CSS.

Developer Hugo Darby-Brown recreated the Shop Talk logo from scratch using only CSS.

shoptalk

Source: Codepen

Patrick Brosset animated this logo (“Cosmos”) using simple CSS.

cosmo

Source: Codepen

Developer Yoksel takes this idea a step further by turning his text into a simple animation. This text effect is made with a combination of CSS and SVG.

elasticstroke

Source: Codepen

And Yoann Helin created a simple ticker effect that alternates text between three different words.

helloworld

Source: Codepen

While CSS is most often used to add color to fonts and background elements, it can also be used to create images, text, and animated text effects. When used in combination with JavaScript and SVG, there’s very little you can’t do with it.

Fluid Menus

CSS is often used for creating animated menus, and that’s nothing new. But the level of creativity isn’t limited to your average horizontal menu with a few drop downs or a hamburger menu. You can create dynamic and engaging menus that are mobile responsive with CSS.

This menu, for instance, uses transparent icons and an animated slider to create a unique transition effect between items on the navigation bar.

cssdeck

Source: CSSDeck

One developer named Travis created a single-page navigation menu for Mic.com (though they currently use the hamburger menu for their main site).

micnav

Source: Codepen

If you’re in love with the idea of using a hamburger menu, you could take a page out of developer Sergio’s book and create a morphing circular menu along with your hamburger menu.

hamburger

Source: Codepen

But you can also skip the hamburger in favor of a slider. Humaan’s site, for example, has an animated scrolling menu that slides right and stays fixed until reaching the very top of the page.

humaan

Source: Humaan

Navigation is often one of the trickier areas of web design and development, but with CSS, you can rethink traditional design elements to create something more attention grabbing or out-of-the-box for clients that want something a little extra.

[ Content upgrade with ID = 360 not found ]

Final Thoughts

There are plenty of other mind-bending things that you can do with CSS (like this Submarine with CSS by Alberto Jerez), as well as a slew of really practical stuff (like image filters and forms).

Overall, CSS is an excellent option for creating subtle text and logo animations as well as more robust animated images. It’s also very efficient and relatively easy to learn compared to other languages like SVG.

It’s especially great for transitions that require animation, like fluid menus, clickable icons, or buttons. It’s also an excellent way to create 3D animations, as most browsers have an easier time reading 3D animations made with CSS.

Because you can see exactly what you’re getting throughout the design process, you may have an easier time animating these effects with CSS rather than JavaScript (and the end results are equally stunning).

It opens a multitude of new doors for web designers and developers alike, making it possible to create animations and interactivity entirely with a relatively simple language.

Of course, you can combine JavaScript with CSS for advanced animations and really wow your clients, too.

Leave a Reply