It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 30 March 2021
You can use beautiful and various styles to beautify your website. Some of the most used styles are backgrounds and borders. The following code contains a specific style for the background of the page. In this code, a text is located in an elliptical border and blue curves and diagonal lines are constantly moving in the background. This code increases the attractiveness of your website and attracts more attention.
<!-- this script is provided by http://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
html {
height: 100%;
}
body {
margin: 0;
}
.background {
animation: slide 3s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg, #aaf 50%, #55f 50%);
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
bottom: 0;
left: -50%;
opacity: .5;
position: fixed;
right: -50%;
top: 0;
transition-timing-function: cubic-bezier(0.1,0.7,0.5,0.3);
z-index: -1;
}
.back1 {
transition-timing-function: cubic-bezier(0.1,0.7,0.5,0.3);
animation-direction: alternate-reverse;
animation-duration: 10s;
}
.back2 {
transition-timing-function: cubic-bezier(0.1,0.7,0.5,0.3);
animation-duration: 9s;
}
.content {
background-color: rgba(0,0,255,.8);
color: #fff;
text-shadow: 0 0 2px #000, 2px 1px 0 #ccc;
border: 8px double #fff;
border-radius: 50%;
box-shadow: 0 0 .5em rgba(0,0,0,0.9), inset 0 0 20px #fff;
box-sizing: border-box;
left: 50%;
padding: 10vmin;
position: fixed;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
}
h1 {
font-family: Courier New;
}
@keyframes slide {
0% {
transform: translateX(-25%);
}
100% {
transform: translateX(25%);
}
}
</style>
<div class="background"></div>
<div class="background back1"></div>
<div class="background back2"></div>
<div class="content">
<h1>HTML Best Codes</h1>
</div>
<a target='_blank' href='http://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!