css

CSS creative by @aganaplocha breaking the norm with CSS - PowerPoint PPT Presentation

breaking the norm with CSS creative by @aganaplocha breaking the norm with CSS creative by @aganaplocha breaking the norm with CSS creative by @aganaplocha breaking the norm with CSS creative by @aganaplocha create a web s ite by


  1. breaking the norm with CSS creative by @aganaplocha

  2. breaking the norm with CSS creative by @aganaplocha

  3. breaking the norm with CSS creative by @aganaplocha

  4. breaking the norm with CSS creative by @aganaplocha

  5. create a web s ite by @aganaplocha

  6. create a web s ite by @aganaplocha

  7. create a web s ite by @aganaplocha

  8. create a web s ite by @aganaplocha

  9. 12-column s grid by @aganaplocha

  10. 3 boxe s by @aganaplocha

  11. ? by @aganaplocha

  12. ?????? by @aganaplocha

  13. online by @aganaplocha

  14. offline by @aganaplocha

  15. offline by @aganaplocha

  16. dear print you’re awe s ome by @aganaplocha

  17. where is CSS? by @aganaplocha

  18. where is CSS? by @aganaplocha

  19. the CSS challenge by @aganaplocha

  20. CSS grid i s here! by @aganaplocha

  21. https://www.mozilla.org/en-US/developer/css-grid/

  22. clipping clip-path by @aganaplocha

  23. by @aganaplocha

  24. CSS 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");

  25. CSS 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");

  26. by @aganaplocha

  27. by @aganaplocha

  28. 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");

  29. clip-path now also supports basic shapes

  30. clipping cut out image by @aganaplocha

  31. by @aganaplocha

  32. . s vg .jpg

  33. HTML <svg> <defs> <clipPath id="clip-plant"> <path d="M468.2,226.8c-1.8-..." /> </clipPath> </defs> </svg> CSS -webkit-clip-path: url("#clip-plant"); clip-path: url("#clip-plant");

  34. wait , but why? by @aganaplocha

  35. .jpg .png 123 kB 819 kB by @aganaplocha

  36. x6 .jpg .png 123 kB 819 kB by @aganaplocha

  37. x6 .jpg .png 123 kB 819 kB by @aganaplocha

  38. x6 .jpg .png 123 kB 819 kB by @aganaplocha

  39. https://css-tricks.com/transparent-jpg-svg/

  40. ma s king by @aganaplocha

  41. CSS 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); by @aganaplocha

  42. CSS 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); FF and IE s upport only this one by @aganaplocha

  43. CSS -webkit-mask-image: url(image.png); mask-image: url(image.png); remember about vendor prefixes by @aganaplocha

  44. CSS mask-image: url(image.png); -webkit-mask-image: url(image.png); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 300px; ju s t like for background by @aganaplocha

  45. tran s parency by @aganaplocha

  46. tran s parency by @aganaplocha

  47. clipping v s ma s king by @aganaplocha

  48. clipping ma s king image s vector s by @aganaplocha

  49. clipping ma s king image s vector s by @aganaplocha

  50. clipping ma s king image s vector s by @aganaplocha

  51. s hape out s ide by @aganaplocha

  52. CSS shape-outside: circle(50%); by @aganaplocha

  53. 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. 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.

  56. CORS eeeoooeeeooo by @aganaplocha

  57. CORS #emergency by @aganaplocha

  58. CORS #emergency Cro ss -Origin Re s ource Sharing by @aganaplocha

  59. S VG i s s ooo cool by @aganaplocha

  60. by @aganaplocha by @aganaplocha

  61. SVG CODE <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> by @aganaplocha

  62. chao s you’re welcome by @aganaplocha

  63. /prettyuglyproject

  64. let’ s make Web more crazy! zzzzzzzzzz by @aganaplocha

  65. let’ s make Web more crazy! zzzzzzzzzz by @aganaplocha

  66. Hermitage

  67. „ Creativity „ take s courage Henri Mati ss e by @aganaplocha

  68. create a web s ite by @aganaplocha

  69. caniu s e.com

  70. caniu s e.com

  71. „ Creativity „ take s courage Henri Mati ss e by @aganaplocha

  72. CONTEST! sss ticker s ! tattoo sss ! @pitercss_ conf @aganaplocha

  73. CONTEST! which CSS propertie s are nece ss ary to achieve thi s effect? @pitercss_ conf @aganaplocha

Recommend


More recommend