breaking the norm with creative

1. breaking the norm with creative by @aganaplocha
2. breaking the norm with creative CSS by @aganaplocha
3. create a website by @aganaplocha
4. create a website by @aganaplocha
10. by @aganaplocha
11. 3 boxes by @aganaplocha
12. ??? ??? by @aganaplocha
14. online by @aganaplocha
15. offline by @aganaplocha
16. by @aganaplocha
17. dear print you’re awesome by @aganaplocha
20. brutalist websites
22. where is CSS? by @aganaplocha
24. theCSS challenge by @aganaplocha
25. clipping clip-path by @aganaplocha
26. by @aganaplocha
27. CSS clip-path: clip-path: clip-path: clip-path: inset(100px 50px); circle(50px at 0 100px); polygon(50% 0%, 100% 50%, 50% 100%); url("#water"); by @aganaplocha
28. CSS clip-path: clip-path: clip-path: clip-path: inset(100px 50px); circle(50px at 0 100px); polygon(50% 0%, 100% 50%, 50% 100%); url("#water"); by @aganaplocha
29. by @aganaplocha
30. HTML <svg> <defs> <clipPath id="water"> <path d="M468.2,226.8c-1.8-..." /> </clipPath> </defs> </svg> CSS -webkit-clip-path: url("#water"); clip-path: url("#water"); by @aganaplocha
31. clipping cut out image by @aganaplocha
32. by @aganaplocha
33. by @aganaplocha
34. .svg .jpg by @aganaplocha
35. wait, but why? by @aganaplocha
36. .jpg .png 123 kB 819 kB by @aganaplocha
37. x6 .jpg .png 123 kB 819 kB by @aganaplocha
38. https://css-tricks.com/transparent-jpg-svg/
39. masking by @aganaplocha
40. CSS mask: url(’mask.png’); mask-image: url(’mask.png’) lineargradient(-45deg,rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%); FF and IE support only this one mask-image: url(#masking); by @aganaplocha
41. CSS mask-image: url(image.png); -webkit-mask-image: url(image.png); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 300px; just like for background by @aganaplocha
42. by @aganaplocha
43. by @aganaplocha
45. by @aganaplocha
46. transparency by @aganaplocha
47. clipping vs masking by @aganaplocha
48. clipping masking vectors images by @aganaplocha
49. clipping masking vectors images by @aganaplocha
50. shape outside by @aganaplocha
51. CSS shape-outside: circle(50%); you can go with the circle(), polygon(), inset(), ellipse(), but another possible value is the url() function. by @aganaplocha
54. CSS float: ... ; height/width: ... ; background: ... ; mask-image: ... ; shape-outside: ... ; by @aganaplocha
55. chaos chaos you’re welcome by @aganaplocha
56. by @aganaplocha
57. http://tennentbrown.co.nz/
58. https://codepen.io/bosworthco/pen/YWBLpR
59. let’s make Web more crazy! zzzzzzzzzz by @aganaplocha
60. let’s make Web more crazy! zzzzzzzzzz by @aganaplocha
61. zzzzzzzzzz by @aganaplocha
64. Rue Duperré
65. creativity takes courage Henri Matisse by @aganaplocha
66. ssstickers! @aganaplocha
67. smile! by @aganaplocha
68. let’s break the norm instagram: @theawwwesomes twitter: @aganaplocha
69. merci! @aganaplocha