5 great CSS hacks every web developer should know

CSS gives us such powerful possibilities to create even better websites, even 2021. Although there are many frameworks that help us designing websites even faster, the “basic” CSS has lots of great features that are still important and useful in 2021.

In this article I’d like to show you five of these tricks in detail.

1. Animations

This is a very easy trick that can be done with just a view lines of code. You need to define an animation with a name, a duration, iteration and a fixed point or field. Then you use the keyframes selector to define the rotation from zero to 100 percent. And voilà.. your animated emoji is ready!

2. Darkmode

filter: invert(90%);

Thats it. Although it is not a perfect darkmode with specific settings, it’s a very easy way to invert your website and create a dark version of it.

3. Media Queries

@media (min-device-width:800px) { 
img {
display:inline;
}
}

4. Background Gradients

even a slight gradient makes the background look much better

Usually a background color is defined like this:

background: rgb(30,117,38);

To add a gradient, you just need one extra line and it’s done. You can decide if you want a linear or a radial gradient and a preferred angle. There are also websites like cssgradient.io where you can create your individual background color or webgradients.com where you finde a great free collection of linear gradients. But in case you want to create your own, here’s the code:

background: linear-gradient(90deg, rgba(30,117,38,1) 0%, rgba(33,130,37,0.9066001400560224) 50%, rgba(57,212,58,0.819765406162465) 100%);

As you can see every color stop is defined with an rgba and a percentage on which position this new color should have its highlight. At the beginning the type (linear) and the angle (90deg) is defined. And now, your website looks even more tasty!

5. Clip-path

Stripe Webdesign with clip-path in css

If you want to cut a triangle from an image, you just have to set this:

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Bennett Feely developed a tool called clippy that helps you to design your clip path as you like. You can choose between triangle, trapezoid, hexagon, chevron and a lot more. Check it out, it’s great.

Photo by Patrick Fore on Unsplash

There are so much great things you can do with CSS. Tell me your favorite hack in the comments below.

German and History Teacher, hobby Web Developer, based in Austria 🇦🇹, interested in politics and pretty much everything!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store