Css masks and clip­ping

Is your CSS stuck in a rut? Aga Naplocha shows you how to cre­ate col­lagestyle ef­fects in browser with­out mess­ing about in graph­ics soft­ware

net magazine - - CONTENTS -

Aga Naplocha shows you how to cre­ate col­lage-style ef­fects in browser

In this tu­to­rial we are go­ing to go through three CSS prop­er­ties: mask-im­age, clip-path and shape­out­side. Even if you have used them, don’t worry. I’ll show ex­am­ples that will help you cre­ate ef­fects you prob­a­bly haven’t seen on many web­sites.

My big­gest in­spi­ra­tion in terms of us­ing the men­tioned prop­er­ties is tra­di­tional col­lages. I was won­der­ing if it’s pos­si­ble to cre­ate them in a web browser, not by us­ing any graph­ics ed­i­tors or soft­ware. With the magic of CSS, it’s to­tally doable! An­other bonus of cre­at­ing them with code is hav­ing them scal­able, an­i­mated and in­ter­ac­tive.

What you will need:

Your favourite web browser and de­vel­oper tools – I rec­om­mend us­ing Google Chrome since it sup­ports all the fea­tures I use in this tu­to­rial. A code ed­i­tor. As­sets such as im­ages or SVG files – you can down­load the ones that’s we’re us­ing in this tu­to­rial from my repos­i­tory at github.com/aganaplocha/net­mag-tu­to­rial.

mask­ing – mak­ing im­ages that over­lap text

Mask­ing is the first fea­ture I’d like to show you. It helps to build more cre­ative shapes and lay­outs on the web by telling your browser which as­set el­e­ments should be vis­i­ble. Mask­ing can be done in three dif­fer­ent ways: us­ing a raster im­age (that is in PNG for­mat with trans­par­ent parts); CSS gra­di­ents; or SVG el­e­ments. Note that un­like a typ­i­cal raster im­age, SVG can be scaled or trans­formed with­out a sig­nif­i­cant loss in qual­ity.

What I es­pe­cially like about mask­ing is its abil­ity to ap­ply the same prop­er­ties as for

back­ground – we can de­fine a mask’s po­si­tion, size and rep­e­ti­tion, for in­stance, us­ing: mask-re­peat:

no-re­peat and mask-size: cover. Thanks to CSS mask­ing we can cre­ate more so­phis­ti­cated ef­fects on the web. One of them can be found in our ex­am­ple, where parts of an im­age cover some text; when a user scrolls up and down the page some por­tions of the text are shown/hid­den. This gives the im­pres­sion that the page ti­tle is lo­cated be­hind the moun­tains. To cre­ate this ef­fect, some tricks are needed and the clever ap­pli­ca­tion of CSS masks will help us to achieve that.

Let’s cre­ate a header with a se­lected back­ground im­age and two head­ers in­side. One of them will be the pri­mary one (first level of head­ing).

<header> <h3>This is</ h3> <h1>< span>My Ad­ven­ture</span></ h1> </ header>

The text of the head­ing will be kept in the <span> tag. It’s not a com­mon thing but, in this case, we’re ap­ply­ing mask­ing to head­ing, not to the con­tainer.

