Let's Talk About Shapes – CSS Shapes & CSS Masking

View Github Repository Open presentation in a new window

oslego

See all presentation from oslego

Let's Talk About Shapes – CSS Shapes & CSS Masking

0 3

infoshare-2015

Slides for my talk at infoShare 2015, "Let's Talk About Shapes"

On Github oslego / infoshare-2015

Let's Talk About Shapes

CSS Shapes & CSS Masking

Hi, I'm Razvan.

  • Web Developer at Adobe
  • CSS Shapes
  • CSS Masking
  • CSS Regions

@RazvanCaliman

feature abuse, maintenance overhead
feature abuse, maintenance overhead

Layout

Graphics

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;
}
Naive, using img with transparent bg, expecting text to fill the gaps. Disappointed to get square shape around img.

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-insideworkaround

<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, ...);
}
Interactive editor, selected element DevTools Chrome, Opera

Tooling

Browser Support

Vote for Support

New screens, new form factors

CSS Masking

- hide parts of the content - fundamental concept in design surfaces - missing from the web
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
  • Good support

SVG <clipPath>

CSS property

-webkit-clip-path: … ;

SVG element

<clipPath> … </clipPath>

clipping HTML with SVG

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

<svg>
  <clipPath id="shape">
   ...
  </clipPath>
</svg>
				
<clipPath id="shape">
</clipPath>

Text Clipping

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

New York, Los Angeles, London, Paris,

<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 ✔ ✔ ✔ ✔ ✔ ✔ ✖ ✔ ✔ ✔ ✔ ✔ ✖ ✖ ✔
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!
Image, gradient, fixed bg, animated GIF, mask-image-position

SVG<mask>

CSS property

-webkit-mask: … ;

SVG element

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

Browser Support for mask

Image Gradient HTML←SVG SVG ✔ ✔ ✖ ✔ ✔ ✔ ✖ ✔ ✖ ✖ ✔ ✔ ✔ ✔ ✖ ✔ ✖ ✖ ✖ ✔
Chrome, Opera: alpha image masks IE, Firefox: polyfill-able image & gradient masks with SVG Image Gradient HTML←SVG SVG * ✔† ✔ ✖ ✔ * ✔† ✔ ✖ ✔ ✖‡ ✖‡ ✔ ✔ * ✔ ✔ ✖ ✔ ✖‡ ✖‡ ✖ ✔ * prefixed with -webkit- † luminance mask support behind flag (Chrome, Opera) ‡ may be polyfilled with SVG (IE 8-10 only gradient. IE 11 image & gradient)

Layout

CSS Shapes

Graphics

CSS Masking, SVG

Follow Sara Soueidan

End.

@RazvanCaliman

bit.ly/infoshare-2015-shapes

Credits