Design tips
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!
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?
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?
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?