#wcnp2013
The Future of

Web Design
Experience
Chandra Maharzan
nhuja.com
graphpaperpress.com
CSS REGIONS
CSS SHAPES
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 ...
.content {
/* collect content into a named flow */
flow-into: myFlow;
}
.region {
/* render the content from the named flo...
<article class=”content”>
<h1>Title</h1>
<p>...</p>
</article>
<div
<div
<img
<div

class=”region”></div>
class=”region”><...
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);
}
COMPLEX SHAPES
shape-inside: polygon(x1, y1 x2, y2 ... );
CSS LOVE BALLOONS
Lewis Carroll
Ultranoir
tiny.cc/alicedemo
CSS BLENDING
CSS FILTERS
CSS MASKING
Saturday Morning
LOVE YOU...
MORE @
blogs.adobe.com/webplatform
Razvan Caliman - Cutting Edge
CSS Features
tiny.cc/ngdemo
css-tricks.com
THANK YOU
Questions?
@maharzan
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Chandra Maharzan: The Future of Web Design Experience
Upcoming SlideShare
Loading in...5
×

Chandra Maharzan: The Future of Web Design Experience

1,303

Published on

The Future of Web Design Experience

Published in: Design, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,303
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
183
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Chandra Maharzan: The Future of Web Design Experience

  1. 1. #wcnp2013
  2. 2. The Future of Web Design Experience Chandra Maharzan nhuja.com graphpaperpress.com
  3. 3. CSS REGIONS CSS SHAPES
  4. 4. CSS REGIONS
  5. 5. css-tricks.com/content-folding
  6. 6. <article class=”content”> <h1>Title</h1> <p>...</p> </article> <div class=”region”></div> <div class=”region”></div> <div class=”region”></div>
  7. 7. .content { /* collect content into a named flow */ flow-into: myFlow; } .region { /* render the content from the named flow */ flow-from: myFlow; }
  8. 8. <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>
  9. 9. tiny.cc/savingbabies
  10. 10. CSS SHAPES
  11. 11. Nicolas Gallagher
  12. 12. SHAPE INSIDE #content { shape-inside: circle(50%, 50%, 10em) }
  13. 13. SHAPE OUTSIDE #coffee { float: left; shape-outside: circle(50%, 50%, 10em); }
  14. 14. COMPLEX SHAPES shape-inside: polygon(x1, y1 x2, y2 ... );
  15. 15. CSS LOVE BALLOONS
  16. 16. Lewis Carroll Ultranoir tiny.cc/alicedemo
  17. 17. CSS BLENDING CSS FILTERS CSS MASKING
  18. 18. Saturday Morning LOVE YOU...
  19. 19. MORE @ blogs.adobe.com/webplatform Razvan Caliman - Cutting Edge CSS Features tiny.cc/ngdemo css-tricks.com
  20. 20. THANK YOU Questions? @maharzan
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×