SubhanUllah Posted October 5, 2022 Report 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
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.