Zakrzywiony tekst za pomocą HTML i CSS

Wiem, że istnieje już wpis o zakrzywionym tekście, ale szukam czegoś konkretnego.Zakrzywiony tekst za pomocą HTML i CSS

Na tej stronie internetowej (http://mrcthms.com/) Marc posługuje się niezłą techniką, aby wygiąć tekst pod swoim imieniem, ale nie potrafię opracować dla mnie sposobu replikacji techniki. Oto, co próbuję:

<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>

Źródło

2013-02-20 Fifer Sheep

Używa transformacji CSS3 na każdej literze. Na przykład, HTML dla jego imię brzmi następująco:

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

A z kolei, CSS jest następująco:

.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; 
}

i tak dalej.

Źródło

2013-02-20 21:34:49 BenM

Oczywiście ... span: nth-child (1) odnosi się tylko do pierwszej postaci ... Czasami jestem idiotą! Dziękuję Ci! –

Nie ma problemu, inny mózg zawsze pomaga! Nie wahaj się zaakceptować;) – BenM

Natknąłem się na rozwiązanie o nazwie: CircleType.js. Jest ładne i łatwe do utworzenia tekstu kołowego. Właśnie tak proste

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

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

Albo można użyć lettering.js do dzielenia długich zdań na listach, jeśli wolisz pracować ręcznie.

Dodaj swoje przejścia za pomocą CSS lub jquery, jak zwykle. Mam nadzieję że to pomoże!

Źródło

2014-11-20 05:52:02 Aravind

Zakrzywiony tekst za pomocą HTML i CSS

Odpowiedz

Powiązane problemy