CSS has become more powerful with each iteration. What once could only be achieved through JavaScript is now easily accessible in CSS.
This makes beautiful transitions and transformations easier to implement and execute, while also being much easier for the browser to handle. It also gives designers better tools to create exciting layouts, much the way that AJAX standards allow for more engaging websites. Are you a designer and wants to own your own website? Make your website more exciting? Look no further. So let’s dive in and see what new features in CSS are doing to web design!
CSS Grids
Look on any website dealing with design, and this one’s going to come up. Grids have changed the ease with which portfolio sites are made and have reduced the need for math. It’s also incredibly responsive so it will work well on mobile devices.
With grids, the syntax is simple; you just apply a width in units for as many columns as you have. It’ll end up looking something like this:
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-column-gap: 1em;
}
This would give you three columns as identified by the number of width parameters input into this styling.
CSS Shapes
CSS shapes can only be used with floated elements, but they give great functionality to limit text to predetermined areas. You can effectively clip out a non-rectangular shape that your text will flow into. You can bend text around a subject in your images or other irregular shapes in your design.
Writing-mode
Writing-mode allows you to create asymmetrical typography flow. While some more popular uses might be in localization (for instance, adjusting for the direction in which Chinese script is written), you can use it to rotate your text in-line. You could use this for 90-degree rotations that might run along with selection cards or things of that nature.
Blend Mode
Blend mode is an excellent way of discovering how your images marry your design in an on-the-fly way. Blend mode has around ten different property values that can be used to blend images, much in the way that layers work in Photoshop. If you’re already familiar with Photoshop, then you should be able to pick up Blend Modes pretty easily.
You can use color, luminosity, screen, dodge, multiply, darken, etc. to blend two background images straight through the CSS document. This creates engaging, modern, and attractive visual effects that immediately enrich any webpage. There’s a lot you can do with blend mode to get interesting effects on your image, so take a gander at Google and see what you can invent!
Masking
As CSS gets more powerful, more exciting layer work is going to come into play. Again, those with Photoshop experience will have a bit clearer idea of how masking works.
CSS allows you to use two images; one as the raster and one as the reference. The colorized part of the raster image tells the browser what part of the reference is meant to be visible. You can create incredible depth right in-browser, similar to what we see here.