15 amazing CSS tips and tricks you should know

This content originally appeared on DEV Community and was authored by Duomly

This article was originally published at: https://www.blog.duomly.com/12-css-tips-and-tricks-which-help-you-to-create-an-amazing-websites/

CSS is Cascading Style Sheets and is used to describe how HTML elements should display. It’s one of the first technology learned by soon to be front-end and web developers, and it’s an absolute have to know basic.

Although it seems CSS can’t do a lot besides giving our HTML colors, positions, etc., but it can also let us create animations and bring some life to our apps and websites. Probably now many of us take care of mastering CSS and learning it so deeply, but it’s totally worth to know some useful tips and tricks which may help you to create stunning websites!

Are you ready to check out 20 tips and tricks which can change your CSS usage from now?

Let’s start!

1. Vertical align with flex

Since the Flexible Box Layout Model appeared, it became very popular, because it makes positioning and aligning elements easier. Using flex (Flexible Box Layout Model sub-property) made vertical alignment fast, nice, and easy before we had to do it a little bit around in many cases. Let’s take a look at code example for vertical positioning with flex because it allows doing a lot with alignment.

As you can see in the code above, we used display: flex and align-items: center,
justify-content: center to ensure our child element will be exactly in the center of the parent element.

Easy, right?

2. Blend modes

We can do lots of cool stuff in CSS right now, and one of them is a blend mode. There are two properties for blend modes: mix-blend-mode, which defines blending between element and element behind it, and background-blend-mode, which defines blending between the background image and background color of the element. Let’s take a look at how it works:

In the code above, we set image and header with text. The text is an element that is blended with the image. We used overlay value, but there are 15 other values that can be used. Now, let’s check the background-blend-mode code example:

In this case, we can see how the background image got blended with the color. The first image is before blending, and the second one is after blending.

Isn’t it amazing what we can do with CSS?

3. Parallax scrolling

Parallax is a very common trend in modern web design. It’s about scrolling background content at a different speed than foreground content when we scroll the page. Let’s see how this magic can be done using CSS:

In the example, you can see how our text and background image are moving differently. We used transformZ, to fasten one element and slow another one. Looks good, right?

4. Shape outside

There is another great feature that came with CSS, and it’s not very common. It’s shape-outside property. It decides how content will wrap around the floated element. Let’s take a look at how it works:

In the code example, you can see that the text overflows the circle. We set the value of shape-outside to circle 50%, but it’s also possible to set an image, triangle, square, etc. Check it out and play with it!

5. Truncate the string

I hate when my text doesn’t suit inside the div, and it goes out anesthetically. In Javascript, there are a few ways how we can manage it but, did you know that it’s possible to cut the text in CSS as well? Let’s check it out:

Above, you can see how CSS can cut the text and finish it with …. I used overflow: hidden, white-space: nowrap, and finally to got three dots, I used text-overflow: ellipsis.

6. Clip path

Sometimes the designer went a little bit more creative, and now you have to put an image in a specific shape, like the triangle or other. For this, you could use clip-path property! Let’s take a quick look at how it works:

In the example above, I created a circle, eclipse, and a custom polygon shape.

7. Full height and full width

If we would like to set our app or website adjusted to the viewport, vh and vw units make it much easier. vh means it’s 100% of the viewport height, and vw means the 100% width of the viewport. Let’s check how it works in a real example:

In the example above, I set the blue-box element to 50vw and 50vh, which means it should have a 50% of the viewport width and 50% of the viewport height, and if you resize the viewport you may notice how it adjusts.

Cool, right?

8. Image filters

Playing with images may bring lots of amazing effects for the layout and help to create stunning results. CSS allows using lots of filters on the images to help developers play with the graphic without changing it in Photoshop. Let’s take a look at the filters we may use:

In the example above, you can see seven different filters used in the same image.

9. CSS animations

Animations can grab a user’s attention on the website, and this is why it’s used in web design so often. Creating it in CSS makes things much easier, let’s take a closer look at an example animation in CSS:

In the code above, I’ve created a small dot that changes the position and opacity every 25% until it will get 100% and then starts once again. It’s also possible to change colors and other properties of the elements.

10. Element rotation

Another type of animation which can be done in CSS is rotation, it’s a little bit more dynamic, and it’s great to add some life to loader element, logo or image in the gallery. Let’s check what we can do with rotation:

In the example, we can see a cat rotating four times during one cycle of the animation.

11. Mask

If you ever did graphic design, you probably know how helpful are masks. It’s also possible to use image masks in CSS. Let’s try to make a mask for an image:

In the example above, I’ve created a circle gradient mask, but you can also use an SVG graphic as a mask, by adding the URL to the file.

12. Zoom on hover

When you create an image gallery, you want to mark somehow the hovered image very often. The great idea is to add zoom on hover to accentuate the hovered photo. Let’s take a look at how it works:

In the example above, I’ve created a small images gallery and add scale property on hover to make the hovered image bigger than the others. Easy right?

13. Frosted glass CSS

Frosted glass is one of the most trendy things in CSS & website UI world last time, but how can you build it? It's easy, and now I'll show you how!

Let's take a look at the example, and build frosted glass with us.

14. CSS only carousel

Do you remember times when building carousel needed skills like jQuery or javascript and much work?
I do, but did you know, now you can build a carousel with CSS only?

It's possible, and now, I will show you how to do that easily.

15. How to use CSS variables

You do not need sass or less to specify variables anymore!

You can use this powerful feature in pure CSS now, specify, for example, color, and use it in many places without copying its hex code.

Let's take a look at the example, and you will learn how.

Conclusion

We want to create stunning websites and apps, but sometimes we think it takes lots of effort and time to create an animation or a mask on the image. As I showed you in this article, sometimes it’s much more comfortable than changing the imaged in a graphics program.

I hope you will find these tips and tricks helpful and useful for your future coding. If you know any interesting tricks in CSS, share your favorites with me in comments or social media, I really would like to know.

Have a nice coding!

This content originally appeared on DEV Community and was authored by Duomly