title: Curved Text using HTML & CSS
body: <p>I know there is already a post about curved text, but I'm looking for something specific.</p>
  
  <p>On this webpage (<a href="http://mrcthms.com/" rel="noreferrer">http://mrcthms.com/</a>) Marc uses a nice technique to curve the text for his name, but I cannot work out for the life of me how to replicate the technique. Here is what I'm trying: </p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
  &lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type" x-undefined="" /&gt;
  &lt;title&gt;Curved Text&lt;/title&gt;
  &lt;style type="text/css"&gt;
  span {
      display: inline-block;
      font-family: futura-pt, 'Helvetica Neue', sans-serif;
      font-size: 2.5em;
      font-weight: 300;
      margin: 1px;
  }
  
  .arced {
      display: block;
      text-shadow: rgba(0, 0, 0, 0.298039) 8px 8px;
      text-align: center;
      margin: 20px;
      padding: 50px 0 50px;
  }
  
  div span {
      text-shadow: rgba(0, 0, 0, 0.298039) 8px 8px;
      font-family: futura-pt, 'Helvetica Neue', sans-serif;
      font-size: 2.5em;
      font-weight: 300;
  }
  
  .arced &gt; span:nth-child(1) {
      -webkit-transform:translateX(-1px) translateY(68px) rotate(-17deg);
      -webkit-transition:0s;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;span class="arced"&gt;
          &lt;span class="char1"&gt;S&lt;/span&gt;
          &lt;span class="char2"&gt;T&lt;/span&gt;
          &lt;span class="char2"&gt;E&lt;/span&gt;
          &lt;span class="char3"&gt;V&lt;/span&gt;
          &lt;span class="char4"&gt;E&lt;/span&gt;
  &lt;/span&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>