Lower Arc effect on live type with CSS

404 Views Asked by igdaloff At 11 April 2025 at 04:17

I'm wondering if this effect (http://igdaloff.com/mission.jpg) is possible with CSS. I know you can arc entire letters, but curious if it's possible to keep the top of the word flat while arcing just the bottom. The effect in Illustrator/Photoshop is called Upper or Lower Arc.

http://igdaloff.com/mission.jpg

Any guidance is much appreciated.

Original Q&A

There are 1 best solutions below

Rayshawn On 09 October 2012 at 02:23

Not really, the only thing I can think of is putting a class on each letter like the example below, but it not the best but it works half way. There currently is no way just using css to curve text, which is strictly rectangular so you can really only work around the rectangular property of text.

<html>
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
.level1 {margin-top:0px !important; position:absolute;}
.level2 {margin-top:-2px; margin-left:10px; position:absolute;}
.level3 {margin-top:-4px; margin-left:20px; position:absolute;}
.level4 {margin-top:-3px; margin-left:30px; position:absolute;}
.level5 {margin-top:-2px; margin-left:40px; position:absolute;}
.level6 {margin-top:0px; margin-left:50px; position:absolute;}
</style>
</head>
<body>
<p><b class="level1">T</b><b class="level2">h</b><b class="level3">e</b> 
<b class="level4">e</b><b class="level5">n</b><b class="level6">d.</b></p>
 </body>
 </html>

jsFiddle Version

Lower Arc effect on live type with CSS

There are 1 best solutions below

Related Questions in CSS

Related Questions in TEXT

Related Questions in TYPOGRAPHY

Related Questions in WARP

Trending Questions

Popular # Hahtags

Popular Questions