The Future of Web Design Experience

2. #wcnp2013

3. The Future of
Web Design
Experience
Chandra Maharzan
nhuja.com
graphpaperpress.com

20. CSS REGIONS
CSS SHAPES

21. CSS REGIONS

23. css-tricks.com/content-folding

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

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

27. <article class=”content”>
<h1>Title</h1>
<p>...</p>
</article>
<div
<div
<img
<div
class=”region”></div>
class=”region”></div>
src=”myimage.jpg” />
class=”region”></div>

28. tiny.cc/savingbabies

31. CSS SHAPES

32. Nicolas Gallagher

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

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

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

44. CSS LOVE BALLOONS

45. Lewis Carroll
Ultranoir
tiny.cc/alicedemo

47. CSS BLENDING
CSS FILTERS
CSS MASKING

49. Saturday Morning
LOVE YOU...

50. MORE @
blogs.adobe.com/webplatform
Razvan Caliman - Cutting Edge
CSS Features
tiny.cc/ngdemo
css-tricks.com

51. THANK YOU
Questions?
@maharzan