News

Create CSS3 badges with Arctext.js

CSS3 makes it possible to achieve a lot of effects that previously would have required an image editor

arctext

One of the most gratifying aspects of CSS3 and the advent of jQuery, is the manner in which it has unleashed the web designer’s creativity to come up with novel approaches and solutions to design problems. CSS3 alone isn’t enough to transform the web as we experience it today, but when boundaries are pushed and new ideas are developed, the result can become mainstream with large-scale adoption (as with CSS-only image galleries for example).

In this tutorial we’re creating a badge using CSS and a jQuery plug-in to wrap the words along a curved path. This isn’t going to become a common technique in itself by any means, but the concepts may get you thinking of fresh ideas and solutions to user interface challenges, developing approaches that could become mainstream tomorrow!

DOWNLOAD TUTORIAL FILES

Create the HTML

Our final badge is going to incorporate CSS, jQuery and some Photoshop work. First we need some simple HTML elements to work with, so start off by creating a badge container <div>, and within it place a separate <div> for the badge top and the badge bottom, with a final <div> for the centre of the badge. You can find our starting HTML on the resource disc.

001    <body>
 002        <div id=”container”>
 003            <header>
 004                <h1 id=”headline”>Arctext.js</h1>
 005                <h2>Curving text with CSS3 &amp; jQuery</h2>
 006            </header>
 007            <section class=”sub” id=”sub2”>
 008                <div id=”badge”>
 009                    <h3 id=”badgetop”>Experience•the
 •power</h3>
 010                    <h3 id=”badgebottom”>Of • curved • CSS3 • text</h3>
 011                    <div id=”badgeinner”>POLICE</div>
 012                </div>
 013                <div class=”clr”></div>
 014            </section>
 015            <div class=”clr”></div>
 016        </div>
 017    </body>

Download Arctext


To achieve simple text along a path, we’re using the Arctext plug-in for jQuery. This works by splitting words in to individual letters and rotating each about a central point, allowing the word to appear to curved around that point. Download the plug-in from tympanus.net/Development/Arctext.

Make the badge

We’ll need some basic styles for our page – to help define how the badge will look (although this is also handled by the script for the curve of the text), as well as the design around the badge. The first thing to do, however, is create your badge graphics, so open Photoshop and create a document that’s 400px square.

Circular selections

Fill your canvas with a dark blue colour (we used #1A1A33 but you can find a shade you prefer if you wish), and apply the noise filter by choosing Filters>Noise>Add Noise. This will form the basis of the background to the badge, but we need to create the outer ring of the badge, leaving space for the text to slot in. Use the marquee tool to create a circular selection that fills the canvas as close as you can get to the edge.

Layer Styles

With your selection active, create a new layer and fill the selection with any colour. Set the fill value of this layer to 0% in the layers panel, then add a stroke layer style by choosing Layer>Layer Styles>Stroke. Set the stroke to be 1px, inside, and white.

Add stars

Repeat the process to create a smaller ring inside the first, and then use the shape tool to draw a star in a gold colour. Position the star so that it will appear between the two text phrases. Duplicate it and position the copy on the other side of the canvas.

The inner badge

Now repeat the same process as in the previous steps, this time creating the inner section of the badge. The document should be 260px square instead of 400px, and you can add some ornamentation to suit your own design – we added a gloss effect and a large central star.

Create basic styles

Now that we’ve got our graphics ready, it’s time to create the basic CSS styles that will position them accordingly. Start with the overall badge by setting it to be 400px in width and height. Add a border-radius value of 200px to force it into a circular shape, and apply the main badge graphic as a background.

001    #badge {
 002        position:        relative;
 003        width:            400px;
 004 height: 400px;
 005 background: #1a1a66 url(badgebg.jpg) 
 no-repeat top left;
 006 border-radius: 200px;
 007 color: #fff;
 008 text-align: center;
 009 }

Create the inner badge

Using a similar approach, position and set the inner badge area using a width and height of 260px and a border-radius of half that – 130px – to achieve a circular object. Apply the badge centre graphic as a background, and use absolute positioning with margins to ensure the centre appears in the exact middle of the main badge.

001 #badgeinner {
 002 position: absolute;
 003 top: 50%;
 004 left: 50%;
 005 margin-left: -130px;
 006 margin-top: -130px;
 007 background: #1a1a33 url(badgeinner.jpg)
 no-repeat center center;
 008 border-radius: 130px;
 009 width: 260px;
 010 height: 260px;
 011 }

Get jQuery ready

We’re ready to try curving our text! Start off by downloading and including the jQuery library and the Arctext plug-in in the section of your page, then create a set of < script> tags and the standard $(document).ready() function ready for our calls to the Arctext plug-in methods. Note that jQuery 1.9 and above no longer supports IE versions older than v9.

Make it curve!

Arctext works by calling the Arctext method on a jQuery selection, and passing in a radius you’d like to curve around. Additionally, you can specify the type of curve you’d like to apply: 1 for a curve up, and -1 for a curve down. Add the code shown to curve the top and bottom badge text.

