This is a simple demo of how to create a multicoloured website background and add highlights to objects (in this case a button) using box-shadow property and animation.
I wanted to learn how to make the site's background more creative. Instead of using one same palette for the site how can I add 2 or more different colours and blend them. After doing some research box-shadow seemed like an easy way to achieve that.
What is box-shadow ? It is used to add a shadowy effect to an object, by setting the 4 basic values of this property which are x-offset, y-offset, blur and spread we can control the display of the shadow. I found https://www.w3schools.com/cssref/css3_pr_box-shadow.php to be super helpful in explaining the works of it.
Next I wanted to use box-shadow to add some highlights to the button, and create a blinking effect by setting the animation-duration to 3s, animation-iteration-count to infinite, but you can just use the animation property alone and set it to the appropriate values. Lastly completing it all with the @keyframes rule.
Top comments (0)