3 shiny new CSS properties for you to try today

[Rss Bot 1]

CSS is one of the most important tools of any web designer. It adds the design styling to pages, but it has become far more important than that. Having the ability to add animations to pages and provide feedback on interactions is central to creating a compelling user experience. 

CSS now performs many tasks that previously needed JavaScript, such as off-screen menus, drop-downs, lightboxes, accordians and parallax scrolling. This makes your site more performant. Read on for three cutting-edge properties you can start investigating today.

Want to explore further? Have a go at recreating these cool CSS animation examples, or try these 10 amazing new CSS techniques. 

• 19 great parallax scrolling websites

01. Design for display cutouts

Phones increasingly have notches that cut into the screen space

The advent of phones with 'cutout' sections or 'notches' on the display has meant that web designers have to think about how to design for those pages. Currently, web browsers on these devices add an extra margin to accommodate these cutouts. Web designers often like to use the full screen, and now there is a way to do that, with Chrome leading the way. 

Add this meta tag to the document: 

Then use the CSS safe environment variables to lay out your content: 

Now you just have to test your design in landscape and portrait on the device. Read more about designing for display cutouts here, or watch the video below.

02. CSS clip path

The CSS clip path is one of those properties that has really helped push visual effects. Originally this was CSS clip and is used to clip out part of the element. There are a number of ways to use this, including inset, which would inset the element by however many pixels on each side: 

There is also polygon, which would enable multiple points to be added so some more obscure shapes can be made. Circle and ellipse are fairly straightforward, but it’s also possible to reference a path from an SVG image:

03. CSS conic gradients

You can do things with conical gradients that aren't possible with radial gradients

The conic gradient is very similar to a radial gradient. However, you can’t create a colour wheel in radial gradient, whereas you can with a conical gradient. Where radial gradients radiate between points, the conical moves around a circle and blends between colours. 

At first you may think this isn’t really anything special, but with a little creativity to add stops in the right places, there are some great results that can be achieved. At present this can only be achieved using a polyfill. Check out this guide by Lea Verou.

This article was originally published in creative web design magazine Web Designer. Buy issue 282 or subscribe.

Read more:

• Get started with CSS art
• Create cool UI animations with CSS
• How to create glitch text and image effects in CSS

View the full article