15 CSS Tips and Tricks to Help You Create Awesome Websites (2023)

CSS stands for Cascading Style Sheets and is used to describe how HTML elements should be displayed. It's one of the first technologies that web and front-end developers will soon learn, and knowing the basics is an absolute must.

While it seems like CSS can't do much more than give colors, positions, etc. to our HTML, it can also allow us to create animations and bring our apps and websites to life. Probably many of us now care about mastering CSS and learning it so thoroughly, but it's definitely worth knowing some useful tips and tricks that can help you create stunning websites.

Ready to check out 15 tips and tricks that could change your CSS usage from now on?

Let's begin!

And if you prefer video, here's the YouTube version:

1. Align vertically with Flex

Since the advent of the flexible box layout template, it has become very popular because it makes it easier to place and align items. Using flex (a sub-property of the flex box layout template) made vertical alignment quick, nice and easy before we had to tweak it a bit in many cases. Let's take a look at the code example for vertical positioning with Flex, as it does a lot with alignment.

As you can see in the code above, we use display: flex and align-items: center, allow-content: center to make sure our child is exactly in the center of its parent.

Good?

2. Blending Modes

We can do a lot of cool things in CSS now, and one of them is a blending mode. There are two properties for the blending modes: mix-blend-mode, which sets the blend between the element and the element behind it, and background-blend-mode, which sets the blend between the background image and the background color of the element. . Let's see how this works:

In the above code, we set the image and header with text. The text is an element that blends in with the image. We used the override value, but there are 15 other values ​​that can be used. Now let's see the code example for background blending mode:

In this case, we can see how the background image has been blended with the color. The first image is before merging and the second is after merging.

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

3. Parallax scrolling

Parallax is a common trend in modern web design. It's about making the background content scroll at a different speed than the foreground content as we scroll down the page. Let's see how this magic can be done with CSS:

In the example, you can see how our text and background image move differently. We use transformZ to freeze one element and slow down another. Sounds good, doesn't it?

4. External shape

There's another great feature that comes with CSS, and it's not very common. It's out of the question. Decide how the content surrounds the float. Let's see how this works:

In the code example, you can see that the text extends beyond the circle. We set the shape-out value to a 50% circle, but it is also possible to set an image, triangle, square, etc. Try and play with it!

5. Cut the thread

I hate it when my text doesn't fit in the div and it's mind-numbing. In javascript there are a few ways to manage it, but did you know that it is also possible to clip text in CSS? Let's see:

Above you can see how CSS can clip the text and fill it with... I used overflow:hidden, white-space:nowrap and finally to get three points I used text-overflow:ellipsis.

6. Clipping Path

Sometimes the designer gets a little more creative and now you have to make an image with a certain shape, like the triangle or something else. You can use the clip-path property for that! Let's take a quick look at how it works:

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

7. Total height and total width

If we want to adjust our application or website to fit the viewport, vh and vw units make it very easy. vh means 100% viewport height and vw means 100% viewport width. Let's see 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 be 50% of the viewport width and 50% of the viewport height. If you resize the preview window, you can see how it scales.

Legal sure?

8. Image filters

Playing with images can bring many amazing effects to your design and help create amazing results. CSS allows many filters to be used on images to help developers play around with graphics without modifying them in Photoshop. Let's take a look at the filters we can use:

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

9. CSS animations

Animations can grab a user's attention on the website which is why they are used so often in web design. Creating in CSS makes it very easy, let's take a look at an example of CSS animation:

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

10. Element rotation

Another type of animation that can be done in CSS is rotation, it's a little more dynamic and great for bringing your loader element, logo or image to life in the gallery. Let's see what we can do with rotation:

In the example, we see a cat that rotates four times during one animation cycle.

11. Mask

If you've ever done graphic design, you probably know how useful skins are. It is also possible to use image masks in CSS. Let's try to create a mask for an image:

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

12. Zoom while scrolling

When creating an image gallery, you often want to tag the floating image in some way. The great idea is to add zoom on hover to highlight the floating photo. Let's see how this works:

In the example above, I created a small image gallery and added the scale property to the hover to make the floating image larger than the others. Good?

13. Milchglas-CSS

Frosted glass has been one of the trendiest things in the world of website UI and CSS lately, but how do you build it? It's easy and now I'll show you how!

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

14. CSS carrossel solo

Remember when creating carousels required skills like jQuery or Javascript and a lot of work? Yes, but did you know that you can now build a carousel using only CSS?

It's possible, and now I'm going to show you how to do it very easily.

15. Using CSS Variables

You no longer need Sass or less to specify variables!

Now you can use this powerful feature in pure CSS, specify the color for example, and use it in multiple places without copying its hex code.

Let's see the example and you will learn how to do it.

Diploma

We want to create amazing websites and apps, but sometimes we think that it takes a lot of effort and time to create an animation or skin on the image. As I showed in this article, it is sometimes much more convenient than changing the image in a graphics program.

I hope these tips and tricks are helpful for your future programming. If you know of any cool CSS hacks, please share your favorites with me in the comments or on social media, I would really love to hear them.

If you are more advanced in frontend development, take a look at our methodshow to practice javascript

Have a good coding!

Related Reading 📖

How to Create a Business Website with Bulma CSS

Instructions for creating a Bootstrap admin template

The 6 most popular front-end interview questions and answers for beginners [PART 3]