USE CSS SHAPES TO CRE­ATE STRIK­ING EF­FECTS

Daniel Crisp ex­plains how to use the clip-path prop­erty to cre­ate some text ef­fects that will leave vis­i­tors to your site might­ily im­pressed

net magazine - - UX THEORY - netm.ag/298-daniel­crisp.

As front-end de­vel­op­ers, we tend to think in rec­tan­gles. Rec­tan­gles in­side rec­tan­gles in­side rec­tan­gles in­side rec­tan­gles. We might em­ploy tricks with borders to make cir­cles or tri­an­gles, but re­ally they’re still just rec­tan­gu­lar boxes in dis­guise. Well this is about to change with CSS Shapes, a W3C Can­di­date Rec­om­men­da­tion, which will change the way you think.

CSS Shapes al­low you to cre­ate geo­met­ric shapes us­ing shape func­tions: cir­cle(), el­lip­sis(), inset() and poly­gon(), and ap­ply them to el­e­ments or ef­fects such as clip­ping and fil­ters. What’s more, the shapes can af­fect the flow of the con­tent, al­low­ing you to wrap text neatly around fea­tures like cir­cu­lar avatars. Per­haps the most pow­er­ful shape func­tion is poly­gon() as it lets you cre­ate com­plex ar­bi­trary shapes us­ing un­lim­ited points de­fined us­ing co­or­di­nate pairs. If you’ve used SVG, this will be fa­mil­iar to you.

In this tu­to­rial, we’ll be util­is­ing poly­gons with the clip-path prop­erty to cut a geo­met­ric shape out of our text so that only the area en­closed within the poly­gon is vis­i­ble. We’ll also add some sim­ple tran­si­tions to bring the ef­fect to life.

Time for some code

You can grab the code for each step in this repo from here: http://netm.ag/298-demo

St ep 1

First, let’s get our HTML ready. We just need a <div>, our .clip class and our text, but as we’ll be us­ing pseudo-el­e­ments for this ef­fect, we’ll also add an at­tribute with the same value as the text so we can read it into the CSS rather than hard-cod­ing it. <div class=”clip” data-con­tent=”A clip­ping demo”> A clip­ping demo </div> Next, we want to make it fill the screen and align the text dead cen­tre – we can use some Flexbox magic for this. Let’s also style and size the text.

Step 2

Now we can style the ::be­fore and ::after pseu­doele­ments, with each be­com­ing a layer on top of the text. By de­fault, ::after will have the high­est z-in­dex. The handy attr() se­lec­tor will read the value of our

data-con­tent at­tribute. The pseudo-el­e­ments will share the po­si­tion and Flexbox prop­er­ties, so we can refac­tor our CSS slightly and lever­age the power of SCSS to keep our stylesheet tidy. The font styling will be in­her­ited. We’re us­ing ... to de­note the prop­er­ties we’ve al­ready cov­ered.

CSS Shapes al­low you to cre­ate geo­met­ric shapes us­ing shape func­tions, and ap­ply them

The re­sult in the browser should look iden­ti­cal, be­cause the pseudo-el­e­ments are sit­ting di­rectly on top of the text. You can mod­ify their styles in DevTools to see how they are lay­ered.

St ep 3

Time to give each layer a dif­fer­ent colour and back­ground – let’s go for some bold, on-trend, neon colours that we’ve pre­de­fined as vari­ables. We can also force the text to wrap onto mul­ti­ple lines us­ing a CSS pad­ding trick rather than adding these in the HTML. This is help­ful as other­wise we’d have to use two dif­fer­ent types of line breaks: <br> in­side the

<div> and the more ob­scure \A in the at­tribute. The pad­ding trick works by giv­ing the text zero hor­i­zon­tal width, forc­ing the browser to wrap each word to a new line.

St ep 4

Time for the in­ter­est­ing bit – we’re ready to start clip­ping our text. We’re go­ing to cre­ate a di­ag­o­nal clip, slic­ing the screen into two tri­an­gles from the bot­tom left to top right. The ::be­fore pseudo-el­e­ment will only be vis­i­ble in the top-left tri­an­gle, and ::after pseudo-el­e­ment will only be vis­i­ble in the bot­tom­right tri­an­gle. Here’s the code to achieve that:

