Moki-Moki Market

Blog Emojis Fonts Graphics Plugins Textures Themes
Ooze

How To Create Full Page Graphic Effects on Your Website

Homepage Of Metal Band WorldBurn

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!

Welcome to ninja-level lesson on GIFs and CSS Blend Modes. It’s simple.

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.

The single-page site I built for metal group Worldburn. Click to view full-page graphics in motion.

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.

CSS: background-blend-mode

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.

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.

The numbers in the table specify the first browser version that fully supports the property.

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!

Selecting source GIF from Giphy
In search of Nirvana! Selecting the source GIF to download.

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!


Tag Cloud


Hot Picks

Loading...

Kawaii Emoticon Clipart

Her Kawaii Emoticon Clipart is a pack of 12 transparent PNG images resembling a cute emoticon character. You can edit and use these …

Loading...

Responsive Pro Theme

CyberChimps tell you that with their theme you can setup a responsive website faster and easier than ever before. Sounds like an advertisement! Let’s see.

Loading...

Private Message

When you want to enable communcation between your WordPress site users, or just make it possible for the users to contact admin, Private Message is the tool number one for robust messaging.

Loading...

Big Emoticon Set

Emoticons in warm colors, each resembling a rounded rectangle. Here you can find emoticon to every situation!

Loading...

Avocado Emojis

Fresh Greetings From Canada Canadian designer Janette Lodermeier loves to create cute and colorful characters. This time she has to offer some fresh and impressive emojis in the form of […]

Loading...

Type Writer Font Machina G

Us this font when you want to have your text look like it was written by some early ninetees FBI agent in a room with dim light and cigarette smoke.


↑ Back to Top