#wcnp2013

The Future of

Web Design Experience

Chandra Maharzan nhuja.comgraphpaperpress.com

CSS SHAPES

CSS REGIONS

CSS REGIONS

css-tricks.com/content-folding

<article class=”content”> <h1>Title</h1> <p>...</p> </article>

<div class=”region”></div><div class=”region”></div><div class=”region”></div>

.content { /* collect content into a named flow */ flow-into: myFlow;}

.region { /* render the content from the named flow */ flow-from: myFlow;}

<article class=”content”> <h1>Title</h1> <p>...</p> </article>

<div class=”region”></div><div class=”region”></div><img src=”myimage.jpg” /><div class=”region”></div>

tiny.cc/savingbabies

CSS SHAPES

Nicolas Gallagher

SHAPE INSIDE

#content { shape-inside: circle(50%, 50%, 10em)}

SHAPE OUTSIDE

#coffee { float: left; shape-outside: circle(50%, 50%, 10em);}

shape-inside: polygon(x1, y1 x2, y2 ... );

COMPLEX SHAPES

CSS LOVE BALLOONS

Lewis CarrollUltranoirtiny.cc/alicedemo

CSS BLENDING

CSS FILTERS

CSS MASKING

Saturday MorningLOVE YOU...

MORE @

blogs.adobe.com/webplatform

Razvan Caliman - Cutting Edge CSS Features

css-tricks.com

tiny.cc/ngdemo

THANK YOUQuestions?

@maharzan