HTMLとCSSを使用した曲線のテキスト

曲がったテキストについての投稿は既にありますが、私は特定のものを探しています。HTMLとCSSを使用した曲線のテキスト

このWebページ（http://mrcthms.com/）では、Marcは素晴らしいテクニックを使用して自分の名前のテキストを作成していますが、私の人生の中でこのテクニックを再現する方法は決まりません。私が試していることは次のとおりです。

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" x-undefined="" /> 
<title>Curved Text</title> 
<style type="text/css"> 
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 > span:nth-child(1) { 
    -webkit-transform:translateX(-1px) translateY(68px) rotate(-17deg); 
    -webkit-transition:0s; 
} 
</style> 
</head> 

<body> 
    <span class="arced"> 
     <span class="char1">S</span> 
     <span class="char2">T</span> 
     <span class="char2">E</span> 
     <span class="char3">V</span> 
     <span class="char4">E</span> 
</span> 
</body> 

</html>

出典

2013-02-20 Fifer Sheep

彼は各文字にCSS3変換を使用しています。たとえば、彼の名前のためのHTMLは次のとおりです。

<span class="arced"> 
    <span class="char1">M</span> 
    <span class="char2">a</span> 
    <span class="char3">r</span> 
    <span class="char4">c</span> 
    ... 
</span>

そして今度は、CSSは次のとおりですので、上の

.show .hero h1 .arced > span:nth-child(1) { 
    -webkit-transform: translateX(-1px) translateY(68px) rotate(-17deg); 
     -moz-transform: translateX(-1px) translateY(68px) rotate(-17deg); 
     -ms-transform: translateX(-1px) translateY(68px) rotate(-17deg); 
     -o-transform: translateX(-1px) translateY(68px) rotate(-17deg); 
      transform: translateX(-1px) translateY(68px) rotate(-17deg); 

    -webkit-transition-delay: 0s; 
     -moz-transition-delay: 0s; 
     -o-transition-delay: 0s; 
      transition-delay: 0s; 
} 

.show .hero h1 .arced > span:nth-child(2) { 
    -webkit-transform: translateX(-3px) translateY(39px) rotate(-13deg); 
     -moz-transform: translateX(-3px) translateY(39px) rotate(-13deg); 
     -ms-transform: translateX(-3px) translateY(39px) rotate(-13deg); 
     -o-transform: translateX(-3px) translateY(39px) rotate(-13deg); 
      transform: translateX(-3px) translateY(39px) rotate(-13deg); 

    -webkit-transition-delay: .04s; 
     -moz-transition-delay: .04s; 
     -o-transition-delay: .04s; 
      transition-delay: .04s; 
}

とします。

出典

2013-02-20 21:34:49 BenM

もちろん...スパン：nth-child（1）は最初の文字のみを参照しています...私は時々馬鹿です！ありがとうございました！ –

問題はない、別の脳が常に助けて！自由に受け入れてください;） – BenM

私は、CircleType.jsというソリューションを見つけました。そのいいと簡単に円のテキストを作成する。その

<h2 id="yourStyle">MARC THOMAS.</h2> 

$('#yourStyle').circleType({radius: 800});

それとも、手動で作業する場合は、文字に長い文章を分割するlettering.jsを使用することができますと同じくらい簡単です。

いつものようにCSSまたはjqueryを使ってトランジションを追加します。お役に立てれば！

出典

2014-11-20 05:52:02 Aravind

HTMLとCSSを使用した曲線のテキスト

答えて

関連する問題