How To Create Full Page Graphic Effects on Your Website
GIFs and Blend Modes in Action
Today’s CSS rules offer a gigantic ability to achieve eye-grabbing graphics on your website. In this article I am going to show you a ninja-level way to create cool full-page graphics effects by using some relatively simple CSS and HTML. Snippets included!
There may exists other ways to achieve similar results but this is the most straightforward way I’ve been using a long time with great success.
So let’s get started.
Case Study: Let The World Burn
I was honoured the job to creat a website for the metal group Worldburn. They didn’t have vast amounts of content so a single page show-off was selected as the implementation.
As you can see, the site uses the methods covered in this article to achieve a very cool full-page effect. The styles combine to animated GIF pictures to create an illusion of smoke and some sort of curtains, or call them what ever you like.
There is slight optimization going on to disable the effect partially when the site is scrolled to another section. It’s wise always to remember test the results with a slower computer also, and apply optimizations such as this to get better overall user experience.
Visit the site at worldburn.rocks.
The background-blend-mode property is nowadays supported by all major browsers. It offers you the power to define the blending mode used for each background layer. A single layer can be an image or just plain color.
CSS: background-blend-mode
There are up to 10 different blend modes you can apply: normal (default), multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, and luminosity.
In the example case I made a use of the color-dodge and multiply blend modes. They are a bit hard to describe so I’ll let you play and test all of them in your own project. It’s surprisingly enjoyable!
Let’s Get Down To Work!
The CSS
The easiest way to apply blended background is to just specify the CSS for blend mode in the same rule as your background is defined.
div.section {
background: url(worldburn-basement.jpg), url(animation.gif);
background-size: cover, cover;
background-blend-mode: multiply;
background-position-y: center, center;
background-position-x: center, center;
background-repeat: no-repeat;
padding: 0;
width: 100%;
}
With this CSS code the section div will now have a image and an multiply-transparent animation running on top of it. To make the graphics work full-page we set width to 100% and the background-size to cover. In order to centerize the graphics on windows of different sizes we set the background-position.
The HTML
In HTML nothing specific is required.
<div class="section">
<p>Cool, isn't it?</p>
</div>
Create an Overlay Div
The example case also used an overlay div to create an illusion of smoke all over the place. It is an absolutely positioned div that will cover the window no matter how much it is scrolled.
.smoke-overlay {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
background: url(smoke.gif);
background-size: cover;
background-blend-mode: color-dodge;
background-position-y: center;
background-position-x: center;
background-repeat: no-repeat;
pointer-events: none;
opacity: 0.1666;
z-index: 555;
overflow: hidden;
}
Yet again we se the background image with size cover. In this case the blend mode color-dodge was the most appropriate to create the effect.
Since this is an overlay div clicks are ignored and passed on by setting pointer-events to none. Z-index must be set so it is the top-most element on your page. We don’t want any scroll bars appearing so overflow is set to hidden.
I’m sure this simple example gives you to idea how to apply this method on your own site.
Compatibility & User Experience
Widely Supported Features
As depicted earlier the technical aspects of this method are supported by wide range of modern browsers. On mobile devices, however, the support is not guaranteed. Microsoft Internet Explorer was one of the latest big player to incorporate background-blend-mode to its application.
You can check the current status of support of CSS properties in caniuse.com.
Create Light-Weight Alternative For Mobile Devices
If you use large animations to cover your site, it is wise to create a specific rule for mobile devices and leave mobile users without the graphics and possible lag it causes. In small windows the effect is not even as cool as when vieved on a desktop computer.
Here is an example snippet of a media query to remove the full background effect on small devices.
@media screen and (max-width: 900px) {
.section {
background: url(worldburn-basement.jpg), url(still-picture.gif);
background-size: cover, cover;
background-blend-mode: multiply;
}
}
Full HTML Page Effect On Steroids
Static images work for sure, as most of the websites today are quite static. But if you like to create something really outstanding, as I already mentioned, animated GIF pictures combined with blending are a crafty way to create some cool effects.
Animations with transparency are fine but you can also achieve partial transparency by using the correct blend mode.
Of course you can design the graphics by yourself but better results may be achieved by using ready-made pics. One holy grail of animated GIF pics is Giphy.com. Just enter a keyword and an abundance of different GIFs is shoved under your nose!
Click the pic you like, select Media, copy the URL of Source, paste it into a new tab, right-click the picture and select Show image. This opens the original GIF to your browser from where you can save it to your computer as a file.
It’s Nice to Ask a Permission
When using assets created by a third person, it’s always up to you to ask the permission from the original author, which is more often easier said than done if you can’t find contact details. However, in case of effects like this, the usage of original work is not always obvious due to blending effect itself.
Stack Them Up
You don’t have to stick with just a single GIF. You can stack them on top of each other as much as you like.
background: url(worldburn-basement.jpg), url(animation.gif), url(even-more-pics.gif);
However, this may rapidly cause performance issues if over-done. Always keep the speed and user experience on your mind, kids!
Put It Into Practice
Nowadays CSS serves a fine dish of mind-blowing options to enhance and build the website that makes fellow developers pass out on pure envy.
As always when using ninja-level techniques like this, consider the browser support and performance requirements, and build alternative solutions for mobile devices and other special cases.
I hope this article demonstrated you a new way to create astonishing web designg with relative simple and easy CSS and HTML code. Now it’s your turn, put this lesson into action!
Cheers!