header { width: 100vw; height: 80vh; top: 0; left: auto; back­ground: url(../ im­ages/ land­scape. jpg) cen­ter top no- re­peat;

back­ground- size: cover;

} h1 { mask: url(../ im­ages/mask. svg# maskid); - we­bkit- mask: url(../ im­ages/ land­scape- mask. png)

cen­ter top no- re­peat; mask- size: cover; - we­bkit- mask- size: cover; width: 100vw; height: 80vh; color: # fff; font- size: 100px; po­si­tion: rel­a­tive; } h1 span { po­si­tion: fixed; dis­play: in­line- block; text- align: cen­ter; font- fam­ily: ‘ Li­bre Baskerville’, serif; width: 100vw; top: 80px; font- style: italic;

Cut out im­ages us­ing CSS clip­ping

Let’s ex­plore an­other ex­am­ple and find out more about CSS clip­ping. In short, clip­ping de­fines which im­age area should be vis­i­ble. Clip­ping is sim­i­lar to chop­ping pieces of pa­per. The shape’s bound­ary is called the clip path: any­thing out­side the path will be hid­den, while any­thing in­side the path will be vis­i­ble. With a clip path you can re­move back­ground from your im­age, in­stead of us­ing heavy PNG files. For this we need to al­ready have pre­pared the shape for the cut out.

The goal in this ex­er­cise is to clip the plant out of the im­age, re­mov­ing the back­ground. We can copy SVG code from our file and paste it to an HTML doc­u­ment. The clip path has to be placed within

<defs> </defs> tags.

< svg> <defs> <clipPath id=”clip- plant”> <path d=” M293.2,524.8c0,3.3,0… [and more num­bers]”>

</clipPath> </defs> </svg> <div class=”plant”></div>

} “Clip­ping de­fines which im­age area should be vis­i­ble. Clip­ping is sim­i­lar to chop­ping pieces of pa­per”

Later we can eas­ily ref­er­ence the path de­fined in the SVG code by adding a URL func­tion.

. plant { height: 700px; back­ground- im­age: url(../ im­ages/plant. jpg); back­ground- size: cover; po­si­tion: rel­a­tive; back­ground- re­peat: no- re­peat; - we­bkit- clip- path: url(“# clip- plant”); clip- path: url(“# clip- plant”);}

Think out­side of the box – lit­er­ally

Who said that text con­tain­ers al­ways need to be rec­tan­gu­lar? Con­tent can be cut into all sorts of dif­fer­ent shapes by ap­ply­ing shape-out­side and shape

in­side prop­er­ties that en­able you to wrap your con­tent around cus­tom paths in CSS. So, how does it work? Sim­ply ap­ply shape-out­side to the given floated im­age or con­tainer. It is im­por­tant to note that the float prop­erty and the di­men­sions of the el­e­ment – ei­ther height or width – have to be de­fined oth­er­wise it doesn’t work. You can use the url() func­tion, which en­ables the shape-out­side prop­erty to de­fine an el­e­ment shape based on the path from an SVG file.

. a- let­ter { back­ground- im­age: url(‘../ im­ages/gold- bg. jpg’); back­ground- size: 1000px; - we­bkit- mask- im­age: url(‘../ im­ages/a- let­ter2. svg’); - we­bkit- mask- com­pos­ite: source- out; - we­bkit- mask- re­peat: no- re­peat; - we­bkit- mask- size: 300px; width: 100%; height: 60vh; po­si­tion: rel­a­tive; top: 0px; back­ground- at­tach­ment: fixed; float: left; dis­play: in­line- block; width: 310px; shape- mar­gin: 23px; shape- out­side: url(‘../ im­ages/mask. svg’);


The shape-out­side prop­erty doesn’t change any­thing about an el­e­ment other than its float area. This means that any bor­ders and back­ground im­ages will not adapt to the shape cre­ated on the el­e­ment. This is the rea­son why we also need to ap­ply the mask

im­age prop­erty – to cut out the back­ground of the el­e­ment to match the de­fined shape. One im­por­tant thing to note is that the shape

out­side fea­ture works only with CORS-en­abled files. CORS stands for Cross Ori­gin Re­source Shar­ing.

In this par­tic­u­lar case the best way to view it is to use lo­cal­host, oth­er­wise it won’t work if you just open it in your browser.

When ex­per­i­ment­ing, please do bear in mind that not all of the men­tioned fea­tures are sup­ported by all browsers, so it’s worth check­ing them out on ( ca­niuse.com). The lat­est ex­am­ple doesn’t work in Fire­fox, Opera and IE but hope­fully it will be avail­able soon for all the browsers.

Aga Naplocha w: t: job: aganaplocha.com @ aganaplocha Cod­ing de­signer at Adobe and co-founder of The Awwwe­somes ar­eas of ex­per­tise: HTML, CSS, web de­sign and UX

Above CSS masks en­able you to cre­ate spe­cial ef­fects – like en­abling a site head­ing to se­lec­tively ap­pear and dis­ap­pear as the user scrolls up and down the page..

Top Clip­ping paths en­able you to cut out the plant im­age in this ex­am­ple Mid­dle You can use shapein­side and shape-out­side to cre­ate all kinds of shapes Bot­tom The end re­sult looks in­cred­i­ble – and adds con­sid­er­able in­ter­est to a web page

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.