Our rendering engines are a lot more sophisticated then they have ever been, below I’ll go through a number of CSS techniques which you should at least know of even if you won’t necessarily use them. These will speed up rendering, loading, or lower the page bandwidth and most importantly improve the user experience.
The techniques are some I believe will be used a lot in the future, stopping annoying GIF files being created and saved, and the inability to have these with transparent backgrounds in a majority of cases. Blending multiple images together using CSS and also creating graphics using CSS directly. With the deterioration of flash, CSS animations make a website more dynamic and catching the eye of the reader.
This is an overview on these techniques and I have linked to great examples already available on the web, there’s no point recreating the wheel!
So lets get down to it:
Css Blending
Css Blending is a feature that can support two images in the same space; having them blended together in different ways, this can create some great image effects which were only previously available when editing an image in Photoshop or the like.
It’s supported fully in the following browsers.
| Property | Chrome | Edge | IE | Mozilla | Safari | Opera |
|---|---|---|---|---|---|---|
| background-blend-mode | 35.0 | Not supported | Not supported | 30.0 | 7.1 | 22.0 |
Uses the following syntax :
background-blend-mode: overlay;
and options.
- normal (default)
- multiply
- screen
- overlay
- darken
- lighten
- color-dodge
- saturation
- color
- luminosity;
In practice:
I’ve made a quick Pen showing this in action with one of my wallpapers, simply hover on the image and watch it in action! You can view the CSS declarations in the tabs to see how the effect was accomplished
The following articles should give you more of an insight into the world of CSS Blending, so if you want to add a bit of jazz to a web project in the future, without having to alter images to get it just right give this a shot!
Sources
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-blend-mode&preval=multiply
https://css-tricks.com/basics-css-blend-modes/
http://alistapart.com/article/blending-modes-demystified
http://www.webdesignerdepot.com/2014/07/15-css-blend-modes-that-will-supercharge-your-images/
Css Spinners
Everyone know what spinners are used for, and usually GIFs are used (If not here are a few of my favourites!!)
However being able to create the same effect using simply CSS saves the browser from having to request yet another image during the page load. The website listed below is fairly explanatory so have a look and give it a try on your next project. You also have the benefit of being able to change colours on the fly, and the ability to put the spinner on any background colour without having to re-create the GIF accordingly.
Yes not all GIFs can be recreated in CSS format, but if page speed is a priority then implementing a CSS spinner makes a lot of sense.
Sources
http://tobiasahlin.com/spinkit/
CSS Shapes
A great tutorial showing the benefits of using CSS Shapes in web design.
— No more boring rectangles!! —
The following image shows what can be possible using CSS Shapes, and if it’s something that gets your heart racing then click through to read the full article, it’s full of great examples, and information to get you started.
Sources
http://alistapart.com/article/css-shapes-101
CSS Transitions
CSS transitions are really useful for making content stand out when being hovered over, no longer do we simply change the colour of something. Now we can transition that colour using different timing functions, alter the position of the element or add a shadow.
You can also use transitions to display content once a user has arrived at a section of the page, increasing the dynamism of the page and increasing the user experience, guiding the eye to the content we want them to look at.
This is something I’m actually using the Codepen above. See lines:
-webkit-transition: width 2s, height 2s, background-color 8s, -webkit-transform 2;
and
transition: background-color 8s;
Sources
http://css3.bradshawenterprises.com/transitions/
Progressive Image Loading
You may have been browsing websites recently and seen interesting loading effects when rendering images during the loading of a page, a blurry image is first shown before the full size image has finished loading. This helps the page load faster and keeps the page dimensions the same, stopping that annoying CSS movement once all elements have successfully loaded.
It’s a clever technique as the image is actually lazy loaded to the page.
This technique is something that would not have been possible even a few years ago, and I expect more sites and designers start using this method to give especially mobile users a better experience when browsing the web.
This article below gives a great intro into its benefits and drawbacks so if you’re trying to give your user the best possible experience then this is worth a look.
Here’s the Codepen example from the article below by @jmperez:
Sources
https://jmperezperez.com/medium-image-progressive-loading-placeholder/
Hope you guys enjoyed these examples on CSS Techniques, and hopefully got you digging deeper into the examples which can help you the most.
Leave any comments below of any other techniques which we should look at further.