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 @aganaplocha

create a web s ite by @aganaplocha

create a web s ite by @aganaplocha

create a web s ite by @aganaplocha

12-column s grid by @aganaplocha

3 boxe s by @aganaplocha

? by @aganaplocha

?????? by @aganaplocha

online by @aganaplocha

offline by @aganaplocha

offline by @aganaplocha

dear print you’re awe s ome by @aganaplocha

where is CSS? by @aganaplocha

where is CSS? by @aganaplocha

the CSS challenge by @aganaplocha

CSS grid i s here! by @aganaplocha

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

clipping clip-path by @aganaplocha

by @aganaplocha

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

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

by @aganaplocha

by @aganaplocha

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

clip-path now also supports basic shapes

clipping cut out image by @aganaplocha

by @aganaplocha

. s vg .jpg

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

wait , but why? by @aganaplocha

.jpg .png 123 kB 819 kB by @aganaplocha

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

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

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

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

ma s king by @aganaplocha

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

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

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

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

tran s parency by @aganaplocha

tran s parency by @aganaplocha

clipping v s ma s king by @aganaplocha

clipping ma s king image s vector s by @aganaplocha

clipping ma s king image s vector s by @aganaplocha

clipping ma s king image s vector s by @aganaplocha

s hape out s ide by @aganaplocha

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

CSS shape-outside: circle(50%); you can go with the circle(), polygon(), inset(), ellipse() , but another possible value is the url() function . by @aganaplocha

CSS float: ... ; height/width: ... ; background: ... ; mask-image: ... ; shape-outside: ... ; by @aganaplocha

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.

CORS eeeoooeeeooo by @aganaplocha

CORS #emergency by @aganaplocha

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

S VG i s s ooo cool by @aganaplocha

by @aganaplocha by @aganaplocha

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

chao s you’re welcome by @aganaplocha

/prettyuglyproject

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

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

Hermitage

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

create a web s ite by @aganaplocha

caniu s e.com

caniu s e.com

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

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

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