How to create a color changing background|HTML & CSS|
Creating a color changing background using html & css
 |
| Html css |
Hello guys.I have been here today with another dynamic article about creating a color changing UI background .Trust me it's really simple by following this tutorial.
Here these are the steps to get the correct result .plz follow the steps one by one
Step 1- first of all write the basic code of html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
We don't need to do any work .we are changing the background color of the body .so we don't code any more but I m writing the h1 tag beacause iam giving a heading
<section>
<h1>MR.UNOFFICIAL</h1>
</section>
Now I'm writing the code on basis of considering the section tag in html iam writing the code as belowIn the section I'm going to write the height and width of background and background color and positionEtc...
section {
height: 100vh;
width: 100%;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73c7E, #23A6D5, #e02019);
background-size: 400% 400%;
position: relative;
}
animation: change 40s ease-in-out infinite; Step 4- Here. I have designed the heading tag h1 to my wish .You can also design it accord to your desired thoughts.
The code for designing h1 is here .Here iam including font size, letter spacing, margin,padding ,and text transform properties beacause to make the h1 tag more beautiful.
And iam also including a border to that and editing it to be curved at the ends of top left and bottom right.
h1 {
font-size: 4rem;
text-transform: uppercase;
letter-spacing: 2px;
border: 2px solid #fff;
border-bottom-right-radius: 40px;
border-top-left-radius: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 5rem;
}
Here we are doing is to animate the background to change its color infinitely with respective to time.
So for that we are using @keyframes property and in that we are including background-position at 3phases at 0% and 50% and 100%.
@keyframes change {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
The out put will be looks like this ,provided below .
Plz follow the tutorial step by step to get correct result.
Thats for today .signing off and see you all in the next post .
yours dinesh
No comments: