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.
Please check your email for instructions to activate your account.
Written by 21 August 2012
Using texts is mandatory on all websites, but what sets a website apart from the rest is the use of specific styles for the texts. If these styles match the theme of your website, then the beauty and attractiveness of it will increase. Below the code shows a text in three dimensions which is attractive.
<!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
@import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');
@keyframes rotation {
to {
transform: rotate(360deg) translateX(-50%) translateY(-50%);
}
}
body {
width: 100%;
height: 100vh;
color: hsl(50, 50%, 50%);
display: flex;
overflow: hidden;
font-family: 'Bangers', cursive;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
&:before
{
position: absolute;
left: 50%;
top: 50%;
transform: rotate(0) translateX(-50%) translateY(-50%);
transform-origin: 0 0;
width: 200%;
height: 200%;
background: repeating-conic-gradient(hsl(0, 50%, 40%), hsl(0, 50%, 50%) 1%);
content: '';
animation: rotation 20s infinite linear;
}
}
h1 {
position: relative;
z-index: 2;
font-size: 30px;
letter-spacing: 15px;
text-transform: uppercase;
transform: rotate(-10deg);
text-shadow: 1px 1px hsl(50, 50%, 45%), 2px 2px hsl(50, 50%, 40%), 3px 3px hsl(50, 50%, 35%), 4px 4px hsl(50, 50%, 34%), 5px 5px hsl(50, 50%, 33%), 6px 6px hsl(50, 50%, 32%), 7px 7px hsl(50, 50%, 31%), 8px 8px hsl(50, 50%, 30%), 9px 9px hsl(50, 50%, 29%), 10px 10px hsl(50, 50%, 28%), 10px 10px 30px rgba(0,0,0,.7)
}
</style>
<h1>Html Free Code!</h1>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!