In this two-part tutorial, I will be showing you how to create a number of different web background effects all the way from design to implementation. In Part 1, we created 4 backgrounds using Adobe Photoshop and Illustrator. In this part, we’ll look at a number of cool ways we can enhance them on implementation for the web.
In Part 1, we created the following backgrounds:
- Semi-Clear Blurred Background
- Fully Blurred Background
- Pixelated Background
- Vector Background
Basic Setup
The background setup is pretty simple. The best way is to simply apply a class to the <body> and use CSS to apply the background, like so:body.background{ background: url(Background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
In the demo’s I then just added an simple overlay effect on top of the background. Simply create a div inside the body.#overlay-effect { opacity: 0.2; background-color: #364549; background-image: -webkit-linear-gradient(30deg, #364549, transparent 5px, #fff); background-image: -moz-linear-gradient(30deg, #364549, transparent 5px, #fff); background-image: linear-gradient(30deg, #364549, transparent 1px, #fff); background-size: 20px 20px; position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; }
The overlay effects use the same logic. Let’s run through it. First we set the opacity low, so you can see the background below. Then we create a background-color, in this case, dark blue. Then we create CSS linear-gradient going
from the same dark blue to transparent, and set the gradient spread to
5px. Finally we set the background size to 20px. The gradient then
repeats and creates a pixelated effect over the background.
Try experimenting with different values. Once you get the hang of using CSS graidents, you can create some interesting effects. To get you going I’ve made a number of different effects for each background. Take a look in the demo below.
0 comments:
Post a Comment