Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 19, 2021 10:34 am GMT

| PURE CSS TEXT TYPOGRAPHY EFFECT

in this post we will learn to create an amazing CSS Text typography using CSS Gradient - conic-gradient

OUTPUT IMG ABOVE

LET'S PRACTICE

first step :

create a HTML file and create a text so in this example I am going to take

 <h2> your words here </h2>

So now our html is complete :

<!DOCTYPE html><html>    <head>        <title> css typography </title>        <link rel="stylesheet" href="main.css">        <link href="http://fonts.cdnfonts.com/css/alphacentauri" rel="stylesheet">    </head>    <body>        <h2>DESKTOP</h2>    </body></html>

2nd step :

Now we need to add our main.css !make sure that you linked it with your html file

after that , go to css editor and write this 

*{    margin: 0;    padding: 0;    box-sizing: border-box;    font-family: 'AlphaCentauri', sans-serif;}html,body{    width: 100%;    height: 100%;}body{    display: flex;    align-items: center;    justify-content: center;    background-color: aliceblue; }h2{    font-size: 5rem;     background: conic-gradient(            #CA4246 16.666%,     #E16541 16.666%,     #E16541 33.333%,     #F18F43 33.333%,     #F18F43 50%,     #8B9862 50%,     #8B9862 66.666%,     #476098 66.666%,     #476098 83.333%,     #A7489B 83.333%    );    -webkit-background-clip: text;    color: transparent;    -webkit-text-fill-color:transparent  ;}

end

don't forget /* https://twitter.com/YousufCharrouf?s=09 -

*/

/* https://instagram.com/yusuf._ch?utm_medium=copy_link */


Original Link: https://dev.to/youssefcharrouf/pure-css-text-typography-effect-2pgl

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To