Beautiful text two

Written by @kerixa 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.

Code Snippet:

                                                
                                                <!-- 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>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Ali7hry, alexnicola, Adam20, Prashanthcs11, Designer Diva
advertisement 2