CODEWITHSUNDEEP
htmlcss
Fifer Sheep
Fifer Sheep

Reputation: 2990

Curved Text using HTML & CSS

I know there is already a post about curved text, but I'm looking for something specific.

On this webpage (http://mrcthms.com/) 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: 

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

Upvotes: 18

Views: 74192

Answers (2)

Aravind
Aravind

Reputation: 609

I came across this solution called: CircleType.js. It provides a short and simpler way to create circular texts.

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

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

Or you can use lettering.js which is quite flexible.

Add your transitions using CSS/jQuery on top of that. Hope this helps!

Upvotes: 20

BenM
BenM

Reputation: 53228

He uses CSS3 transforms on each letter. For example, the HTML for his name is as follows:

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

And in turn, the CSS is as follows:

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

And so on.

Upvotes: 15

Related Questions