001 < script type=”text/JavaScript” 
 src=”scripts/jquery.js”>< /script>
 002 < script type=”text/JavaScript” 
 src=”scripts/jquery.Arctext.js”>< /script>
 003 < script type=”text/JavaScript”>
 004
 005 $(document).ready(function(){
 006 $(“#badgetop”).Arctext({radius: 170, dir: 1});
 007 $(“#badgebottom”).Arctext({radius: 
 170, dir: -1});
 008 });
 009 < /script>

Position with CSS

If you test your page you’ll notice that the curves don’t line up with the badge very well. That’s no problem though, we can fix this using CSS to position the top and bottom text independently of each other. Add the code shown below to your stylesheet to put this in place, and then run a test again to see the text in the correct place on your badge.

001 #badgetop {
 002 width: 440px;
 003 position: absolute;
 004 top: -10px;
 005 left: -20px;
 006 text-align: center;
 007 color: #dec705;
 008 }
 009 
 010 #badgebottom {
 011 width: 440px;
 012 position: absolute;
 013 bottom: -10px;
 014 left: -20px;
 015 text-align: center;
 016 color: #c4a704;
 017 }

Animated centre

We can also apply animations using Arctext. Start by applying the same call to Arctext as in the previous step, then use the set method to add an animation to the text. We’ll do this to the centre of our badge by adding the code shown below immediately beneath our existing calls to the Arctext() method.

001 $(“#badgeinner”).Arctext({radius:-1,dir:1});
 002 $(“#badgeinner”).Arctext(‘set’,{
 003 radius: 200,
 004 dir: 1,
 005 animation: {
 006 speed: 5000
 007 }
 008 });

Grab a web font

Our text is looking good, but it would look better if we used a more appropriate font to suit our subject matter. We can grab a suitable font from the Google Web Fonts service – www.google.com/webfonts. Choose one you like the look of and follow the instructions to install it on your page.

Animate the badge

Although we’ve already got an animation, it would be nice to make more of the curved text. We’ll create a CSS animation and apply it to our badge to maximize the effect! Start by adding the code shown to create two different animations (our code is shown for WebKit browsers, but you can also create Mozilla, IE and Opera versions to suit).

001 @-webkit-keyframes rotatecw {
 002 0% {
 003 -webkit-transform: rotate(0deg);
 004 }
 005 100% {
 006 -webkit-transform: rotate(359deg);
 007 }
 008 }
 009 
 010 @-webkit-keyframes rotateccw {
 011 0% {
 012 -webkit-transform: rotate(0deg);
 013 }
 014 100% {
 015 -webkit-transform: rotate(-359deg);
 016 }
 017 }

Apply the animation

Now we’ve got the animations set up, we can apply them to our badge with a simple line of CSS. We’ve added a rotation to the badge overall, and then the second animation to the inner badge. The two rotate in opposite directions to give the impression that only the outer ring of the badge is animated.

001 #badge {
 002 font-size: 1.5em;
 003 position: relative;
 004 width: 360px;
 005 height: 360px;
 006 padding: 20px;
 007 background: #1a1a66 url(badgebg.jpg) 
 no-repeat top left;
 008 border-radius: 200px;
 009 color: #fff;
 010 text-align: center;
 011 margin: 50px;
 012 border: 4px solid #1a1a33;
 013 box-shadow: 0px 0px 10px #000;
 014 text-transform: uppercase;
 015 -webkit-animation:rotatecw 10s linear;
 016 }
 017 
 018 #badgeinner {
 019 position: absolute;
 020 top: 50%;
 021 left: 50%;
 022 margin-left: -130px;
 023 margin-top: -130px;
 024 background: #1a1a33 url(badgeinner.jpg) 
 no-repeat center center;
 025 box-shadow: 0px 0px 10px #000;
 026 border-radius: 130px;
 027 width: 260px;
 028 height: 260px;
 029 line-height: 120px;
 030 font-size: 2em;
 031 -webkit-animation:rotateccw 10s linear;
 032 text-shadow: 0px 0px 10px #000;
 033 }

Add a final polish

We can complete our design by creating a page background in Photoshop and adding some additional styling to our text to make it appear all upper-case. Add the final styles shown, and then test in your browser to make sure the completed design works as it should. Tweak animation timings to suit your own preferences.

001 h1, h2 {
 002 text-align: center;
 003 text-transform: uppercase;
 004 font-weight: normal; 
 005 margin: 0;
 006 padding: 0;
 007 }
 008 
 009 h1 {
 010 font-size: 4.5em;
 011 color: #f4d006;
 012 text-shadow: 0px 0px 10px #000;
 013 }
 014 
 015 
 016 #container {
 017 position: relative;
 018 width: 500px;
 019 margin: auto;
 020 font-size: 1.4em;
 021 }
 022 
 023 #badge h3 {
 024 font-weight: normal;
 025 }
×