paint-brush
Creating CSS3 Animated Backgrounds From Scratch by@alexoid
256 reads

Creating CSS3 Animated Backgrounds From Scratch

by Alexoid
Alexoid HackerNoon profile picture

Alexoid

@alexoid

August 24th, 2020
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

CSS filter property provides access to effects like blur or color shifting on an element’s rendering before the element display. Filters can be used to adjust the rendering of an image, a background, or a border. The filter property is used on images, backgrounds or in a complete web page. There are a bunch of CSS filters properties it really depends on how we want to use them to create some interesting effects. There is tons of thing that you can do with filter and keyframes.

Company Mentioned

Mention Thumbnail
BUNCH
featured image - Creating CSS3 Animated Backgrounds From Scratch
1x
Read by Dr. One voice-avatar

Listen to this story

Alexoid HackerNoon profile picture
Alexoid

Alexoid

@alexoid

Use CSS Filter and Keyframes to Create Awesome Effects

One CSS property not commonly used is the filter property, CSS Filters are a powerful tool. Authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser). The CSS filter property provides access to effects like blur or color shifting on an element’s rendering before the element display. The filters are used to adjust the rendering of an image, a background, or a border.

image

There are a bunch of CSS filters properties it really depends on how we want to use them to create some interesting effects. It is used on images, backgrounds or in a complete web page, this is some properties of the filters:

  • blur(px) 
  • brightness(%)
  • contrast(%)
  • drop-shadow()
  • grayscale(%)
  • hue-rotate(deg)
  • invert(%)
  • opacity(%)
  • saturate(%)
  • sepia(%)

How to Use Filters

To use a filter you just have to set the value, the property of the filter, and yeah, It’s done, the images now have a filter.

image
image
image
image

Using More Than One Property At The Same Time

Also, another awesome feature of the filter is that we can use more than one property at the same time.

Setting many properties for being used:

image

Using filter and keyframes

Filters can be used with keyframes to get a whole bunch of awesome effects. This is commonly used in sponsoring advertising that is on every place on the internet. Commonly use brightness color to get the attention of the users also is used in games, etc.

To give a better explanation of how to use it I’m going show how to get some animated background with filters.

Sponsored Animated Filter

In the sponsored advertising shown use brightness color and loop animation with a few seconds of duration. The trigger of the animation can be a hover or click event or by the way just set the animation as property on the image or in the container.

image

The first to set here is a very short animation-duration less than 0.5. Seconds also an animation-iteration-count: infinite to make the animation a loop.

image

The filter used in this case is the invert filter that allows changing the color of the element to their opposite color (negative). 

Setting the values at the start of the animation invert(0%) and at the half of the animation set invert value to their maximum value invert(100%).

Explosion Animated filter

image

Here the trigger of the animation is a click event and in this case animation-duration:8s. The animation starts with an explosion of saturation and brightness. The brightness set at its maximum brightness( 200%) and saturation of twenty times of the original image saturate(20). At 25% of the animation the brightness return to original image value that is brightness(100%), the saturation also decreases at a value saturate(5). At the end of the animation, the saturation return at its original value of the image saturate(1).

image

Thunder Animated filter

image

This time take animation-duration:9s the animation starts with two flashing lights like a clap of thunder. The way to get this effect it to set at the start of the animation the brightness at its maximum brightness( 200%) and also is set an opacity(0.2)

Close to 0 because when the opacity is close to 0 the element turn totally white. So it's used to make brightness more blinder and without losing its fluidness. Then the filters return to the original state brightness( 100%), opacity(1). Now just have to repeat the same filter twice using the same filters, to finish the ending have a fluid blur filter.

image

Now you can create an animated background go and try it by your own. now just need a nice background and a few creativity.

Also, you can add sound to improve your animation, and use SVG images, set more effect on different containers. There is tons of thing that you can do with filter and keyframes. if like diving straight into practicing what you have learned so far? go ahead and try to make more complex animation. 

If you got here thanks and Happy Coding.

L O A D I N G
. . . comments & more!

About Author

Alexoid HackerNoon profile picture
Alexoid@alexoid

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Coffee-web
Netlify
Hashnode
Learnrepo

Mentioned in this story

companies