Beyond Rectangles in Web Design

CSS Shapes & CSS Masking

Hi, I'm Razvan.

  • Free-range developer, Adobe
  • CSS Shapes
  • CSS Masking
  • CSS Regions

@RazvanCaliman

A web developer and a graphic designer walk into a studio.

I have to teach her the limitations of web design. — web developer

Quiz!

  • Ancient text
  • Next Big Thing™
  • Ancient text
  • Next Big Thing™

▶︎▶︎
4,300 years

Shapes in CSS

CSS Shapes

Illustration of CSS Shapes
A cup of coffee

Espresso is coffee brewed by forcing a small amount of nearly boiling water under pressure through finely ground coffee beans. Espresso is generally thicker than coffee brewed by other methods, has a higher concentration of suspended and dissolved solids, and has crema on top (a foam with a creamy consistency).

Tamping down the coffee promotes the water's even penetration of the grounds. This process produces an almost syrupy beverage by extracting both solid and dissolved components. The "crema" is produced by emulsifying the oils in the ground coffee into a colloid, which does not occur in other brewing methods.

.element {
  float: left;
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
}
					

Shape functions

circle() ellipse() polygon() inset()

circle()

It's time for CSS Shapes. You can use them to create complex layout which goes much beyond simple rectangles. It's about time for CSS Shapes. You can use them to create complex layout which goes much beyond simple rectangles. It's about time for CSS Shapes. You can use them to create complex layout which goes much beyond simple rectangles. It's about time for CSS Shapes. You can use them to create complex layout which goes much beyond simple rectangles.

.element{
  shape-outside: circle(150px at 50% 50%)
}

ellipse()

Fingerprint login on phones? I don't know about you, but that freaks me out. I don't want a thief running off with my phone and a finger. Phones are relatively easy to come by; replacement body parts, not so much.

Plus, I like all of my fingers. I've had them for a long time and I got used to them being there. I don't have a favorite one, they're all useful.

Can you imagine the trouble of tacking on a different finger? I mean, where do you even go to get replacement fingers?

.element{
  shape-outside: ellipse(150px 300px at 50% 50%)
}

polygon()

The octopus is a very intelliget sea creature. Most of its neurons are not loctated in its head, like with other animals, but in its arms. You could say that each of its eight arms has a mind of its own. In fact, when threatened, some ocotopi ("octopuses" sounds nicer), can break off one of their arms, which will squiggle around and confuse the predator. That would confuse the hell out of me. The octopus does not have a skeleton. Its body is mostly water and soft cartilage. The only solid part is its bird beek-like mouth. This means that the octopus can squeeze through anything large enough to fit its mouth.

.element{
  shape-outside: polygon(111px 239px, 23px 222px, 4px 175px ...)
}

shape-inside
workaround

<div class="left">
<div class="right">
Alice was beginning to get very tired ...

.left{
  float: left;
  shape-outside: polygon(0 0, ...);
}
.right{
  float: right;
  shape-outside: polygon(50% 0, ...);
}

Tooling

Browser Support

  • Logo of Chrome browser
  • Logo of Opera browser
  • Logo of Safari 8 browser
  • Logo of Firefox browser
  • Logo of Internet Explorer browser
Screenshot of GitHub repository for CSS Shapes Polyfill script

CSS Masking

Illustration of the clip-path property with an animation of scissors cutting along a dotted line. clipping
Masking
Masking
.element{
  -webkit-clip-path: circle(200px at 50% 50%)
}
					
.element{
  -webkit-clip-path: ellipse(150px 250px at 50% 50%);
}
					
.element{
  -webkit-clip-path: polygon(nonzero, 955px 405px, 483px 212px, 1px 400px, 0px 500px, 956px 500px);
}
				

SVG

  • Scalable
  • Scriptable
  • Small footprint
  • Decent support

<clipPath>

clipping HTML with SVG

<style>
.element{
  -webkit-clip-path: url(#shape);
}
</style>

<svg>
 <defs>
  <clipPath id="shape">
	...
  </clipPath>
 </defs>
</svg>
				
<clipPath id="shape">
  <circle r="100" cx="400" cy="200" />
  <path d="M24.527,11.121c-0.227-0.226 ..." />
</clipPath>
					
New York

New York

<clipPath id="shape">
  <text>New York</text>
</clipPath>
					
New York, Los Angeles, London, Paris,

xx

<textPath xlink:href="#circle">
  New York, Los Angeles...
</textPath>
<path id="circle" d="M230,250a250,250 ..." />
					

Browser Support for clip-path

HTML HTML←SVG SVG
Chrome
Opera
Firefox
Safari
Internet Explorer
Illustration of the clip-path property with an animation of scissors cutting along a dotted line. clipping
Masking
Masking
.element{
  -webkit-mask: url(mask.jpg);
}
					
  • Textures
  • for
  • Everything!

<mask>

<mask id="shape">
  <circle cx="0" cy="0" r="70" fill="#fff" />
</mask>
					
Photos: National Archives of Canada, 1944/Chris Helgren, 2013/Reuters. Source: The Atlantic

Browser Support for mask

Image Gradient HTML←SVG SVG←SVG
Chrome
Opera
Firefox
Safari
Internet Explorer
Image Gradient HTML←SVG SVG←SVG
Chrome*
Opera*
Firefox
Safari*
Internet Explorer
* prefixed with -webkit-
† luminance support behind flag (Chrome 37, Opera 24)
‡ may be polyfilled with SVG (IE 8-10 only gradient. IE 11 image & gradient)

Recap

  • CSS Shapes
  • CSS Masking (clip-path)
  • CSS Masking (mask-image)

webplatform.adobe.com

I have to teach her the limitations of web design. — web developer

End.

@RazvanCaliman

bitly.com/fowd2014-shapes

Credits