Breaking the norm with creative CSS
•
4 likes•519 views
Feeling uninspired and tired of constantly building the same layouts? Let’s leverage the CSS superpowers you might have heard about before, but haven’t already used. Let’s explore new CSS features that give us a great set of tools and enable to do amazing things on the web! The future of web graphics and CSS as a design language is bright, and finally it will make us less dependent on the image editors. We’re entering the new era with in-browser designing. Don’t stay behind and get some fresh air of creativity directly in the web browser.
Recommended
More Related Content
Similar to Breaking the norm with creative CSS
Similar to Breaking the norm with creative CSS (20)
Recently uploaded
Recently uploaded (20)
Breaking the norm with creative CSS
- 1. CSS breaking the norm with creative by @aganaplocha
- 2. CSS breaking the norm with creative by @aganaplocha
- 3. CSS breaking the norm with creative by @aganaplocha
- 4. CSS breaking the norm with creative by @aganaplocha
- 5. CSS breaking the norm with creative by @aganaplocha
- 6. create a website by @aganaplocha
- 7. create a website by @aganaplocha
- 8. create a website by @aganaplocha
- 35. where is CSS? by @aganaplocha
- 36. where is CSS? by @aganaplocha
- 39. CSSgrid is here by @aganaplocha
- 43. by @aganaplocha
- 44. clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: polygon(50% 0%, 100% 50%, 50% 100%); clip-path: url("#water"); CSS
- 45. clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: polygon(50% 0%, 100% 50%, 50% 100%); clip-path: url("#water"); CSS
- 46. by @aganaplocha
- 47. by @aganaplocha
- 48. -webkit-clip-path: url("#water"); clip-path: url("#water"); <svg> <defs> <clipPath id="water"> <path d="M468.2,226.8c-1.8-..." /> </clipPath> </defs> </svg> HTML CSS
- 50. clip-path now also supports basic shapes
- 51. clipping cut out image by @aganaplocha
- 52. by @aganaplocha
- 53. .svg .jpg
- 54. -webkit-clip-path: url("#clip-plant"); clip-path: url("#clip-plant"); <svg> <defs> <clipPath id="clip-plant"> <path d="M468.2,226.8c-1.8-..." /> </clipPath> </defs> </svg> HTML CSS
- 56. .jpg .png 123 kB 819 kBby @aganaplocha
- 57. .jpg .png 123 kB 819 kB x6by @aganaplocha
- 58. .jpg .png 123 kB 819 kB x6by @aganaplocha
- 59. .jpg .png 123 kB 819 kB x6by @aganaplocha
- 63. CSS by @aganaplocha mask: url(’mask.png’); mask-image: url(’mask.png’) linear- gradient(-45deg,rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%); mask-image: url(#masking);
- 64. mask: url(’mask.png’); mask-image: url(’mask.png’) linear- gradient(-45deg,rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%); mask-image: url(#masking); CSS by @aganaplocha FF and IE support only this one
- 65. CSS by @aganaplocha -webkit-mask-image: url(image.png); mask-image: url(image.png); remember about vendor prefixes
- 66. mask-image: url(image.png); -webkit-mask-image: url(image.png); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 300px; CSS by @aganaplocha just like for background
- 76. shape-outside: circle(50%); CSS you can go with the circle(), polygon(), inset(), ellipse(), but another possible value is the url() function. by @aganaplocha
- 79. float: ... ; height/width: ... ; background: ... ; mask-image: ... ; shape-outside: ... ; CSS by @aganaplocha
- 80. Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Received an invalid response. Origin 'null' is therefore not allowed access. by @aganaplocha
- 85. SVGis sooo cool by @aganaplocha
- 87. <path id="wave" d="M0,33.3c38,0,38,34,76.1,34c38,0,38-34,76.1-34 c38,0,38,34,76.1,34"/> <text> <textPath xlink:href="#wave"startOffset="0%"> <tspan>don’t be afraid of checking out cool things</tspan> </textPath> </text> SVG CODE by @aganaplocha
- 94. let’s make Web more crazy! zzzzzzzzzzby @aganaplocha
- 95. let’s make Web more crazy! zzzzzzzzzzby @aganaplocha
- 98. caniuse.com
- 99. caniuse.com
- 100. by @aganaplocha Henri Matisse „ „ Creativity takes courage