Menu
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>
438
Here we just write the characters of a text one by one and start applying the CSS transform properties to make the whole text look curved (or shaped like an arc). However, one advantage of this method is that you can select the text and even perform copy-paste.
forEach((ea) => { ea = `<p style='height:${radius}px;position:absolute;transform:rotate(${origin}deg);transform-origin:0 100%'>${ea}</p>`; classIndex. innerHTML += ea; origin += deg; }); } circularText("this text is in a circle ", 100, 0);
1- Using Pseudo Element:Create a layer with ::before OR ::after pseudo element having width and height more than its parent. Add border-radius to create the rounded shape.
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!
143
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With