Beyond Rectangles in Web Design – CSS Shapes & CSS Masking

View Github Repository Open presentation in a new window

oslego

See all presentation from oslego

Beyond Rectangles in Web Design – CSS Shapes & CSS Masking

1 3

max-2014

Slides for my Adobe MAX 2014 talk, "Beyond Rectangles in Web Design: CSS Shapes and CSS Masking"

On Github oslego / max-2014

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.

Conversation with a friend who works in a web design studio. A print designer decided to switch to web design. - /me "Great! A print designer, an unchained creative coming to the web!" My friend was tasked with helping her out, teaching, supervising. I expected to learn how he'd teach responsive web design, animations, perfromance - /me How's it going?
I have to teach her the limitations of web design. — web developer - Web seen as limited, boxed, rigid. - Print is a medium which fosters boundless creativity - Print designers bring fresh perspective - Constraints encourage creativity, up to a point

Quiz!

A pop-quiz is a terrible way to get attention. But our school teachers used it with great results. Let's give it a try.
  • Ancient text
  • Next Big Thing™
  • Ancient text
  • Next Big Thing™
Clay tablet, 2300 BC, Mesopotamia, Girsu Accounting, barley rations for adults & children
Clay cylinder, 555 BC, Nabonidus Status report on construction work for temple + prayer
Inscribed river rock, 2400 BC, Mesopotamia Reminds the gods of King Enannatum's prolific temple building in Lagash
Clay tablet, 1750 BC, Ur Complaint about delivery of wrong grade of copper

▶︎▶︎ 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;
}
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

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
  • Decent support
Deer SVG, scale, bob head, change fill

<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>
Los Angeles

Los Angeles

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

xx

<textPath xlink:href="#circle">
  Los Angeles, New York ...
</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

Browser Support for mask

Image Gradient HTML←SVG SVG←SVG ✔ ✔ ✖ ✔ ✔ ✔ ✖ ✔ ✖ ✖ ✔ ✔ ✔ ✔ ✖ ✔ ✖ ✖ ✖ ✔
Chrome, Opera: alpha image masks, luminance behind flag IE, Firefox: polyfill-able image & gradient masks with SVG Image Gradient HTML←SVG SVG←SVG * ✔† ✔ ✖ ✔ * ✔† ✔ ✖ ✔ ✖‡ ✖‡ ✔ ✔ * ✔ ✔ ✖ ✔ ✖‡ ✖‡ ✖ ✔ * 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/max2014-shapes