agnieszka naplocha - breaking the norm with creative css - codemotion milan 2017

CSSbreaking the norm with creative

by @aganaplocha

create a website

by @aganaplocha

12-columns grid

by @aganaplocha

3 boxes

by @aganaplocha

?by @aganaplocha

??????by @aganaplocha

onlineby @aganaplocha

offlineby @aganaplocha

you’re awesomedear print

by @aganaplocha

where isCSS?by @aganaplocha

the CSSchallengeby @aganaplocha

CSS grid is here!by @aganaplocha

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

clipping clip-path

by @aganaplocha

by @aganaplocha

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

by @aganaplocha

-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

clip-path no

w also suppo

rts basic sh

apes

clipping cut out image

by @aganaplocha

by @aganaplocha

.svg .jpg

-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

wait, but why?

by @aganaplocha

.jpg .png

123 kB 819 kB by @aganaplocha

.jpg .png

123 kB 819 kB x6by @aganaplocha

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

masking by @aganaplocha

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

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

CSS

by @aganaplocha

-webkit-mask-image: url(image.png); mask-image: url(image.png);

remember abo

ut vendor pr

efixes

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

by @aganaplocha

transparency

clipping masking vs

by @aganaplocha

vectors clipping masking

by @aganaplocha

images

shape outside

by @aganaplocha

shape-outside: circle(50%);CSS

by @aganaplocha

shape-outside: circle(50%);CSS

you can go with the circle(), polygon(), inset(), ellipse(), but another possible value is the url() function.

by @aganaplocha

float: ... ; height/width: ... ; background: ... ; mask-image: ... ; shape-outside: ... ;

CSS

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.

by @aganaplocha

CORS by @aganaplocha

eeeoooeeeooo


#emergency


#emergencyCross-Origin Resource Sharing

SVG is sooo coolby @aganaplocha

by @aganaplochaby @aganaplocha

<path id="wave" d="M0,33.3c38,0,38,34,76.1,34c38,0,38-34,76.1-34c38,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

chaos you’re welcome

by @aganaplocha

/prettyuglyproject

let’s make Web more crazy!zzzzzzzzzz

by @aganaplocha

by @aganaplocha

Henri Matisse

„„Creativity takes courage

create a website

by @aganaplocha

caniuse.com

by @aganaplocha

Henri Matisse

„„Creativity takes courage

ssstickers! post cardsss!

CONTEST!

@aganaplocha @CodemotionIT

kahoot.it

CONTEST!


709792

CONTEST!


thank you! @aganaplocha

let’s break the norm @aganaplocha

agnieszka naplocha - breaking the norm with creative css - codemotion milan 2017

Technology