This cre­ates poly­gons with four points. Each point is de­scribed by a co­or­di­nate pair; sim­ply an X (left to right) and Y (top to bot­tom) value. The value can be ab­so­lute (for ex­am­ple: px) or rel­a­tive (for ex­am­ple: %). The points are ref­er­enced to the top left, so the points at 100% 100% are in the bot­tom right.

Imag­ine lines con­nect­ing each of the points in the or­der that they are listed to form the shapes. In the ::be­fore poly­gon it starts in the top left (0 0), moves across the screen to the top right (100% 0), and then down to the bot­tom left (0 100%).

Hope­fully you will be see­ing your clipped text now. Re­size the browser and you will see the clip­ping re­act ac­cord­ingly.

If you are us­ing Chrome, you will prob­a­bly see some re­paint is­sues while re­siz­ing, caused by Chrome’s Com­pos­ite Lay­ers. Un­for­tu­nately, be­cause the demo is full screen, the rec­om­mended will-change:

trans­form prop­erty and trans­form: trans­lateZ(0) hack don’t rec­tify this. How­ever, if you switch .clip to

po­si­tion: fixed; it works! Bear in mind that Chrome is try­ing to be help­ful, and this work­around will have an im­pact on per­for­mance. Be sure to pro­file per­for­mance when do­ing things like this in pro­duc­tion.

St ep 5

Now that we have got our clipped text, let’s bring it to life with some tran­si­tions. The good news is that you can sim­ply tran­si­tion the clip-path prop­erty so that the browser does all of the hard work. Let’s en­able tran­si­tions on the pseu­doele­ments, and then de­fine four dif­fer­ent states to tran­si­tion be­tween. State 1: This is the ini­tial state, so let’s cre­ate three oth­ers Add each block at the bot­tom of your CSS as you go, so you can see what it looks like. State 2: Move the tri­an­gles apart slightly to re­veal the back­ground This will look a bit like Congo’s flag – if you don’t have to Google that I’ll be very im­pressed! Re­mov­ing 20 per cent from the tip of each poly­gon tri­an­gle will do the trick. State 3: Morph the tri­an­gles into rec­tan­gles This is sim­i­lar to the French Tri­colour, in re­verse. What about that fourth co­or­di­nate pair? Well, this is where it comes in use­ful. It turns out that tran­si­tion­ing clip-path only works if the shape func­tion used is the same (so poly­gon > poly­gon) and the num­ber of points used is the same – the browser will tran­si­tion each in­di­vid­ual point. That’s why we have that fourth hid­den point – it al­lows us to seam­lessly tran­si­tion from a tri­an­gle to a rec­tan­gle, we just re­veal that fourth point when we need it. State 4: Twist those poly­gons Stick­ing to our flag theme, this would re­sem­ble ‘I re­quire a tug’ in the world of mar­itime flag sig­nalling. Google time?

Here we’re twist­ing the poly­gons so they cross in the cen­tre and form two tri­an­gles each. This is when tran­si­tions can help you to un­der­stand the co­or­di­nate pairs. By re­ally slow­ing down the tran­si­tion, you can see how each point moves across the screen to its new po­si­tion, and you start to un­der­stand how the or­der­ing of the pairs af­fects the tran­si­tion. It ac­tu­ally gives you quite a lot of con­trol over the tran­si­tion.

Wrap up

We’re all set but we’re not yet able to change the states, mean­ing you can’t see the tran­si­tions in ac­tion. There are many ways to achieve this, so it’s up to you. In the repo and CodePen, I’ve used a 100 per cent JavaScript-free so­lu­tion with hid­den ra­dio but­tons and the ~ gen­eral sib­ling se­lec­tor – do take a look. You can also check out this tu­to­rial’s Pen here:

82

Tran­si­tions When we start play­ing with tran­si­tions we can re­ally bring the ef­fect to life

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.