Design tips

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.

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.

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?

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.

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.

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.

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.

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?

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.

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.