Изогнутый текст с использованием HTML и CSS

Я знаю, что уже есть сообщение о изогнутом тексте, но я ищу что-то конкретное.Изогнутый текст с использованием HTML и CSS

На этой веб-странице (http://mrcthms.com/) Марк использует хорошую технику, чтобы нарисовать текст для своего имени, но я не могу придумать для себя, как реплицировать технику. Вот что я пытаюсь:

<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

Конечно ... span: 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

ответ

Смежные вопросы