Top Best CSS tricks to shake up your web layouts

Using CSS, you can create in visual styles that go way beyond the ones you may be familiar with. Learning new CSS tricks is one of the best ways to shake up your website design. You can break old habits with new CSS properties that open a new world of possibilities.

If you've been working in the web industry for a while, you may feel you're always coding or designing the same layouts. One way to change it up is to draw inspiration from fields or areas that go beyond digital design.

Try SVG for animation

To be honest, I cannot imagine today’s web without SVG (scalable vector graphics). Its name speaks for itself – it scales, so it answers all concerns regarding responsive web design. Animating SVG with CSS is like animating any other element in HTML – it can be done with transitions, transforms and keyframe animations.

Once you’re familiar with the SVG code, the rest is straightforward and very intuitive, because you basically do it just like you would in HTML. If you have never tried dabbling in CSS animations and SVG code, you must try it now – it’s unbelievable how quickly you can achieve amazing effects.

Aside from scalability, there is another feature that should encourage you to play with SVG: the ability to manipulate SVG with CSS. The SVG graphic will be crisp no matter the screen resolution of the device it’s viewed on.

Think outside the box

Another possible value is the url() function. In this case, this enables the shape-outside property to define an element shape based on the image.

Shape-outside and shape-inside to the rescue! Let’s step out of the box, literally, and discover new forms making our page layouts richer and less boxy. Shape-outside and shape-inside properties allow you to wrap your content around custom paths in CSS.

You might choose to use the url() function instead of the polygon() when you have a particularly sophisticated graphic with many curves and points, and you want the content to wrap around it smoothly.

Don’t be afraid of clipping

The cool thing is that we can use shape functions and SVG as clip paths, which gives us a lot of opportunities – for instance, we could animate them into morphing shapes. Another great feature is CSS clipping. A shape’s boundary is called the clip-path (not to be confused with the deprecated clip property), and clipping defines which image area should be visible.

Clipping is similar to cutting out a piece of paper – anything outside the path will be hidden, while anything inside the path will be visible. It's worth mentioning that masking will consume more memory, as you're working with a full image so everything has to be done pixel by pixel.

Add a mask

Masking is particularly powerful because it enables you to apply the same properties to background images, defining their position, size and repetition. Masking tells your browser which asset elements should be visible, and is very useful for building creative shapes and layouts.

Note that unlike a typical raster image, SVG can be scaled or transformed without a significant loss of quality. Masking can be done in three ways: using a raster image (eg PNG format with transparency parts), CSS gradients or SVG elements.

Explore CSS blend modes

There are a couple of implementation methods, depending on the type of element you would like to apply the effect to. To achieve a satisfying duotone effect, it’s recommended that you use a high-contrast black and white image. You can do this by applying CSS filters to set greyscale and a high contrast level.

Using CSS blend modes is not only a great way to unify the look of the content across websites, it also enables you to set different colour versions of an image, changing only one value in CSS: the colour.

SHARE THIS