Quick Menu


Color Changing Elements

A Snippet By Dylan

Snippet Tutorial

Note:
This snippet is written as a tutorial. The tutorial is made for begginers and explains everything. If you just want the code, skip to the end.

Color Changing Elements

Having a color changing element can make it stand out from the rest and wow users, its simple to do and is clean and re-useable.

To start

We want to make the background of any div in css change color, so lets start by creating a html file and putting style tags in:

				
<html>
	<head>	
		<style>	
		// we will put our code here
		</style>
	</head>

	<body>

	</body>
</html>
				

Now we want to start to get into the css, to start lets target the body, in between the style tags,

					
body{


}
					
					

Now for the fun bit - the color changing:

					
body{
height: 250px;
width: 250px;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
					
					
The code explained:

Now we actually need to make the animation that makes our background move - its pretty simple just pop this into your css file:

				
	@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
				
				

I hope you managed to get this working! If you have any feedback, please Contact me!

The finished product:

Color Changing is cool!

:)