Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Breaking the norm with creative CSS

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.

  • Login to see the comments

Breaking the norm with creative CSS

  1. 1. CSS breaking the norm with creative by @aganaplocha
  2. 2. CSS breaking the norm with creative by @aganaplocha
  3. 3. CSS breaking the norm with creative by @aganaplocha
  4. 4. CSS breaking the norm with creative by @aganaplocha
  5. 5. CSS breaking the norm with creative by @aganaplocha
  6. 6. create a website by @aganaplocha
  7. 7. create a website by @aganaplocha
  8. 8. create a website by @aganaplocha
  9. 9. create a websiteby @aganaplocha
  10. 10. 12-columns grid by @aganaplocha
  11. 11. 3 boxes by @aganaplocha
  12. 12. ? by @aganaplocha
  13. 13. ??????by @aganaplocha
  14. 14. online by @aganaplocha
  15. 15. offline by @aganaplocha
  16. 16. offline by @aganaplocha
  17. 17. you’re awesome dear print by @aganaplocha
  18. 18. where is CSS? by @aganaplocha
  19. 19. where is CSS? by @aganaplocha
  20. 20. the CSS challengeby @aganaplocha
  21. 21. CSSgrid is here by @aganaplocha
  22. 22. https://www.mozilla.org/en-US/developer/css-grid/
  23. 23. clipping clip-pathby @aganaplocha
  24. 24. by @aganaplocha
  25. 25. 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
  26. 26. 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
  27. 27. by @aganaplocha
  28. 28. by @aganaplocha
  29. 29. -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
  30. 30. clip-path now also supports basic shapes
  31. 31. clipping cut out image by @aganaplocha
  32. 32. by @aganaplocha
  33. 33. .svg .jpg
  34. 34. -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
  35. 35. wait, but why?by @aganaplocha
  36. 36. .jpg .png 123 kB 819 kBby @aganaplocha
  37. 37. .jpg .png 123 kB 819 kB x6by @aganaplocha
  38. 38. .jpg .png 123 kB 819 kB x6by @aganaplocha
  39. 39. .jpg .png 123 kB 819 kB x6by @aganaplocha
  40. 40. https://css-tricks.com/transparent-jpg-svg/
  41. 41. masking by @aganaplocha
  42. 42. 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);
  43. 43. 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
  44. 44. CSS by @aganaplocha -webkit-mask-image: url(image.png); mask-image: url(image.png); remember about vendor prefixes
  45. 45. 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
  46. 46. by @aganaplocha transparency
  47. 47. by @aganaplocha transparency
  48. 48. clipping maskingvs by @aganaplocha
  49. 49. vectors clipping masking by @aganaplocha images
  50. 50. vectors clipping masking by @aganaplocha images
  51. 51. vectors clipping masking by @aganaplocha images
  52. 52. shape outsideby @aganaplocha
  53. 53. shape-outside: circle(50%); CSS by @aganaplocha
  54. 54. shape-outside: circle(50%); CSS you can go with the circle(), polygon(), inset(), ellipse(), but another possible value is the url() function. by @aganaplocha
  55. 55. float: ... ; height/width: ... ; background: ... ; mask-image: ... ; shape-outside: ... ; CSS by @aganaplocha
  56. 56. 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
  57. 57. CORS by @aganaplocha eeeoooeeeooo
  58. 58. CORS by @aganaplocha #emergency
  59. 59. CORS by @aganaplocha #emergencyCross-Origin Resource Sharing
  60. 60. SVGis sooo cool by @aganaplocha
  61. 61. by @aganaplochaby @aganaplocha
  62. 62. <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
  63. 63. chaos you’re welcome by @aganaplocha
  64. 64. /prettyuglyproject
  65. 65. let’s make Web more crazy! zzzzzzzzzzby @aganaplocha
  66. 66. let’s make Web more crazy! zzzzzzzzzzby @aganaplocha
  67. 67. by @aganaplocha Henri Matisse „ „ Creativity takes courage
  68. 68. create a websiteby @aganaplocha
  69. 69. caniuse.com
  70. 70. caniuse.com
  71. 71. by @aganaplocha Henri Matisse „ „ Creativity takes courage
  72. 72. ssstickers! post cardsss! CONTEST! @aganaplocha @CodemotionIT
  73. 73. kahoot.it CONTEST! @aganaplocha @CodemotionIT
  74. 74. thank you!@aganaplocha
  75. 75. let’s break the norm@aganaplocha

×