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

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

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

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

.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

CSS 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

<clipPath id="shape">
  <text>New York</text>
</clipPath>
					

xx

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

Browser Support for clip-path

.element{
  -webkit-mask: url(mask.jpg);
}
					

• Textures
• for
• Everything!

<mask>

<mask id="shape">
  <circle cx="0" cy="0" r="70" fill="#fff" />
</mask>
					

Browser Support for mask

Recap

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

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

End.

@RazvanCaliman

bitly.com/fowd2014-shapes

Credits

• Slides framework: Reveal.JS by Hakim El Hattab
• Shattered Island pattern by Julien Renvoye
• Science pattern by Fabricio Marques
• House by Michael Rowe from The Noun Project
• Traffic Cone by jon trillana from The Noun Project
• Clock by Desbenoit from The Noun Project
• Deer in the Headlights by Luis Prado from The Noun Project
• Fingerprint by Yaroslav Samoilov from The Noun Project
• Glasses by Okan Benn from The Noun Project
• Octopus by Christy Presler from The Noun Project
• Scissors by Edward Boatman from the Noun Project
• Scarf by Maurizio Fusillo from The Noun Project
• Boots picture by Amanda Sandlin
• Browser logos on GitHub
• Screenshots of Alice in Wonderland demo from Adobe
• Screenshot of Moto360 from Motorola
• Fonts: Open Sans, Open Sans Condensed, Source Code Pro, Montserrat, Fredericka the Great, Luckiest Guy
• D-Day Photos: National Archives of Canada, 1944/Chris Helgren, 2013/Reuters. Source: The Atlantic