SubhanUllah Posted October 5, 2022 Report Share Posted October 5, 2022 Here is the HTML & CSS code for curved text: <!DOCTYPE html> <html lang="en"> <head> <!--Style to transform text in an arc --> <style type=text/css> /* Apply the translate and rotate transformation for our text to look curved */ .Q { transform: translate(20px, 85px) rotate(-30deg); } .u { transform: translate(13px, 55px) rotate(-25deg); } .o { transform: translate(6px, 35px) rotate(-20deg); } .r { transform: translate(3px, 23px) rotate(-15deg); } .a { transform: translate(2px, 14px) rotate(-10deg); } .A { transform: translate(1px, 8px) rotate(-5deg); } .n { transform: translate(0px, 5px) rotate(0deg); } .s { transform: translate(-1px, 8px) rotate(5deg); } .w { transform: translate(-2px, 14px) rotate(10deg); } .e { transform: translate(-3px, 25px) rotate(15deg); } .e { transform: translate(-6px, 30px) rotate(20deg); } .r1 { transform: translate(-14px, 50px) rotate(25deg); } .s1 { transform: translate(-24px, 68px) rotate(29deg); } /* An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves like a block element */ span { display: inline-block; } </style> </head> <body> <div style="text-align: center; padding-top: 250px; font-size: 55px; color: green;"> <!-- Declare all the characters of text one-by-one, inside span tags --> <span class="Q">Q</span> <span class="u">u</span> <span class="o">o</span> <span class="r">r</span> <span class="a">a</span> <span class="A">A</span> <span class="n">n</span> <span class="s">s</span> <span class="w">w</span> <span class="e">e</span> <span class="r1">r</span> <span class="s1">s</span> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.