-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
1123 lines (968 loc) · 76.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Beyond Rectangles - CSS Shapes & CSS Masking</title>
<meta name="description" content="Deep-dive exploration of CSS features for creating non-rectangular layout and graphics">
<meta name="author" content="Razvan Caliman">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/adobe.css" id="theme">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section class="intro">
<h1>Beyond Rectangles in Web Design</h1>
<h3>CSS Shapes & CSS Masking</h3>
</section>
<section class="left-aligned bio" id="bio">
<img src="resources/Razvan_CALIMAN.jpg" alt="">
<h2>Hi, I'm Razvan.</h2>
<ul>
<li>
Free-range developer, Adobe
</li>
<li>
CSS Shapes
</li>
<li>
CSS Masking
</li>
<li>
CSS Regions
</li>
</ul>
<h3>
<a href="https://twitter.com/razvancaliman" target="_blank">@RazvanCaliman</a>
</h3>
</section>
<section id="studio">
<h3>A web developer and a graphic designer walk into a studio.</h3>
<svg version="1.1" viewBox="0 0 100 100" width="500" height="500">
<path class="demo--graphic" d="M50,7.353L6.973,25.177v49.646L50,92.646l4.78-1.98v-19.83l13.213-5.473v19.83l0.061-0.025l12.637,5.236 V70.535l-0.006-0.004v-0.002l1.196-0.492v9.404l11.146-4.619V25.177L50,7.353z M77.782,80.957c-0.382,0-0.692-0.432-0.692-0.969 c0-0.529,0.311-0.963,0.692-0.963c0.38,0,0.688,0.434,0.688,0.963C78.471,80.525,78.162,80.957,77.782,80.957z"/>
</svg>
<aside class="notes">
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?
</aside>
</section>
<section>
<blockquote>
I have to teach her the limitations of web design.
<span>— web developer</span>
</blockquote>
<aside class="notes">
- 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
</aside>
</section>
<section>
<!-- <video data-autoplay src="resources/video/travelmag-720.mp4" class="stretch"></video> -->
<a href="https://www.behance.net/gallery/2159303/Travel-Magazine" target="_blank">
<img src="resources/video/travelmag-hero.jpg" alt="">
</a>
</section>
<section data-state="alert">
<h1>Quiz!</h1>
<aside class="notes">
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.
</aside>
</section>
<section data-background="./resources/writing-legend.jpg" data-state="vignette">
<ul class="quiz stretch">
<li class="fragment">Ancient text</li>
<li class="fragment">Next Big Thing™</li>
</ul>
</section>
<section data-background="./resources/writing-claytablet1.jpg" data-state="vignette">
<ul class="quiz stretch">
<li class="fragment">Ancient text</li>
<li class="fragment">Next Big Thing™</li>
</ul>
<aside class="notes">
Clay tablet, 2300 BC, Mesopotamia, Girsu
<br />Accounting, barley rations for adults & children
</aside>
</section>
<section data-background="./resources/writing-cylinder.jpg">
<aside class="notes">
Clay cylinder, 555 BC, Nabonidus
<br />Status report on construction work for temple + prayer
</aside>
</section>
<section data-background="./resources/writing-rock.jpg">
<aside class="notes">
Inscribed river rock, 2400 BC, Mesopotamia
<br />Reminds the gods of King Enannatum's prolific temple building in Lagash
</aside>
</section>
<section data-background="./resources/writing-complaint.jpg">
<img src="./resources/writing-complaint-caption.jpg" class="fragment" alt="">
<aside class="notes">
Clay tablet, 1750 BC, Ur
<br />Complaint about delivery of wrong grade of copper
</aside>
</section>
<section>
<h1>▶︎▶︎ <br>4,300 years</h1>
</section>
<section>
<h2>Shapes in CSS</h2>
<div class="shapes-illustration">
<div class="fragment"></div>
<div class="fragment"></div>
<div class="fragment"></div>
<div class="fragment"></div>
<div class="fragment"></div>
<div class="fragment"></div>
<div class="fragment"></div>
<div class="fragment"></div>
</div>
</section>
<section>
<!-- <video data-autoplay src="resources/video/shapesofcss-720.mp4" class="stretch"></video> -->
<a href="http://css-tricks.com/examples/ShapesOfCSS/" target="_blank">
<img src="resources/video/shapesofcss-hero.png" alt="">
</a>
</section>
<section id="css-shapes">
<h1>CSS Shapes</h1>
<img src="resources/css-shapes" alt="Illustration of CSS Shapes">
</section>
<section>
<div class="demo demo--shape-left demo--shape-image">
<img src="./resources/espresso.png" alt="A cup of coffee" class="shape">
<p>
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).
</p>
<p>
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.
</p>
</div>
<pre>
<span class="not-important">.element {</span>
<span class="fragment highlight">float: left;</span>
<span class="fragment highlight">shape-outside: url(image.png);</span>
<span class="fragment highlight">shape-image-threshold: 0.5;</span>
<span class="not-important">}</span>
</pre>
<aside class="notes">
Naive, using img with transparent bg, expecting text to fill the gaps.
Disappointed to get square shape around img.
</aside>
</section>
<!-- <section>
// STRETCH GOAL
- interactive of shape-image-threshold (starfish, octopus?)
</section> -->
<section>
<h2>Shape functions</h2>
<code>circle()</code>
<code>ellipse()</code>
<code>polygon()</code>
<code>inset()</code>
</section>
<section>
<div class="demo demo--shape-left demo--shape-circle">
<h2 class="code">circle()</h2>
<svg class="shape" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" xml:space="preserve">
<g>
<path class="demo--graphic" d="M50,0C22.383,0,0,22.385,0,50c0,27.618,22.383,50,50,50s50.002-22.383,50.002-50C100.002,22.385,77.617,0,50,0z M51.785,91.027v-7.099h-5.952v7.099c-17.857-1.444-35.416-19.003-36.861-36.86h7.099v-5.953H8.972 C10.417,27.976,27.976,10.415,45.833,8.97v10.673h5.952V8.97c20.238,1.445,37.799,19.006,39.242,39.245h-10.67v5.953h10.67 C89.584,72.024,72.023,89.583,51.785,91.027z"/>
<path class="demo--graphic" d="M50.073,44.641c-0.107-0.006-0.209-0.032-0.317-0.032c-0.653,0-1.27,0.133-1.854,0.337L30.268,32.479l13.915,18.407 c0.321,2.809,2.679,4.999,5.573,4.999c3.113,0,5.639-2.525,5.639-5.64c0-0.4-0.045-0.789-0.123-1.166L76.84,22.793L50.073,44.641z"/>
</g>
</svg>
<p>
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.
</p>
</div>
<pre>
<span class="not-important">.element{</span>
shape-outside: circle(<span class="fragment highlight">150px</span> at <span class="fragment highlight">50% 50%</span>)
<span class="not-important">}</span>
</pre>
</section>
<section>
<div class="demo demo--shape-right demo--shape-ellipse">
<h2 class="code">ellipse()</h2>
<svg class="shape" width="80" height="80" viewBox="15 15 70 70" xml:space="preserve">
<g>
<path class="demo--graphic" d="M49.05,75.254c-2.166,1.06-4.355,3.329-4.046,5.809c0.248,1.98-0.001,7.856-0.004,7.916l1,0.043 c0.01-0.245,0.254-6.02-0.004-8.084c-0.249-1.992,1.637-3.877,3.493-4.785c1.607-0.788,3.808-1.148,5.157,0.201l10,10l0.707-0.707 l-10-10C53.914,74.208,51.5,74.058,49.05,75.254z"/>
<path class="demo--graphic" d="M51.625,77.5C49.334,77.5,47,79.771,47,82v7h1v-7c0-1.701,1.863-3.5,3.625-3.5 c1.112,0,5.833,4.492,9.754,8.835l0.742-0.67C60.739,85.135,53.74,77.5,51.625,77.5z"/>
<path class="demo--graphic" d="M51.625,80.5c-1.961,0-2.574,2.275-2.625,3.5v5h1v-4.979c0.001-0.024,0.122-2.521,1.625-2.521 c1.204,0,4.655,3.974,6.722,6.795l0.807-0.59C58.272,86.502,53.77,80.5,51.625,80.5z"/>
<path class="demo--graphic" d="M51.982,84.07c-0.61,0.099-0.898,0.645-0.93,0.706L51,84.882V88h1v-2.847 c0.037-0.042,0.089-0.087,0.143-0.096c0.089-0.014,0.265,0.057,0.504,0.296c0.93,0.93,1.896,2.851,1.906,2.87l0.895-0.447 c-0.042-0.085-1.049-2.085-2.094-3.13C52.898,84.19,52.437,84,51.982,84.07z"/>
<path class="demo--graphic" d="M54.849,72.553c-1.926-0.963-4.672-0.726-7.345,0.637C45.042,74.443,43.276,76.299,43,78v11h1 l-0.007-10.918c0.213-1.275,1.843-2.922,3.965-4.002c2.392-1.217,4.8-1.452,6.443-0.633c3.87,1.935,11.896,10.799,11.978,10.888 l0.742-0.67C66.787,83.295,58.887,74.571,54.849,72.553z"/>
<path class="demo--graphic" d="M41.515,75.879C40.512,79.893,40.5,87.671,40.5,88h1c0-0.079,0.012-7.983,0.985-11.879 c0.951-3.805,6.776-6.387,9.75-5.798c2.547,0.51,12.209,7.468,16.962,11.075l0.605-0.797c-0.569-0.432-13.964-10.577-17.372-11.259 C48.734,68.597,42.545,71.761,41.515,75.879z"/>
<path class="demo--graphic" d="M39.542,72.65C37.856,76.51,37.514,85.863,37.5,86.26l1,0.035c0.003-0.096,0.348-9.558,1.958-13.244 c1.607-3.681,6.121-6.029,11.01-5.719c4.958,0.32,20.077,11.817,20.229,11.934l0.607-0.795 c-0.632-0.481-15.514-11.797-20.771-12.137C46.236,66.008,41.315,68.592,39.542,72.65z"/>
<path class="demo--graphic" d="M37.602,69.434C35.194,72.601,35.167,84.495,35.167,85h1c0-0.12,0.025-12.06,2.231-14.961 c2.306-3.034,10.448-6.131,14.712-4.892c4.478,1.302,20.486,10.153,20.647,10.242l0.484-0.875 c-0.662-0.366-16.269-8.994-20.853-10.328C48.723,62.829,40.132,66.104,37.602,69.434z"/>
<path class="demo--graphic" d="M35.344,67.618c-3.969,3.364-3.851,13.919-3.844,14.366l1-0.016c-0.002-0.104-0.119-10.527,3.49-13.587 c3.807-3.227,10.929-6.354,15.457-5.885c4.609,0.485,23.891,9.821,24.084,9.916l0.438-0.9c-0.8-0.388-19.634-9.507-24.416-10.01 C46.604,60.979,39.29,64.271,35.344,67.618z"/>
<path class="demo--graphic" d="M33.854,64.312c-3.023,3.912-5.967,13.989-6.091,14.416l0.961,0.279c0.029-0.104,3.014-10.322,5.921-14.084 c2.93-3.791,11.598-5.152,16.832-4.925c5.332,0.243,25.1,10.085,25.299,10.185l0.447-0.895c-0.82-0.41-20.159-10.037-25.701-10.288 C46.074,58.748,37.003,60.237,33.854,64.312z"/>
<path class="demo--graphic" d="M31.605,61.641c-2.018,2.574-6.259,12.689-6.438,13.118l0.922,0.387c0.044-0.104,4.369-10.419,6.304-12.888 c1.103-1.407,4.977-4.712,17.119-5.008c9.955-0.253,29.191,9.893,29.385,9.995l0.469-0.883 c-0.797-0.424-19.652-10.377-29.877-10.112C37.371,56.546,33.083,59.755,31.605,61.641z"/>
<path class="demo--graphic" d="M30.709,58.521C34.741,55.622,46,54.167,50,54.167v-1c-4,0-15.465,1.372-19.875,4.542 c-4.439,3.191-6.499,13.702-6.595,14.148l0.977,0.211C24.53,71.963,26.579,61.49,30.709,58.521z"/>
<path class="demo--graphic" d="M54.66,53.168l-0.07,0.998c4.215,0.298,9.706,1.942,14.689,4.397c4.399,2.169,9.492,6.154,9.543,6.194 l0.617-0.787c-0.052-0.04-5.224-4.089-9.719-6.304C64.628,55.156,58.998,53.475,54.66,53.168z"/>
<path class="demo--graphic" d="M58.669,52.16c5.934,0.976,17.979,7.235,18.1,7.299l0.463-0.887c-0.5-0.261-12.309-6.397-18.4-7.398 c-6.036-0.993-21.062-0.356-24.358,1.032l0.389,0.922C37.732,51.919,52.446,51.137,58.669,52.16z"/>
<path class="demo--graphic" d="M30.111,55.516l-0.557-0.83c-2.905,1.947-7.922,11.481-8.135,11.886l0.887,0.465 C22.357,66.938,27.415,57.323,30.111,55.516z"/>
<path class="demo--graphic" d="M60.186,48.754c-6.055-0.936-12.918-1.998-19.27-0.913c-7.119,1.215-14.232,5.714-15.61,6.878 c-1.476,1.244-5.305,5.719-5.467,5.908l0.76,0.65c0.039-0.046,3.938-4.603,5.352-5.795c1.279-1.081,8.315-5.492,15.134-6.656 c6.188-1.057,12.969-0.01,18.949,0.916l1.642,0.252c6.435,0.978,19.497,7.141,19.629,7.203l0.428-0.904 c-0.541-0.256-13.326-6.288-19.906-7.287L60.186,48.754z"/>
<path class="demo--graphic" d="M42.55,45.831l-0.1-0.995c-0.051,0.005-5.128,0.53-10.625,2.574c-5.512,2.05-12.826,7.787-13.135,8.03 l0.619,0.785c0.074-0.059,7.501-5.883,12.863-7.878C37.545,46.35,42.5,45.836,42.55,45.831z"/>
<path class="demo--graphic" d="M67.028,47.402c-4.687-1.474-13.6-2.241-18.495-2.567l-0.066,0.998c4.852,0.323,13.675,1.081,18.261,2.523 c4.562,1.436,15.003,5.08,15.107,5.116l0.33-0.943C82.06,52.491,71.604,48.842,67.028,47.402z"/>
<path class="demo--graphic" d="M19.253,51.809c0.969,0,3.477-1.026,10.861-6.062C34.413,42.816,45.104,42.5,49.5,42.5 c7.341,0,32.107,7.404,32.356,7.479l0.287-0.958C81.12,48.714,56.987,41.5,49.5,41.5c-4.489,0-15.421,0.333-19.948,3.42 c-6.218,4.239-9.679,6.004-10.271,5.875c0.015,0.003,0.068,0.025,0.113,0.082l-0.787,0.617 C18.716,51.634,18.854,51.809,19.253,51.809z"/>
<path class="demo--graphic" d="M25.815,45.797c1.465-0.592,2.628-1.424,3.858-2.305c2.647-1.895,5.647-4.042,12.857-4.493 c6.825-0.427,20.21,2.745,29.073,4.842c5.879,1.391,8.994,2.111,9.976,1.988l-0.125-0.992c-0.844,0.103-4.914-0.855-9.62-1.969 c-9.454-2.237-22.406-5.304-29.366-4.867c-7.496,0.468-10.62,2.705-13.377,4.678c-1.181,0.845-2.296,1.644-3.651,2.19 c-4.153,1.678-6.036,0.151-6.114,0.085l-0.656,0.755c0.063,0.056,1.106,0.939,3.221,0.939 C22.935,46.649,24.238,46.434,25.815,45.797z"/>
<path class="demo--graphic" d="M30.216,40.024c2.847-1.771,5.79-3.601,9.366-4.197c7.606-1.267,16.276,1.202,22.608,3.005 c1.053,0.3,2.035,0.579,2.931,0.818c6.1,1.627,10.805,2.193,16.256,1.959l-0.043-0.999c-5.332,0.229-9.96-0.328-15.955-1.926 c-0.891-0.238-1.867-0.516-2.914-0.814c-6.425-1.829-15.223-4.335-23.047-3.029c-3.772,0.628-6.938,2.598-9.73,4.334 c-3.712,2.309-6.92,4.303-10.479,2.674l-0.416,0.909c1.052,0.481,2.071,0.687,3.071,0.687 C24.716,43.445,27.408,41.77,30.216,40.024z"/>
<path class="demo--graphic" d="M63.359,35.46c5.394,1.583,10.242,1.785,13.451,1.918c0.864,0.036,1.63,0.067,2.28,0.12l0.08-0.997 c-0.662-0.053-1.439-0.085-2.318-0.122c-3.35-0.139-7.936-0.33-13.212-1.879c-1.662-0.487-3.125-0.971-4.539-1.438 C54.77,31.631,51.348,30.5,46,30.5v1c5.188,0,8.541,1.108,12.788,2.512C60.21,34.482,61.681,34.968,63.359,35.46z"/>
<path class="demo--graphic" d="M22.556,39.556c0.288,0.066,0.581,0.097,0.88,0.097c2.237,0,4.75-1.738,7.19-3.426l0.408-0.282 c3.496-2.411,7.376-3.908,11.53-4.45l-0.129-0.991c-4.313,0.562-8.341,2.116-11.97,4.618l-0.408,0.283 c-2.587,1.789-5.261,3.64-7.277,3.177c-0.846-0.194-1.541-0.792-2.126-1.828l-0.871,0.492 C20.504,38.522,21.438,39.299,22.556,39.556z"/>
<path class="demo--graphic" d="M28.109,32.519l0.27,0.963c1.033-0.289,2.151-0.835,3.445-1.469c3.358-1.643,7.959-3.894,15.684-4.013 c6.364-0.101,12.848,2.262,18.051,4.158c3.662,1.335,6.825,2.488,9.253,2.592l0.043-0.999c-2.273-0.098-5.369-1.226-8.954-2.532 C60.621,29.294,54.039,26.891,47.492,27c-7.948,0.122-12.664,2.43-16.107,4.115C30.135,31.726,29.056,32.254,28.109,32.519z"/>
<path class="demo--graphic" d="M26.117,34.708l-0.4-0.916c-0.828,0.363-2.951-0.27-4.095-0.752l-0.389,0.921 c0.273,0.116,2.265,0.934,3.815,0.934C25.446,34.894,25.814,34.841,26.117,34.708z"/>
<path class="demo--graphic" d="M66.738,28.813c6.835,1.988,11.847,2.675,11.896,2.682l0.133-0.991c-0.049-0.006-4.986-0.684-11.75-2.651 L66.738,28.813z"/>
<path class="demo--graphic" d="M57.906,26.681c1.648,0.503,3.204,0.978,4.651,1.304l0.219-0.976c-1.41-0.317-2.948-0.787-4.578-1.284 c-4.293-1.31-9.16-2.795-13.613-2.052l0.164,0.986C48.975,23.954,53.721,25.403,57.906,26.681z"/>
<path class="demo--graphic" d="M34.312,27.73c1.953-0.989,3.797-1.924,5.494-2.417l-0.279-0.96c-1.786,0.519-3.671,1.474-5.667,2.484 c-3.792,1.921-7.71,3.913-11.126,2.921l-0.277,0.961c0.726,0.21,1.463,0.304,2.209,0.304C27.812,31.023,31.106,29.354,34.312,27.73 z"/>
<path class="demo--graphic" d="M41.062,22.496c9.763-1.238,16.609,1.355,21.611,3.25c0.518,0.196,1.014,0.384,1.487,0.557 c4.159,1.525,11.121,2.67,12.753,2.67c0.169,0,0.281-0.013,0.327-0.038l-0.286-0.52L76.94,28c-0.007,0-0.015,0-0.024,0 c-0.757,0-7.797-0.947-12.411-2.637c-0.471-0.173-0.963-0.358-1.477-0.552c-5.102-1.932-12.088-4.577-22.092-3.306 c-10.505,1.334-16.942,5.917-17.211,6.111l0.586,0.811C24.375,28.379,30.809,23.798,41.062,22.496z"/>
<path class="demo--graphic" d="M47.406,18.681c1.612,0.307,3.195,0.605,4.733,0.895c7.468,1.407,13.918,2.623,17.211,3.651 c4.003,1.251,6.254,1.936,6.254,1.936l0.291-0.957c-0.001,0-2.25-0.684-6.246-1.933c-3.35-1.047-9.826-2.267-17.325-3.68 c-1.537-0.29-3.119-0.588-4.73-0.895c-9.493-1.81-17.787-0.016-17.869,0.003l0.217,0.977 C30.022,18.659,38.115,16.909,47.406,18.681z"/>
<path class="demo--graphic" d="M40.009,20.5l-0.018-1c-4.739,0.083-12.607,1.598-12.939,1.662l0.189,0.981 C27.322,22.128,35.356,20.582,40.009,20.5z"/>
<path class="demo--graphic" d="M70.12,20.02c0.895,0,1.629-0.062,2.143-0.204l-0.266-0.964c-3.503,0.969-19.422-2.243-22.771-3.247 c-3.379-1.014-12.306-2.021-15.089-2.067l-0.016,1c2.738,0.045,11.508,1.032,14.817,2.025C51.452,17.316,64.242,20.02,70.12,20.02z "/>
<path class="demo--graphic" d="M62.838,16.457c3.885,0,5.5-0.787,5.598-0.836l-0.45-0.893c-0.034,0.018-3.486,1.651-12.645-0.044 c-9.623-1.78-14.804-3.37-15.306-3.771l-0.736,0.677c0.709,0.772,7.676,2.563,15.86,4.078 C58.357,16.258,60.885,16.457,62.838,16.457z"/>
<path class="demo--graphic" d="M55.938,12.824c3.565,0,6.677-0.636,6.831-0.667l-0.203-0.979c-0.044,0.009-4.388,0.899-8.59,0.575 c-4.143-0.32-9.007-3.154-9.056-3.183l-0.507,0.862c0.207,0.121,5.109,2.979,9.486,3.317 C54.584,12.801,55.269,12.824,55.938,12.824z"/>
</g>
</svg>
<p>
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.
</p>
<p>
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.
</p>
<p>
Can you imagine the trouble of tacking on a different finger? I mean, where do you even go to get replacement fingers?
</p>
</div>
<pre>
<span class="not-important">.element{</span>
shape-outside: ellipse(<span class="fragment highlight">150px 300px</span> at <span class="fragment highlight">50% 50%</span>)
<span class="not-important">}</span>
</pre>
</section>
<section>
<div class="demo demo--shape-left demo--shape-polygon">
<h2 class="code">polygon()</h2>
<svg class="shape" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100px" height="100px" viewBox="0 0 100 100" xml:space="preserve">
<g>
<path class="demo--graphic" d="M84.261,44.556c-0.161,0.218-0.099,0.39-0.025,0.591c0.057,0.157,0.116,0.319,0.039,0.487 c-0.099,0.212-0.338,0.146-0.512,0.097c-0.15-0.042-0.32-0.089-0.434-0.026c-0.075,0.043-0.133,0.136-0.172,0.28 c-0.107,0.388,0.064,0.563,0.217,0.717c0.1,0.102,0.224,0.228,0.154,0.391c-0.063,0.146-0.227,0.158-0.386,0.17 c-0.148,0.012-0.316,0.025-0.399,0.13c-0.07,0.089-0.089,0.244-0.055,0.462c0.048,0.322,0.273,0.39,0.612,0.456 c0.22,0.042,0.467,0.091,0.511,0.326c0.019,0.097-0.014,0.161-0.044,0.197c-0.084,0.104-0.237,0.106-0.414,0.108 c-0.173,0.003-0.369,0.006-0.462,0.103c-0.048,0.051-0.07,0.13-0.067,0.242c0.007,0.239,0.055,0.398,0.143,0.474 c0.099,0.084,0.253,0.064,0.402,0.047c0.157-0.021,0.375-0.047,0.438,0.152c0.037,0.116-0.006,0.254-0.055,0.413 c-0.06,0.194-0.127,0.413-0.034,0.553c0.074,0.112,0.255,0.181,0.531,0.208c0.039-0.01,0.077-0.018,0.117-0.018 c0.092,0,0.222,0.031,0.325,0.18c0.096,0.137,0.245,0.186,0.404,0.238c0.168,0.056,0.358,0.118,0.433,0.31 c0.073,0.189,0.157,0.216,0.236,0.216c0.068,0,0.15-0.023,0.229-0.045c0.086-0.024,0.174-0.049,0.26-0.049 c0.153,0,0.24,0.081,0.286,0.149c0.042,0.062,0.076,0.071,0.107,0.071c0.061,0,0.142-0.036,0.222-0.071 c0.102-0.045,0.208-0.092,0.319-0.092c0.168,0,0.295,0.104,0.378,0.307c0.029-0.022,0.071-0.059,0.103-0.084 c0.117-0.101,0.249-0.214,0.404-0.214c0.048,0,0.095,0.012,0.137,0.033c0.146,0.077,0.286-0.064,0.433-0.205 c0.154-0.147,0.311-0.285,0.487-0.243c0.179-0.063,1.071-1.475,0.974-2.53c-0.094-1.009-0.902-1.747-1.287-1.747 c-0.075,0-0.095,0.032-0.103,0.046c-0.143,0.241-0.024,0.444,0.196,0.783c0.283,0.435,0.671,1.028,0.119,1.926 c-0.089,0.144-0.579,0.861-1.56,0.861l-0.055-0.002c-0.706-0.019-1.786-0.874-2.118-1.947c-0.184-0.589-0.274-1.733,1.166-2.781 c0.367-0.267,0.877-0.407,1.475-0.407c1.274,0,2.635,0.621,3.465,1.583c0.73,0.846,1.027,1.902,0.856,3.059 c-0.364,2.479-3.231,5.234-9.796,6.953c0.167,0.104,0.239,0.309,0.297,0.487c0.089,0.274,0.158,0.443,0.383,0.482 c0.021-0.029,0.008-0.217-0.001-0.341c-0.02-0.282-0.041-0.602,0.146-0.77c0.099-0.089,0.236-0.118,0.41-0.088 c0.745,0.131,0.753,0.644,0.758,0.982c0.004,0.249,0.019,0.329,0.104,0.354c0.168,0.048,0.235-0.037,0.364-0.34 c0.078-0.183,0.158-0.372,0.336-0.429c0.105-0.034,0.226-0.01,0.355,0.07c0.599,0.369,0.53,0.948,0.49,1.294 c-0.008,0.069-0.019,0.158-0.016,0.207c0.03-0.012,0.077-0.039,0.11-0.059c0.208-0.121,0.558-0.324,1.009,0.082 c0.253,0.225,0.135,0.576,0.049,0.833c-0.027,0.082-0.067,0.202-0.068,0.256c0.043-0.015,0.119-0.063,0.172-0.098 c0.18-0.115,0.427-0.273,0.688-0.179c0.085,0.031,0.164,0.086,0.236,0.168c0.528-0.268-0.123-0.77,0.321-1.089 c0.334-0.241,0.939,1.043,1.842,0.237c0.755-0.673-0.146-1.115,0.597-1.687c0.313-0.241,0.809,0.547,1.542-0.097 c0.807-0.707-0.782-1.179-0.184-1.867c0.278-0.319,1.042,0.529,1.729-0.211c0.68-0.733-0.48-0.99-0.119-1.664 c0.191-0.355,1.188,0.073,1.426-0.713c0.317-1.051-1.229-0.861-1.052-1.598c0.088-0.37,1.444,0.224,1.646-0.6 c0.195-0.8-1.05-0.727-1.108-1.422c-0.027-0.332,1.002,0.018,1.049-0.718c0.04-0.634-0.905-0.46-1.033-0.892 c-0.104-0.35,0.295-0.863,0.172-1.159c-0.413-0.99-0.688-0.286-0.921-0.563c-0.116-0.137,0.277-0.903-0.196-1.197 c-0.598-0.371-0.726,0.454-1.052,0.307c-0.291-0.132,0.235-0.951-0.535-1.426c-0.291-0.18-0.925,0.405-1.256,0.371 c-0.296-0.03,0.079-0.921-0.551-1.014c-0.869-0.128-0.893,0.73-1.126,0.665c-0.188-0.053,0.35-0.686-0.592-0.794 c-0.906-0.104-1.066,0.777-1.406,0.83c-0.353,0.057-0.354-0.873-1.129-0.771c-0.552,0.072-0.472,1.401-1.177,1.077 c-0.111-0.051-0.242-0.109-0.365-0.261C84.668,44.111,84.494,44.241,84.261,44.556z"/>
<path class="demo--graphic" d="M87.959,60.406c-0.14-0.051-0.308,0.058-0.457,0.153c-0.154,0.099-0.299,0.192-0.441,0.118 c-0.211-0.11-0.127-0.361-0.053-0.582c0.087-0.26,0.14-0.451,0.025-0.555c-0.31-0.276-0.509-0.162-0.702-0.05 c-0.123,0.072-0.263,0.153-0.398,0.062c-0.133-0.089-0.112-0.264-0.089-0.466c0.039-0.338,0.089-0.76-0.367-1.041 c-0.061-0.038-0.109-0.054-0.139-0.044c-0.062,0.02-0.124,0.165-0.174,0.282c-0.104,0.243-0.261,0.608-0.679,0.488 c-0.285-0.083-0.289-0.37-0.293-0.602c-0.005-0.341-0.009-0.636-0.54-0.729c-0.09-0.016-0.153-0.007-0.189,0.024 c-0.092,0.082-0.073,0.356-0.059,0.556c0.017,0.244,0.031,0.454-0.09,0.563c-0.039,0.035-0.107,0.074-0.216,0.055 c-0.397-0.068-0.504-0.396-0.589-0.66c-0.093-0.288-0.142-0.385-0.328-0.372c-0.182,0.014-0.238,0.161-0.323,0.42 c-0.078,0.236-0.175,0.531-0.479,0.622c-0.283,0.083-0.486-0.134-0.665-0.326c-0.223-0.239-0.348-0.343-0.527-0.257 c-0.225,0.107-0.238,0.292-0.241,0.583c-0.003,0.238-0.007,0.508-0.222,0.696c-0.065,0.057-0.13,0.059-0.173,0.053 c-0.119-0.018-0.188-0.131-0.266-0.262c-0.071-0.117-0.16-0.264-0.264-0.287c-0.054-0.011-0.12,0.01-0.197,0.061 c-0.39,0.262-0.333,0.574-0.278,0.877c0.038,0.213,0.082,0.455-0.122,0.588c-0.206,0.134-0.363-0.062-0.468-0.19 c-0.096-0.118-0.195-0.241-0.327-0.249c-0.116-0.006-0.276,0.079-0.46,0.258c-0.084,0.081-0.044,0.22,0.032,0.439 c0.079,0.231,0.179,0.52-0.029,0.738c-0.19,0.2-0.4,0.099-0.554,0.024c-0.22-0.105-0.394-0.189-0.68,0.285 c-0.13,0.214-0.037,0.383,0.124,0.641c0.107,0.17,0.218,0.347,0.218,0.552c0,0.271-0.23,0.371-0.434,0.458 c-0.209,0.092-0.424,0.184-0.519,0.444l-0.036,0.134c-0.167,0.628-0.26,1.216,0.437,1.5l0.198,0.081l-0.162,0.141 c-0.207,0.178-0.298,0.431-0.249,0.69c0.049,0.261,0.23,0.483,0.464,0.567l0.115,0.041l-0.033,0.118 c-0.042,0.145,0,0.333,0.102,0.467c0.063,0.085,0.179,0.188,0.362,0.188c0.056,0,0.114-0.011,0.175-0.029l0.111-0.035l0.048,0.107 c0.168,0.375,0.301,0.45,0.459,0.45c0.092,0,0.207-0.026,0.364-0.082l0.13-0.046l0.04,0.132c0.056,0.181,0.266,0.218,0.433,0.218 c0.246,0,0.56-0.089,0.761-0.217l0.067-0.043l0.068,0.039c0.087,0.05,0.186,0.075,0.292,0.075c0.373,0,0.825-0.331,0.903-0.823 l0.019-0.117l0.118,0.007l0,0c0.11,0,0.29-0.166,0.457-0.637c0.247-0.701,0.255-1.44,0.153-1.522 c-0.079,0.003-0.267,0.284-0.403,0.489c-0.324,0.486-0.77,1.153-1.458,1.153c0,0,0,0-0.001,0c-0.463,0-0.949-0.299-1.487-0.911 l-0.02-0.024l-0.009-0.029c-0.324-1.226,0.253-2.448,0.902-3.188l0,0c0.074-0.09,0.147-0.182,0.22-0.274 c0.759-0.954,1.543-1.94,3.297-2.032c0.631-0.035,1.329,0.256,1.854,0.771c0.406,0.4,0.641,0.874,0.633,1.271l0.002,0.011 c0,0.001,0,0.002,0,0.004c-0.001,0,0,0.001,0,0.001h-0.001c0.019,3.907-2.147,7.888-5.405,9.984 c0.711,0.428,3.127,1.725,4.121,2.177c0.392-0.226,0.733-0.731,0.459-1.806c-0.094-0.371,0.889,0.078,1.512-0.53 c0.452-0.441-0.621-0.914-0.237-1.661c0.174-0.338,0.883,0.516,1.485-0.237c0.449-0.562-0.71-0.873-0.297-1.604 c0.164-0.293,1.021,0.237,1.426-0.416c0.48-0.775-0.946-0.979-0.772-1.299c0.437-0.807,1.01-0.065,1.366-0.898 c0.273-0.64-1.06-0.505-0.934-0.864s0.994-0.224,1.112-0.563c0.311-0.888-0.678-0.545-0.625-1.167 c0.029-0.348,0.602-0.243,0.684-0.675c0.122-0.635-0.995-0.335-0.831-1.052c0.12-0.526,0.484-0.29,0.541-1.029 C88.165,60.572,88.064,60.444,87.959,60.406z"/>
<path class="demo--graphic" d="M98.529,73.014c-0.357-0.768-4.635,6.839-15.74,1.734c0.069-0.003,0.155-0.013,0.246-0.034 c-1.238-0.592-3.742-1.945-4.099-2.195c-3.378-2.016-7.466-3.082-11.822-3.082c-2.821,0-5.654,0.451-8.192,1.305l-0.062,0.021 l-0.003-0.002c-0.758,0.224-2.236,0.593-3.669,0.95c-1.521,0.38-2.958,0.739-3.493,0.91v-0.001 c-1.163,0.463-2.242,0.757-3.379,1.063c-0.693,0.188-1.406,0.38-2.189,0.623c2.729,0.667,4.706,1.609,5.758,2.786 c0.509-0.12,1.292-0.456,1.437-1.392c0.887,0.647,1.621,0.303,2.55-0.601c0.215,0.14,0.734-0.04,1.024,0.326 c0.189,0.238,0.301,0.782,0.818,0.862c1.275,0.198,1.226-0.759,1.723-0.712c0.45,0.041,0.214,1.57,0.713,1.782 c1.96,0.831,2.069-1.021,2.673-0.724c0.786,0.388-0.354,1.313,1.426,1.733c0.97,0.229,0.892-1.367,1.664-1.129 c0.662,0.203-0.729,1.784,1.069,1.782c0.941-0.001,1.244-1.042,1.723-1.069c0.476-0.027-0.051,1.07,1.366,1.069 c0.988-0.001,0.975-1.168,1.427-1.188c0.438-0.021-0.055,1.189,1.188,1.188c1.166-0.001,0.88-1.417,1.307-1.426 c0.447-0.01,0.203,1.21,1.07,1.01c1.012-0.234,0.979-1.434,1.307-1.426c0.434,0.01,0.489,0.981,1.366,0.713 c1.216-0.372,0.356-1.258,0.943-1.582c0.76,0.894,1.415,0.687,1.946,0.1c-0.965-0.65-2.969-1.645-4.131-2.221 c-0.531-0.264-0.788-0.391-0.872-0.443l-0.147,0.156c-0.388,0.413-2.688,0.749-5.127,0.749c-1.874,0-5.263-0.2-6.907-1.538 l-0.396-0.321l0.501,0.09c0.929,0.169,1.141-0.016,1.724-0.531l0.116-0.103l0.08,0.043c0.177,0.094,0.413,0.144,0.684,0.144 c0.518,0,1.065-0.189,1.274-0.441l0.089-0.106l0.102,0.096c0.587,0.551,1.175,0.607,1.745,0.16l0.119-0.094l0.075,0.132 c0.153,0.266,0.39,0.412,0.666,0.412c0.291,0,0.592-0.157,0.826-0.432l0.155-0.183l0.069,0.229c0.118,0.388,0.477,0.446,0.68,0.446 c0.214,0,0.451-0.064,0.67-0.179l0.115-0.063l0.062,0.116c0.261,0.489,0.721,0.57,1.326,0.273l0.126-0.063l0.054,0.132 c0.266,0.665,0.528,0.729,1.095,0.812l0.219,0.032l0.14-0.194c0.05,0.035,0.423,0.221,0.854,0.435 c1.187,0.588,3.24,1.607,4.216,2.277C92.146,81.38,98.928,73.87,98.529,73.014z"/>
<path class="demo--graphic" d="M79.607,63.495c0.104,0,0.221-0.016,0.331-0.031c0.531-0.079,0.669-0.499,0.789-0.87 c0.083-0.253,0.161-0.492,0.384-0.521c0.285-0.035,0.348,0.239,0.397,0.453c0.094,0.398,0.197,0.646,0.735,0.571 c0.757-0.105,0.821-0.631,0.873-1.053c0.032-0.263,0.063-0.511,0.29-0.555l0.122-0.023l0.03,0.12c0.187,0.75,0.507,0.75,0.612,0.75 c0.078,0,0.152-0.017,0.213-0.031c-0.031-0.305-0.233-0.672-0.551-0.984c-0.473-0.465-1.09-0.723-1.656-0.697 c-1.635,0.086-2.382,1.025-3.104,1.935c-0.059,0.073-0.117,0.146-0.176,0.22C79.123,63.437,79.362,63.495,79.607,63.495z"/>
<path class="demo--graphic" d="M48.288,77.417c-0.25,0.104-0.669,0.172-1.024,0.022c-0.174-0.072-0.312-0.189-0.404-0.343 c-0.482,0.194-1.104,0.212-1.563-0.256c-0.489,0.28-0.934,0.277-1.385-0.008c-0.369,0.252-0.802,0.357-1.202,0.29 c-0.331-0.056-0.614-0.222-0.828-0.482c-0.233,0.179-0.537,0.271-0.869,0.258c-0.384-0.015-0.751-0.165-1.006-0.407 c-0.262,0.174-0.63,0.26-0.992,0.224c-0.25-0.024-0.458-0.102-0.601-0.221c-0.445,0.33-1.283,0.473-1.855,0.021 c-0.292,0.324-0.822,0.442-1.259,0.442c-0.005,0-0.011,0-0.017,0c-0.288-0.002-0.622-0.058-0.855-0.195 c-0.089,0.349-0.408,0.628-0.661,0.796c0.044,0.354,0.368,0.73,1.015,0.632c-0.119,0.712,0.712,1.841,1.722,1.603 c0.297,0.595,1.901,0.892,2.555,0.298c0.772,0.594,1.961,0.594,3.089-0.476c1.01,0.714,2.258,0.476,2.463-0.557 c0.982,0.26,2.185,0.206,3.014-0.334c0.733-0.003,1.558-0.078,1.969-0.394C49.118,77.834,48.436,77.354,48.288,77.417z"/>
<path class="demo--graphic" d="M45.396,74.542l-0.038,0.012l-0.039-0.011c-0.771-0.214-1.492-0.407-2.214-0.56 c-0.949-0.141-1.959-0.256-3.028-0.345c-0.211-0.002-0.423-0.003-0.645,0.005l-0.126,0.004L39.3,73.578 c-1.927-0.135-4.028-0.188-6.278-0.153c-4.381,0.466-8.092,1.725-10.553,2.56c-1.401,0.477-2.414,0.819-2.965,0.819l0,0 c-0.122,0-0.221-0.016-0.303-0.049c-0.089-0.037-0.146-0.114-0.154-0.211c-0.097-1.161,9.274-9.045,16.517-13.537l0.394-0.245 l-0.207,0.415c-1.453,2.906-2.613,8.225-2.542,9.981c2.173-0.026,4.208,0.027,6.083,0.16c-0.066-2.668,2.054-6.22,3.558-7.83 c0.504-0.539,1.25-1.187,1.736-1.071c0.292,0.068,0.652,0.245,1.07,0.523c0.079,0.053,0.104,0.12,0.112,0.166 c0.025,0.152-0.093,0.307-0.243,0.502c-0.358,0.467-0.597,0.86-0.145,1.327c0.32,0.332,0.649,0.493,1.008,0.493 c0.249,0,0.479-0.074,0.682-0.141c0.323-0.105,0.592-0.152,0.76,0.017c0.179,0.18,0.091,0.413,0.006,0.64 c-0.13,0.344-0.276,0.734,0.181,1.229c0.121,0.132,0.288,0.196,0.511,0.196c0.269,0,0.571-0.095,0.814-0.17 c0.349-0.108,0.574-0.154,0.676-0.018c0.093,0.124,0.029,0.293-0.058,0.525c-0.154,0.41-0.387,1.03,0.137,1.626 c0.127,0.145,0.394,0.225,0.752,0.225c0.389,0,0.789-0.094,0.968-0.183l0.273-0.134l-0.089,0.29 c-0.061,0.194-0.032,0.427-0.01,0.612c0.005,0.043,0.008,0.076,0.012,0.112c0.69-0.193,1.877-0.489,3.12-0.801 c1.313-0.328,2.665-0.665,3.46-0.89c-1.856-1.413-5.556-6.08-4.732-7.742c0.284-0.574,1.586-0.855,3.979-0.859 c0.466,0,0.572,0.188,0.662,0.434c0.075,0.204,0.145,0.396,0.712,0.481c0.418,0.063,0.609-0.127,0.829-0.354 c0.19-0.196,0.406-0.418,0.785-0.418c0.111,0,0.228,0.019,0.355,0.058c0.598,0.175,0.618,0.53,0.634,0.815 c0.018,0.308,0.031,0.551,0.697,0.705c0.065,0.015,0.126,0.022,0.181,0.022c0.271,0,0.388-0.174,0.559-0.455 c0.166-0.276,0.354-0.589,0.793-0.589c0.08,0,0.169,0.012,0.261,0.034c0.626,0.151,0.623,0.568,0.62,0.874 c-0.003,0.343-0.005,0.592,0.678,0.658c0.465,0.047,0.598-0.202,0.758-0.526c0.167-0.336,0.375-0.754,1.049-0.754l0.05,0.001 c0.688,0.019,0.71,0.498,0.727,0.85c0.017,0.362,0.027,0.602,0.514,0.602c0.737,0,0.84-0.342,0.949-0.705 c0.088-0.29,0.187-0.62,0.64-0.642c0.645-0.036,0.77,0.387,0.868,0.722c0.104,0.349,0.186,0.625,0.725,0.625 c0.616,0,0.764-0.337,0.919-0.692c0.125-0.286,0.267-0.61,0.677-0.648c0.39-0.034,0.549,0.331,0.685,0.652 c0.119,0.277,0.207,0.459,0.345,0.459c0.088,0,0.254-0.066,0.547-0.365c0.104-0.457,0.443-0.607,0.694-0.716 c0.2-0.087,0.275-0.129,0.275-0.218c0-0.13-0.086-0.267-0.178-0.413c-0.153-0.245-0.346-0.552-0.127-0.915 c0.38-0.626,0.712-0.534,1.02-0.385c0.164,0.078,0.199,0.083,0.25,0.03c0.091-0.096,0.049-0.242-0.03-0.472 c-0.078-0.228-0.177-0.51,0.034-0.714c0.241-0.235,0.458-0.342,0.658-0.332c0.247,0.016,0.402,0.207,0.516,0.348 c0.042,0.05,0.104,0.126,0.131,0.136c0.042-0.035,0.031-0.13-0.004-0.322c-0.057-0.313-0.142-0.785,0.391-1.142 c0.14-0.094,0.274-0.127,0.4-0.099c0.214,0.048,0.34,0.256,0.432,0.407c0.021,0.036,0.05,0.082,0.072,0.114 c0.096-0.112,0.099-0.278,0.101-0.469c0.003-0.209,0.006-0.457,0.165-0.646c-1.659,0.319-3.503,0.582-5.552,0.77l-0.001,0.006 l-0.089,0.002c-0.655,0.06-1.332,0.111-2.03,0.155l-0.914,0.058l0.861-0.313c0.332-0.119,1.583-0.153,1.969-0.16 c0.064-0.219,0.239-0.71,0.513-0.843c0.215-0.104,0.382-0.151,0.524-0.151c0.227,0,0.354,0.121,0.476,0.238 c0.17,0.162,0.367,0.349,0.946,0.324c0.314-0.014,0.522-0.081,0.634-0.206c0.147-0.164,0.128-0.443,0.108-0.739 c-0.029-0.44-0.066-0.987,0.494-1.285c0.107-0.058,0.206-0.086,0.301-0.086c0.314,0,0.46,0.297,0.601,0.584 c0.171,0.347,0.303,0.573,0.576,0.573c0.09,0,0.195-0.024,0.313-0.074c0.445-0.189,0.383-0.516,0.245-1.033 c-0.117-0.438-0.25-0.935,0.238-1.222c0.122-0.072,0.231-0.107,0.334-0.107c0.318,0,0.449,0.321,0.564,0.605 c0.13,0.319,0.229,0.527,0.437,0.527c0.166,0,0.398-0.121,0.691-0.36c0.573-0.471,0.373-0.784,0.16-1.116 c-0.147-0.232-0.332-0.521-0.063-0.79c0.18-0.18,0.334-0.265,0.484-0.265c0.2,0,0.326,0.146,0.438,0.275 c0.108,0.126,0.182,0.202,0.276,0.202c0.079,0,0.224-0.054,0.467-0.309c0.471-0.49,0.182-0.878-0.051-1.188 c-0.129-0.172-0.25-0.334-0.143-0.481c0.001-0.002,0.103-0.136,0.249-0.261c-0.186-0.057-0.322-0.14-0.403-0.26 c-0.163-0.244-0.072-0.54,0.001-0.777c0.027-0.087,0.068-0.219,0.056-0.257c-0.008,0.011-0.097,0.021-0.156,0.028 c-0.177,0.022-0.42,0.052-0.605-0.107c-0.148-0.127-0.225-0.346-0.234-0.666c-0.005-0.183,0.042-0.328,0.141-0.431 c0.169-0.176,0.435-0.18,0.647-0.183c0.062-0.001,0.147-0.002,0.195-0.012c-0.038-0.051-0.168-0.076-0.294-0.101 c-0.296-0.059-0.742-0.145-0.822-0.675c-0.045-0.298-0.01-0.515,0.108-0.664c0.155-0.194,0.403-0.214,0.585-0.228 c0.047-0.005,0.115-0.01,0.152-0.019c-0.019-0.027-0.057-0.065-0.087-0.097c-0.161-0.163-0.432-0.438-0.283-0.972 c0.06-0.216,0.156-0.359,0.296-0.438c0.208-0.118,0.443-0.053,0.633,0c0.072,0.021,0.18,0.052,0.212,0.041 c0.021-0.06-0.007-0.146-0.057-0.282c-0.077-0.214-0.185-0.505,0.062-0.836c0.235-0.319,0.438-0.486,0.618-0.56 c-0.039-0.088-0.077-0.188-0.109-0.313c-0.067-0.262-0.753,0.024-1.04-0.139c-0.309-0.174,0.125-0.705-0.497-1.201 c-0.246-0.196-0.829,0.438-1.058,0.188c-0.425-0.466,0.367-0.773-0.189-1.317c-0.579-0.565-1.146,0.43-1.378,0.317 c-0.276-0.136-0.024-0.92-0.285-1.089c-0.677-0.438-0.55,0.671-1.612,0.42c-0.265-0.063,0.084-1.059-0.468-1.192 c-0.744-0.182-0.644,0.669-1.327,0.606c-0.62-0.058-0.276-0.934-1.012-0.963c-0.982-0.04-0.21,0.991-0.929,1.01 c-0.344,0.009-0.532-0.817-1.143-0.656c-0.63,0.165-0.114,0.724-0.58,1.071c-0.354,0.265-0.968-0.341-1.247-0.06 c-0.606,0.613-0.112,0.756-0.237,1.188c-0.126,0.434-0.601,0.108-0.756,0.842c-0.171,0.81,0.645,0.387,0.696,0.974 c0.032,0.376-0.95,0.314-0.646,1.032c0.207,0.485,0.637,0.014,0.942,0.42c0.162,0.216-0.435,0.666-0.091,0.971 c0.326,0.288,0.695-0.159,0.981,0.039c0.251,0.174,0.136,0.688,0.713,0.772c0.355,0.052,0.302-0.18,0.653-0.238 c0.121-0.019,0.247,0.38,0.651,0.327c0.309-0.041,0.194-0.235,0.359-0.268c2.183-0.421,2.003-2.903,1.516-2.922 c-0.519-0.019-0.705,2.205-2.459,1.734c-1.843-0.495-1.427-3.992,1.334-3.729c2.062,0.197,6.275,2.884,5.805,6.981 c-0.523,4.573-9.3,9.188-22.691,5.544c0.318-0.373,0.88-0.668,1.601-0.912c0.321-0.108,0.278,0.743,1.188,0.649 c0.77-0.079,0.809-0.84,1.022-1.192c0.22-0.361,0.591-0.284,0.85-0.148c0.358,0.188-0.217,1.257,1.083,0.914 c1.122-0.297,0.928-0.83,1.093-1.24c0.33-0.817,0.803-0.603,1.214-0.176c0.184,0.191,0.085,0.973,0.976,0.628 c1.362-0.528,0.507-2.196,0.688-2.232c0.349-0.071,0.588,1.392,1.626,0.985c0.437-0.171,0.381-0.738,0.737-0.886 c0.696-0.292,0.693-1.147,0.854-1.608c0.163-0.469,0.339-0.79,0.067-1.186c-2.553-3.728-3.274-4.332-4.516-4.387 c-7.416-0.331-9.357-4.351-7.87-7.069c2.259-4.129,5.163-0.327,5.428-0.614c0.278-0.301-1.709-3.429-5.136-2.188 c-0.269,0.098-0.25,0.411-0.397,0.709c-0.113,0.227-0.833-0.098-0.943,0.154c-0.086,0.194,0,0.605-0.076,0.818 c-0.078,0.218-0.676,0.034-0.667,0.278c0.013,0.353,0.153,0.77,0.095,1.022c-0.051,0.221-0.799,0.319-0.815,0.551 c-0.039,0.551,0.487,0.685,0.455,0.908c-0.036,0.253-0.729,0.415-0.753,0.67c-0.024,0.252,0.613,0.71,0.602,0.961 c-0.014,0.298-0.348,0.511-0.343,0.805c0.004,0.275,0.493,0.558,0.514,0.825c0.018,0.23-0.409,0.408-0.304,0.605 c0.477,0.888,0.916,0.657,1.004,0.985c0.082,0.302-0.141,0.504,0.304,0.93c0.524,0.501,0.825-0.039,1.062,0.227 c0.279,0.315,0.054,0.945,0.417,1.137c0.525,0.279,0.729-0.454,1.061-0.379c0.296,0.066,0.066,0.952,0.627,1.092 c0.675,0.167,0.831-0.476,1.212-0.434c0.35,0.039,0.289,0.938,0.871,1.237c0.528,0.271,0.735-0.695,0.985-0.606 c0.623,0.222,0.222,0.934,0.854,0.966c0.543,0.029,0.742-0.771,1.027-0.752c0.243,0.015,1.364,0.556,0.603,1.15 c-3.39,2.662-14.22,2.936-13.953,0.679c0.128-1.085,1.674-1.755,1.63-3.986c-0.019-0.961-1.718-2.2-1.718-2.2 c5.788-11.061,2.33-13.598,3.75-16.053c0.594-0.04,0.899-0.521,0.886-1.064c0.539,0.193,0.89,0.018,0.938-0.495 c0.52,0.25,0.914,0.295,1.269-0.145c0.302,0.352,0.651,0.439,0.983,0.11c0.281,0.372,0.5,0.416,0.821,0.168 c0.466,0.379,0.642,0.467,0.879,0.206c0.375,0.305,0.638,0.436,0.996,0.215c0.386,0.309,0.648,0.353,0.915,0.122 c1.201,0.088,2.313-0.178,3.178-1.391c0.37-0.519-1.214,0.4-3.053,0.342c-2.164-0.067-6.806-3.706-9.86,0.19 c-2.797,3.569,0.453,3.32-5.791,13.114c0,0-11.57-27.771-25.612-16.892c-9.457,7.327-5.115,25.639,9.668,26.572 c-7.902,8.258-27.863,3.812-27.603-2.033c0.119-2.662,2.369-2.948,4.174-2.179c2.482,1.06,3.595,3.869,4.268,3.662 c0.64-0.196-0.817-4.086-3.747-5.881c-0.396-0.243-0.791-0.308-1.053-0.463c-0.813-0.48-0.873-0.018-1.644-0.352 C6.686,39.421,6.315,40.019,5.78,39.9c-0.545-0.121-0.88,0.512-1.824,0.744c-0.398,0.098-0.24,0.866-0.778,1.013 c-0.807,0.22-0.716,1.17-0.958,1.431C2.05,43.27,1.651,43.45,1.545,44.183c-0.107,0.74,0.697,0.831,0.592,1.172 c-0.179,0.579-0.734-0.154-0.68,1.266c0.042,1.104,0.87,0.51,0.926,1.032c0.035,0.328-1,0.522-0.459,1.593 c0.384,0.762,0.994,0.07,1.246,0.441c0.187,0.273-0.872,0.676-0.198,1.656c0.592,0.86,1.299-0.089,1.57,0.279 c0.249,0.339-1.023,1.062-0.072,1.944c1.045,0.97,1.76-0.391,2.256-0.12c0.666,0.364-0.78,0.94,0.847,1.938 c0.917,0.563,1.544-1.029,1.884-0.805c0.33,0.218-0.156,1.16,0.776,1.722c0.953,0.573,1.135-0.918,1.603-0.644 c0.564,0.332-0.328,1.151,0.829,1.826c1.156,0.675,1.097-0.888,1.728-0.589c0.644,0.304,0.042,1.016,1.896,1.442 c0.479,0.111,0.804-1.442,1.257-1.315c0.627,0.176-0.13,1.388,1.851,1.931c0.662,0.181,0.795-0.988,1.456-0.936 c0.519,0.04,0.619,0.76,1.889,0.567c1.152-0.175,0.563-0.975,1.381-1.143c0.415-0.084,0.704,0.829,1.815,0.404 c0.883-0.337,0.519-0.965,1.276-1.282c0.563-0.237,0.869,0.604,1.648,0.225c0.88-0.431,0.542-1.706,1.163-1.693 c0.235,0.005,0.526,0.333,0.723,0.356c0.704,0.084,0.985-0.393,1.25-0.703c0.632-0.743,3.57-0.409,3.57-0.409 c-2.226,1.767-10.474,8.265-16.529,14.702c-0.559,0.593-1.946,0.409-1.904,1.96c0.017,0.597-1.557,0.273-1.519,1.148 c0.05,1.136-0.718,0.696-1.038,1.444c-0.154,0.358,0.069,0.787-0.117,1.105c-0.281,0.481-1.05,0.798-1.215,1.273 c-0.323,0.933,0.259,0.896,0.146,1.386c-0.165,0.706-0.945,0.899-0.749,2.124c0.035,0.221,0.49,0.224,0.57,0.43 c0.161,0.417-0.437,0.687,0.344,1.372c0.344,0.302,0.784-0.115,1.082,0.231c0.844,0.984,2.106,0.186,2.614,0.477 c0.826,0.472,2.105,0.191,2.673-0.772c0.603,0.513,2.139,0.811,2.792-0.773c0.772,0.299,2.02,0,2.436-0.949 c0.712,0.296,1.972,0.059,2.495-1.01c0.891,0.296,1.901,0.296,2.317-0.832c0.95,0.297,1.694,0.261,2.228-0.457 c0.354,0.206,0.894,0.268,1.303,0.216c0.254-0.148,0.745-0.507,0.684-0.914l-0.098-0.653l0.34,0.566 c0.098,0.163,0.452,0.279,0.859,0.282c0.532,0.002,0.975-0.169,1.143-0.441l0.087-0.141l0.117,0.118 c0.494,0.493,1.349,0.32,1.698-0.011l0.104-0.1l0.089,0.113c0.09,0.114,0.283,0.196,0.516,0.22 c0.337,0.032,0.689-0.062,0.895-0.238l0.099-0.085l0.086,0.1c0.204,0.237,0.55,0.393,0.902,0.405 c0.313,0.009,0.595-0.088,0.787-0.279l0.113-0.113l0.089,0.132c0.18,0.269,0.437,0.438,0.742,0.488 c0.357,0.06,0.75-0.048,1.078-0.295l0.076-0.058l0.078,0.056c0.42,0.295,0.798,0.295,1.265-0.004l0.098-0.062l0.074,0.088 c0.403,0.481,1.009,0.429,1.441,0.219l0.126-0.061l0.053,0.129c0.061,0.149,0.169,0.258,0.322,0.322 c0.264,0.11,0.604,0.066,0.823-0.023c0.354-0.148,1.177,0.521,1.657,1.043c0.715,0.297,1.193,1.261,0.383,1.813 c-1.208,0.823-3.401-0.57-3.141-0.012c0.942,2.011,6.698,1.556,4.47-2.87c0.008-0.001,0.018-0.003,0.026-0.004 c-1.097-1.146-3.132-2.055-5.923-2.689C45.571,74.485,45.486,74.511,45.396,74.542z M45.567,48.458 c1.179-0.026,2.031,1.507,1.838,2.389c-0.169,0.776-0.958,1.324-1.838,1.333c-0.778,0.008-1.408-0.678-1.536-1.37 C43.759,49.342,44.761,48.477,45.567,48.458z"/>
<path class="demo--graphic" d="M80.906,58.146c0.168,0.182,0.278,0.289,0.397,0.253c0.162-0.049,0.224-0.202,0.305-0.452 c0.039-0.118,0.084-0.249,0.155-0.359c-0.385,0.094-0.778,0.185-1.187,0.27C80.705,57.932,80.813,58.047,80.906,58.146z"/>
<path class="demo--graphic" d="M45.918,50.822c0.262-0.219-0.613-1.27-1.051-1.182C44.479,49.717,45.655,51.041,45.918,50.822z"/>
<line class="demo--graphic" stroke="#FFFFFF" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x1="33.362" y1="77.484" x2="33.362" y2="77.484"/>
<path class="demo--graphic" d="M75.755,73.52l-0.14,0.194l-0.219-0.032c-0.566-0.082-0.829-0.146-1.095-0.812l-0.054-0.132l-0.126,0.063 c-0.605,0.297-1.065,0.216-1.326-0.273l-0.062-0.116l-0.115,0.063c-0.219,0.114-0.456,0.179-0.67,0.179 c-0.203,0-0.562-0.059-0.68-0.446L71.2,71.979l-0.155,0.183c-0.234,0.274-0.535,0.432-0.826,0.432 c-0.276,0-0.513-0.146-0.666-0.412l-0.075-0.132l-0.119,0.094c-0.57,0.447-1.158,0.391-1.745-0.16l-0.102-0.096l-0.089,0.106 c-0.209,0.252-0.757,0.441-1.274,0.441c-0.271,0-0.507-0.05-0.684-0.144l-0.08-0.043l-0.116,0.103 c-0.583,0.516-0.795,0.7-1.724,0.531l-0.501-0.09l0.396,0.321c1.645,1.338,5.033,1.538,6.907,1.538 c2.439,0,4.739-0.336,5.127-0.749l0.147-0.156c0.084,0.053,0.341,0.18,0.872,0.443c1.162,0.576,3.166,1.57,4.131,2.221 c0.178,0.12,0.324,0.229,0.419,0.321l0.183-0.188c-0.094-0.091-0.232-0.197-0.4-0.312c-0.976-0.67-3.029-1.689-4.216-2.277 C76.178,73.74,75.805,73.555,75.755,73.52z"/>
</g>
</svg>
<p>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.
</p>
</div>
<pre>
<span class="not-important">.element{</span>
shape-outside: polygon(<span class="fragment highlight">111px 239px</span>, 23px 222px, 4px 175px ...)
<span class="not-important">}</span>
</pre>
</section>
<section data-background="resources/screenshots/alice-1.jpg"></section>
<section data-background="resources/screenshots/alice-2.jpg"></section>
<section data-background="resources/screenshots/alice-3.jpg"></section>
<section data-background="resources/screenshots/alice-4.jpg"></section>
<section data-background="resources/screenshots/alice-5.jpg"></section>
<section data-background="resources/screenshots/alice-1-shape-inside.jpg"></section>
<section data-state="workaround">
<h2><code>shape-inside</code><br>workaround</h2>
<pre>
<span class="fragment highlight"><div class="left"></span>
<span class="fragment highlight"><div class="right"></span>
<span class="not-important">Alice was beginning to get very tired ...</span>
.left{
<span class="fragment highlight">float: left;</span>
shape-outside: polygon(0 0, ...);
}
.right{
<span class="fragment highlight">float: right;</span>
shape-outside: polygon(50% 0, ...);
}
</pre>
</section>
<section data-background="resources/screenshots/alice-1-shape-inside.jpg"></section>
<section data-background="resources/screenshots/alice-1-shape-outside.jpg"></section>
<section>
<a href="http://webplatform.adobe.com/Demo-for-Alice-s-Adventures-in-Wonderland/"></a>
</section>
<section>
<a href="https://chrome.google.com/webstore/detail/css-shapes-editor/nenndldnbcncjmeacmnondmkkfedmgmp" target="_blank" title="CSS Shapes Editor extension for Chrome Devtools">
<img src="resources/screenshots/css-shapes-editor-chrome.png" alt="">
</a>
<aside class="notes">
Interactive editor, selected element <br>
DevTools Chrome, Opera
</aside>
</section>
<section>
<h2>Tooling</h2>
<ul class="list list--horizontal">
<li>
<a href="https://chrome.google.com/webstore/detail/css-shapes-editor/nenndldnbcncjmeacmnondmkkfedmgmp" target="_blank" title="CSS Shapes Editor for Chrome">
<img src="resources/logos/chrome.png" alt="Logo of Chrome browser">
</a>
</li>
<li>
<a href="https://addons.opera.com/en/extensions/details/css-shapes-editor/" target="_blank" title="CSS Shapes Editor for Opera">
<img src="resources/logos/opera.png" alt="Logo of Opera browser">
</a>
</li>
<li>
<a href="http://blog.brackets.io/2014/04/17/css-shapes-editor/" target="_blank" title="CSS Shapes Editor for Brackets">
<img src="resources/logos/brackets.png" alt="Logo of Brackets code editor" />
</a>
</li>
</ul>
</section>
<section>
<h2>Browser Support</h2>
<ul class="list list--horizontal">
<li>
<img src="resources/logos/chrome.png" alt="Logo of Chrome browser" />
</li>
<li>
<img src="resources/logos/opera.png" alt="Logo of Opera browser" />
</li>
<li>
<img src="resources/logos/safari.png" alt="Logo of Safari 8 browser" />
</li>
<li class="muted">
<img src="resources/logos/firefox.png" alt="Logo of Firefox browser" />
</li>
<li class="muted">
<img src="resources/logos/ie.png" alt="Logo of Internet Explorer browser" />
</li>
</ul>
<a href="http://blogs.adobe.com/webplatform/2014/05/12/css-shapes-polyfill/" target="_blank" class="fragment">
<img src="resources/screenshots/css-shapes-polyfill.png" alt="Screenshot of GitHub repository for CSS Shapes Polyfill script">
</a>
</section>
<section data-background="resources/moto360.jpg">
<aside class="notes">
New screens, new form factors
</aside>
</section>
<section id="css-masking">
<h1>CSS Masking</h1>
<img src="resources/css-masking.svg" alt="">
<aside class="notes">
- hide parts of the content
- fundamental concept in design surfaces
- missing from the web
</aside>
</section>
<section id="clipping">
<div class="clip-vs-mask fragment explain-clip">
<div class="clip-concept">
<svg width="450" height="450">
<title id="title">Illustration of the clip-path property with an animation of scissors cutting along a dotted line.</title>
<g transform="translate(204, 204) scale(2)">
<text y="7" text-anchor="middle" class="label cp-label">clipping</text>
<circle r="100" cx="0" cy="0" id="dash" class="cp-shape cp-shape--dash" />
<circle r="100" cx="0" cy="0" id="circle" class="cp-shape cp-shape--cutout" />
<g width="100" height="100" class="cp-scissors">
<g transform="scale(0.45) translate(180 -60)">
<path d="M80.339,0.695c-6.391-2.339-14.008,1.462-16.283,7.897c-3.294,7.356-4.984,17.072-15.635,25.413l-4.474,3.504l-3.995-3.143
C29.321,26.004,27.654,16.283,24.375,8.919C22.115,2.479,14.505-1.34,8.109,0.985c-6.463,1.905-9.367,9.668-7.6,15.855
c1.323,6.312,7.748,11.555,14.051,10.113c6.564-1.5,5.376-3.651,7.861-4.359c3.177-0.906,5.182,8.649,14.531,21.74l0.276,0.383
L11.96,80.778C8.797,85.997,6.899,92.941,11,99.552l33.031-45.436L77.23,100c4.116-6.603,2.232-13.551-0.92-18.778l-25.451-36.5
l0.542-0.746c9.378-13.067,11.405-22.622,14.58-21.708c2.482,0.715,1.289,2.862,7.851,4.378c6.3,1.456,12.735-3.773,14.072-10.082
C89.685,10.383,86.798,2.612,80.339,0.695z M21.739,14.741c0.001,7.334-9.644,10.664-15.081,5.158
c-3.721-3.771-3.74-11.542,1.342-14.23C14.041,1.831,22.14,7.993,21.739,14.741z M81.748,19.61
c-5.446,5.494-15.086,2.143-15.067-5.191c-0.387-6.746,7.726-12.894,13.757-9.042C85.514,8.077,85.478,15.848,81.748,19.61z"/>
</g>
</g>
</g>
</svg>
</div>
<div class="mask-concept">
<div class="mk-container">
<div class="mk-shape mk-shape--base">
<div class="label mk-label">Masking</div>
</div>
<div class="mk-shape mk-shape--top">
<div class="label mk-label">Masking</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="clip-surface clip--circle" data-js-clip-trigger data-js-clip-output='#clip-output-circle'></div>
<pre>
.element{
-webkit-clip-path: <span id="clip-output-circle">circle(200px at 50% 50%)</span>
}
</pre>
</section>
<section>
<div class="clip-surface clip--ellipse" data-js-clip-trigger data-js-clip-output='#clip-output-ellipse'></div>
<pre>
.element{
-webkit-clip-path: <span id="clip-output-ellipse">ellipse(150px 250px at 50% 50%)</span>;
}
</pre>
</section>
<section>
<div class="clip-surface clip--polygon" data-js-clip-trigger data-js-clip-output='#clip-output-polygon'></div>
<pre>
.element{
<span class="fragment highlight">-webkit-</span>clip-path: <span id="clip-output-polygon">polygon(nonzero, 955px 405px, 483px 212px, 1px 400px, 0px 500px, 956px 500px)</span>;
}
</pre>
</section>
<section id="svg" data-state="svg-scene" data-transition="none">
<h1>SVG</h1>
<ul>
<li>Scalable</li>
<li>Scriptable</li>
<li>Small footprint</li>
<li>Decent support</li>
</ul>
<svg class="demo fragment" version="1.1" viewBox="0 0 50.4 50.4">
<g class="deer demo--graphic">
<g class="deer-body">
<path d="M47.968,21.49c-0.655-0.638-1.691-0.993-2.61-0.993l-23.359,1.611l-2.856-4.142l-1.373,4.283 c-0.439,1.405-0.97,3.104-2.633,3.104h-0.708l2.842,7.05l4.571,3.409v12.324c0,0.599,0.184,1.186,0.623,1.622 c0.438,0.44,0.805,0.603,1.441,0.603c0.6,0,1.006-0.162,1.443-0.603c0.443-0.437,0.57-1.023,0.57-1.622v-13.28h8.56l3.422,3.342 l-5.091,8.978c-0.199,0.357-0.312,0.739-0.312,1.14c0,0.635,0.049,0.885,0.42,1.383c0.268,0.361,0.931,0.738,1.527,0.7 c0.964-0.071,1.393-0.423,1.87-1.18l5.271-9.098v-3.949l2.999,3.501v8.387c0,0.642,0.2,1.246,0.64,1.689 c0.443,0.444,0.869,0.603,1.509,0.603c0.503,0,1.007-0.19,1.342-0.593c0.399-0.479,0.572-1.052,0.572-1.695V39.15l-2.096-3.372 v-4.033l2.046,2.571c0.037,0.121,0.098,0.178,0.179,0.178c0.202,0,0.297-0.077,0.297-0.237V24.005 C49.074,22.898,48.632,22.126,47.968,21.49z"/>
<path class="deer-scarf fragment" d="M92.146,23.312C85.153,8.94,56.323-0.898,42.886,1.307C29.757,3.464,8.667,21.148,6.394,34.797 c-0.899,5.397-0.354,15.138,14.698,37.324c7.43,10.95,15.025,19.996,15.564,20.635l-0.009,0.008l5.314,6.238l0.83-0.706 l-5.276-6.194l0.832-0.704l5.273,6.192l0.83-0.706l-5.27-6.189l0.833-0.703l5.266,6.186l0.83-0.707l-5.264-6.183l0.833-0.701 l5.261,6.178l0.829-0.706l-5.257-6.175l0.832-0.704l5.254,6.172l0.83-0.707l-5.251-6.168l0.833-0.704l5.249,6.166l0.83-0.706 l-5.246-6.162l0.832-0.704l5.244,6.159l0.829-0.707l-5.24-6.154l0.832-0.703l5.237,6.151l0.831-0.706l-5.236-6.148l0.833-0.704 l5.231,6.146l0.83-0.707l-5.229-6.141l0.007-0.007C36.434,63.776,23.958,43.274,24.666,37.841 c0.785-4.705,14.456-17.144,21.224-18.255c7.847-1.293,26.569,6.739,29.456,11.565c0.17,2.591-3.048,9.93-4.798,13.922 c-2.99,6.825-5.817,13.273-5.817,19.234h0.014v8.104h1.09v-8.104h1.09v8.104h1.09v-8.104h1.089v8.104h1.091v-8.104h1.089v8.104 h1.089v-8.104h1.091v8.104h1.089v-8.104h1.09v8.104h1.09v-8.104h1.09v8.104h1.089v-8.104h1.091v8.104h1.089v-8.104h1.089v8.104 h1.091v-8.195H83.26c0.065-2.149,2.58-7.887,4.253-11.705C91.902,42.496,96.441,32.14,92.146,23.312z"/>
</g>
<g class="deer-head">
<path d="M24.527,11.121c-0.227-0.226-0.629-0.101-0.629-0.101l-5.677,1.326c1.452-0.583,3.417-1.802,4.198-4.292 c1.321-4.213-1.285-7.009-2.848-7.899c-0.434-0.248-0.985-0.096-1.231,0.338c-0.247,0.433-0.095,0.984,0.338,1.23 c0.115,0.066,2.443,1.438,2.29,4.316c-0.22-0.317-0.473-0.641-0.799-0.971c-0.93-0.942-2.013-1.532-2.757-1.861 c-0.455-0.198-0.988,0.004-1.19,0.46c-0.202,0.455,0.004,0.989,0.461,1.191c0.601,0.266,1.47,0.738,2.202,1.479 c0.982,0.994,1.232,1.927,1.294,2.266c-1.291,2.014-3.804,2.435-3.927,2.454c-0.247,0.038-0.471,0.177-0.612,0.384l-0.939,1.38 h-1.142l-0.941-1.38c-0.142-0.207-0.364-0.347-0.612-0.384c-0.123-0.019-2.635-0.44-3.926-2.454 c0.064-0.349,0.316-1.277,1.294-2.266c0.731-0.741,1.601-1.213,2.202-1.479c0.456-0.202,0.662-0.736,0.461-1.191 c-0.202-0.456-0.733-0.659-1.191-0.46C10.1,3.536,9.018,4.126,8.087,5.068C7.764,5.396,7.512,5.719,7.292,6.035 c-0.137-2.845,2.165-4.24,2.29-4.313c0.432-0.249,0.581-0.798,0.334-1.229C9.67,0.058,9.118-0.091,8.686,0.154 c-1.563,0.891-4.17,3.687-2.849,7.899c0.755,2.407,2.612,3.62,4.046,4.226l-5.389-1.26c0,0-0.402-0.125-0.629,0.101 c-0.178,0.178-0.101,0.604-0.101,0.604l0.397,2.825l3.243,2.145l2.102-0.977l2.188,6.476c0.302,0.957,0.668,2.031,1.608,2.031 h1.713c0.97,0,1.258-1.275,1.56-2.13l2.204-6.425l2.208,1.026l3.243-2.145l0.397-2.825C24.627,11.725,24.705,11.299,24.527,11.121z M12.036,16.541c-0.538,0-0.973-0.436-0.973-0.973c0-0.538,0.435-0.974,0.973-0.974s0.974,0.436,0.974,0.974 C13.009,16.105,12.574,16.541,12.036,16.541z M16.297,16.575c-0.538,0-0.974-0.437-0.974-0.975c0-0.537,0.436-0.973,0.974-0.973 c0.537,0,0.973,0.436,0.973,0.973C17.27,16.138,16.834,16.575,16.297,16.575z"/>
<path class="deer-glasses fragment" d="M61.902,2.442c-3.809,0.957-8.227,1.935-12.155,1.814c-2.359-0.072-4.593-0.621-6.708-1.114
C28.778-0.181,15.903-1.437,0,2.213l1.022,6.688c0.988,0.022,2.637,0.381,2.712,2.272C4.341,26.407,8.307,33.712,22.74,33.335
c17.861-0.466,22.505-14.761,23.482-20.2c0.524-2.919,2.027-3.216,3.707-3.261c2.976-0.08,3.314,2.095,3.835,3.412
c6.123,15.477,9.803,18.998,22.65,20.117c19.53,1.703,17.28-12.779,19.922-21.195c0.506-1.608,1.061-2.432,2.828-2.471L100,3.048
C88.682,0.63,76.937-1.334,61.902,2.442z M4.923,6.486c-1.411,0-2.555-0.291-2.555-0.65c0-0.359,1.144-0.65,2.555-0.65
s2.555,0.292,2.555,0.65C7.478,6.195,6.334,6.486,4.923,6.486z M41.059,16.797c-2.733,8.065-7.017,13.918-18.021,14.213
c-10.899,0-14.066-1.986-15.513-14.678c0-8.515-0.558-13.5,15.606-13.47C34.03,3.908,45.462,3.804,41.059,16.797z M92.615,16.333
c-1.447,12.691-4.613,14.678-15.514,14.678c-11.004-0.295-15.288-6.148-18.021-14.213C54.678,3.804,66.109,3.908,77.009,2.863
C93.172,2.833,92.615,7.818,92.615,16.333z M95.355,7.137c-1.41,0-2.555-0.292-2.555-0.65c0-0.359,1.145-0.65,2.555-0.65
s2.555,0.291,2.555,0.65C97.91,6.845,96.766,7.137,95.355,7.137z"/>
</g>
</g>
</svg>
<aside class="notes">
Deer SVG, scale, bob head, change fill
</aside>
</section>
<section>
<h1 class="monotype"><clipPath></h1>
</section>
<section>
<h2>clipping HTML with SVG</h2>
<pre>
<span class="not-important"><style></span>
<span class="not-important">.element{</span>
-webkit-clip-path: <span class="fragment highlight">url(#shape)</span>;
<span class="not-important">}</span>
<span class="not-important"></style></span>
<span class="not-important"><svg></span>
<span class="not-important"><defs></span>
<clipPath <span class="fragment highlight">id="shape"</span>>
...
</clipPath>
<span class="not-important"></defs></span>
<span class="not-important"></svg></span>
</pre>
</section>
<section id="svg-clipping">
<svg class="offscreen" viewPort="0 0 960 500" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip-interactive">
</clipPath>
</defs>
</svg>
<div class="clip-surface clip--interactive" data-js-svg-clip-trigger></div>
<pre>
<clipPath id="shape">
<span class="fragment"><circle r="100" cx="400" cy="200" /></span>
<span class="fragment"><path d="M24.527,11.121c-0.227-0.226 ..." /></span>
</clipPath>
</pre>
</section>
<section>
<svg class="offscreen" viewPort="0 0 960 500" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip-text">
<text text-anchor="middle" class="font1" x="480" dy="300">Los Angeles</text>
</clipPath>
</defs>
</svg>
<h1 class="clip-surface clip--text">Los Angeles</h1>
<pre>
<span class="not-important"><clipPath id="shape"></span>
<text>Los Angeles</text>
<span class="not-important"></clipPath></span>
</pre>
</section>
<section>
<svg class="offscreen" viewPort="0 0 960 500" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip-textpath">
<text class="font1 font--textpath">
<textPath xlink:href="#mypath">
Los Angeles, New York, London, Paris,
</textPath>
</text>
</clipPath>
<path d="M280,250a200,200 0 1,1 400,0a200,200 0 1,1 -400,0" id="mypath" />
</defs>
</svg>
<h1 class="clip-surface clip--textpath">xx</h1>
<pre>
<textPath <span class="fragment highlight">xlink:href="#circle"</span>>
<span class="not-important">Los Angeles, New York ...</span>
</textPath>
<span class="fragment highlight"><path id="circle" d="M230,250a250,250 ..." /></span>
</pre>
</section>
<section>
<h2>Browser Support for <code>clip-path</code></h2>
</section>
<section>
<table class="support-matrix">
<thead>
<tr>
<th></th>
<th>
HTML
</th>
<th>
HTML←SVG
</th>
<th>
SVG
</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="resources/logos/chrome.png" alt="Chrome"></td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td><img src="resources/logos/opera.png" alt="Opera"></td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td><img src="resources/logos/firefox.png" alt="Firefox"></td>
<td>✖</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td><img src="resources/logos/safari.png" alt="Safari"></td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td><img src="resources/logos/ie.png" alt="Internet Explorer"></td>
<td>✖</td>
<td>✖</td>
<td>✔</td>
</tr>
</tbody>
</table>
</section>
<section id="masking">
<div class="clip-vs-mask fragment explain-mask">
<div class="clip-concept">
<svg width="450" height="450">
<title id="title">Illustration of the clip-path property with an animation of scissors cutting along a dotted line.</title>
<g transform="translate(204, 204) scale(2)">
<text y="7" text-anchor="middle" class="label cp-label">clipping</text>
<circle r="100" cx="0" cy="0" id="dash" class="cp-shape cp-shape--dash" />
<circle r="100" cx="0" cy="0" id="circle" class="cp-shape cp-shape--cutout" />
<g width="100" height="100" class="cp-scissors">
<g transform="scale(0.45) translate(180 -60)">
<path d="M80.339,0.695c-6.391-2.339-14.008,1.462-16.283,7.897c-3.294,7.356-4.984,17.072-15.635,25.413l-4.474,3.504l-3.995-3.143
C29.321,26.004,27.654,16.283,24.375,8.919C22.115,2.479,14.505-1.34,8.109,0.985c-6.463,1.905-9.367,9.668-7.6,15.855
c1.323,6.312,7.748,11.555,14.051,10.113c6.564-1.5,5.376-3.651,7.861-4.359c3.177-0.906,5.182,8.649,14.531,21.74l0.276,0.383
L11.96,80.778C8.797,85.997,6.899,92.941,11,99.552l33.031-45.436L77.23,100c4.116-6.603,2.232-13.551-0.92-18.778l-25.451-36.5
l0.542-0.746c9.378-13.067,11.405-22.622,14.58-21.708c2.482,0.715,1.289,2.862,7.851,4.378c6.3,1.456,12.735-3.773,14.072-10.082
C89.685,10.383,86.798,2.612,80.339,0.695z M21.739,14.741c0.001,7.334-9.644,10.664-15.081,5.158
c-3.721-3.771-3.74-11.542,1.342-14.23C14.041,1.831,22.14,7.993,21.739,14.741z M81.748,19.61
c-5.446,5.494-15.086,2.143-15.067-5.191c-0.387-6.746,7.726-12.894,13.757-9.042C85.514,8.077,85.478,15.848,81.748,19.61z"/>
</g>
</g>
</g>
</svg>
</div>
<div class="mask-concept">
<div class="mk-container">
<div class="mk-shape mk-shape--base">
<div class="label mk-label">Masking</div>
</div>
<div class="mk-shape mk-shape--top">
<div class="label mk-label">Masking</div>
</div>
</div>
</div>
</div>
</section>
<section id="masking">
<div class="masking-illustration" data-state-trigger data-state=0 data-max-state=6>
<div class="container">
<div class="source"></div>
</div>
<div class="container">
<div class="mask"></div>
</div>
<div class="container">
<div class="target"></div>
</div>
</div>
<pre data-state=1>
.element{
-webkit-mask: url(mask.jpg);
}
</pre>
</section>
<!-- <section>
<img src="resources/mask-type-illustration" alt="Illustration of alpha and luminance mask effects." />
</section> -->
<section>
<ul class="demo--texture" data-state-trigger data-state=0 data-max-state=4>
<li class="masking-texture">Textures</li>
<li class="masking-texture">for</li>
<li class="masking-texture">Everything!</li>
</ul>
</section>
<section>
<a href="https://oslego.github.com/cssmasking/" target="_blank">
<img src="resources/screenshots/trekking.png" alt="" />
</a>
<aside class="notes">
Image, gradient, fixed bg, animated GIF, mask-image-position
</aside>
</section>
<!-- <section>
<a href="https://medium.com/@joshuadavisnow/the-mercenary-ac3bd0d025f5" target="_blank" title="The Mercenary story on Medium">
<img src="resources/screenshots/medium-mercenary1.png" alt="">
</a>
</section>
<section>
<a href="https://medium.com/@joshuadavisnow/the-mercenary-ac3bd0d025f5" target="_blank" title="The Mercenary story on Medium">
<img src="resources/screenshots/medium-mercenary2.png" alt="">
</a>
</section> -->
<section>
<a href="https://oslego.github.io/responsive-mask-image" target="_blank" title="Demo of responsive mask with background image">
<img src="resources/screenshots/responsive-mask.png" />
</a>
</section>
<section data-background="resources/crying.gif">
<h2>Browser Support for <code>mask</code></h2>
</section>
<section>
<table class="support-matrix">
<thead>
<tr>
<th></th>
<th>
Image
</th>
<th>
Gradient
</th>
<th>
HTML←SVG
</th>
<th>
SVG←SVG
</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="resources/logos/chrome.png" alt="Chrome"></td></td>
<td>✔</td>
<td>✔</td>
<td>✖</td>
<td>✔</td>
</tr>
<tr>
<td><img src="resources/logos/opera.png" alt="Opera"></td></td>
<td>✔</td>
<td>✔</td>
<td>✖</td>
<td>✔</td>
</tr>
<tr>
<td><img src="resources/logos/firefox.png" alt="Firefox"></td>
<td>✖</td>
<td>✖</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td><img src="resources/logos/safari.png" alt="Safari"></td></td>
<td>✔</td>
<td>✔</td>
<td>✖</td>
<td>✔</td>
</tr>
<tr>
<td><img src="resources/logos/ie.png" alt="Internet Explorer"></td>
<td>✖</td>
<td>✖</td>
<td>✖</td>
<td>✔</td>
</tr>
</tbody>
</table>
</section>
<section>
<table class="support-matrix">
<thead>
<tr>
<th></th>
<th>
Image
</th>
<th>
Gradient
</th>
<th>
HTML←SVG
</th>
<th>
SVG←SVG
</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="resources/logos/chrome.png" alt="Chrome"><span class="caveat">*</span></td></td>
<td>✔<span class="caveat">†</span></td>
<td>✔</td>
<td>✖</td>
<td>✔</td>
</tr>
<tr>
<td><img src="resources/logos/opera.png" alt="Opera"><span class="caveat">*</span></td></td>
<td>✔<span class="caveat">†</span></td>
<td>✔</td>
<td>✖</td>
<td>✔</td>
</tr>
<tr>
<td><img src="resources/logos/firefox.png" alt="Firefox"></td>
<td>✖<span class="caveat">‡</span></td>
<td>✖<span class="caveat">‡</span></td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td><img src="resources/logos/safari.png" alt="Safari"><span class="caveat">*</span></td></td>
<td>✔</td>
<td>✔</td>
<td>✖</td>
<td>✔</td>
</tr>
<tr>
<td><img src="resources/logos/ie.png" alt="Internet Explorer"></td>
<td>✖<span class="caveat">‡</span></td>
<td>✖<span class="caveat">‡</span></td>
<td>✖</td>
<td>✔</td>
</tr>
</tbody>
<caption>
* prefixed with -webkit- <br>
† luminance support behind flag (Chrome 37, Opera 24)<br>
‡ may be polyfilled with SVG (IE 8-10 only gradient. IE 11 image & gradient)
</caption>
<aside class="notes">
Chrome, Opera: alpha image masks, luminance behind flag <br>
IE, Firefox: polyfill-able image & gradient masks with SVG<br>
</aside>
</table>
</section>
<section>
<h1>Recap</h1>
<ul>
<li>CSS Shapes</li>
<li>CSS Masking (clip-path)</li>
<li>CSS Masking (mask-image)</li>
</ul>
</section>
<section>
<a href="http://webplatform.adobe.com/" target="_blank">
<h3>webplatform.adobe.com</h3>
<img src="resources/screenshots/webplatform.png" alt="">
</a>
</section>
<section>
<blockquote>
I have to teach her the limitations of web design.
<span>— web developer</span>
</blockquote>
</section>
<section class="left-aligned">
<img src="resources/max-app.png" class="fragment" alt="">
<h1>End.</h1>
<h3>
<a href="https://twitter.com/razvancaliman" target="_blank">@RazvanCaliman</a>
</h3>
<h4>
<a href="https://github.com/oslego/max-2014">bitly.com/max2014-shapes</a>
</h4>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script src="js/CSSShapesEditor-min.js"></script>
<script type="text/template" id="template-deer">
<path d="M24.527,11.121c-0.227-0.226-0.629-0.101-0.629-0.101l-5.677,1.326c1.452-0.583,3.417-1.802,4.198-4.292 c1.321-4.213-1.285-7.009-2.848-7.899c-0.434-0.248-0.985-0.096-1.231,0.338c-0.247,0.433-0.095,0.984,0.338,1.23 c0.115,0.066,2.443,1.438,2.29,4.316c-0.22-0.317-0.473-0.641-0.799-0.971c-0.93-0.942-2.013-1.532-2.757-1.861 c-0.455-0.198-0.988,0.004-1.19,0.46c-0.202,0.455,0.004,0.989,0.461,1.191c0.601,0.266,1.47,0.738,2.202,1.479 c0.982,0.994,1.232,1.927,1.294,2.266c-1.291,2.014-3.804,2.435-3.927,2.454c-0.247,0.038-0.471,0.177-0.612,0.384l-0.939,1.38 h-1.142l-0.941-1.38c-0.142-0.207-0.364-0.347-0.612-0.384c-0.123-0.019-2.635-0.44-3.926-2.454 c0.064-0.349,0.316-1.277,1.294-2.266c0.731-0.741,1.601-1.213,2.202-1.479c0.456-0.202,0.662-0.736,0.461-1.191 c-0.202-0.456-0.733-0.659-1.191-0.46C10.1,3.536,9.018,4.126,8.087,5.068C7.764,5.396,7.512,5.719,7.292,6.035 c-0.137-2.845,2.165-4.24,2.29-4.313c0.432-0.249,0.581-0.798,0.334-1.229C9.67,0.058,9.118-0.091,8.686,0.154 c-1.563,0.891-4.17,3.687-2.849,7.899c0.755,2.407,2.612,3.62,4.046,4.226l-5.389-1.26c0,0-0.402-0.125-0.629,0.101 c-0.178,0.178-0.101,0.604-0.101,0.604l0.397,2.825l3.243,2.145l2.102-0.977l2.188,6.476c0.302,0.957,0.668,2.031,1.608,2.031 h1.713c0.97,0,1.258-1.275,1.56-2.13l2.204-6.425l2.208,1.026l3.243-2.145l0.397-2.825C24.627,11.725,24.705,11.299,24.527,11.121z M12.036,16.541c-0.538,0-0.973-0.436-0.973-0.973c0-0.538,0.435-0.974,0.973-0.974s0.974,0.436,0.974,0.974 C13.009,16.105,12.574,16.541,12.036,16.541z M16.297,16.575c-0.538,0-0.974-0.437-0.974-0.975c0-0.537,0.436-0.973,0.974-0.973 c0.537,0,0.973,0.436,0.973,0.973C17.27,16.138,16.834,16.575,16.297,16.575z"/>
</script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: false,
progress: true,
history: true,
center: true,
keyboard: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: 'fade', // default/cube/page/concave/zoom/linear/fade/none
// Parallax scrolling