1

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.

igdaloff
  • 43
  • 1
  • 5

1 Answers1

0

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

Rayshawn
  • 2,603
  • 3
  • 27
  • 46
  • Thanks for giving it a shot @Self_Taught_Programmer. Not quite the effect I was looking for. Looks like this isn't doable at the moment. – igdaloff Nov 05 '12 at 01:17