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

▶
css
SMART_READER_LITE
LIVE PREVIEW

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

Sep 16, 2022 446 likes •1.47k views

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

slide-1
SLIDE 1

CSS

breaking the norm with creative

by @aganaplocha
slide-2
SLIDE 2
slide-3
SLIDE 3

CSS

breaking the norm with creative

by @aganaplocha
slide-4
SLIDE 4

CSS

breaking the norm with creative

by @aganaplocha
slide-5
SLIDE 5

CSS

breaking the norm with creative

by @aganaplocha
slide-6
SLIDE 6 create a website by @aganaplocha
slide-7
SLIDE 7

create a website

by @aganaplocha
slide-8
SLIDE 8

create a website

by @aganaplocha
slide-9
SLIDE 9

create a website

by @aganaplocha
slide-10
SLIDE 10
slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15
slide-16
SLIDE 16
slide-17
SLIDE 17
slide-18
SLIDE 18

12-columns grid

by @aganaplocha
slide-19
SLIDE 19

3 boxes

by @aganaplocha
slide-20
SLIDE 20

?

by @aganaplocha
slide-21
SLIDE 21

??????

by @aganaplocha
slide-22
SLIDE 22
slide-23
SLIDE 23
  • nline
by @aganaplocha
slide-24
SLIDE 24
  • ffline
by @aganaplocha
slide-25
SLIDE 25
  • ffline
by @aganaplocha
slide-26
SLIDE 26
slide-27
SLIDE 27
slide-28
SLIDE 28

you’re awesome dear print

by @aganaplocha
slide-29
SLIDE 29
slide-30
SLIDE 30
slide-31
SLIDE 31
slide-32
SLIDE 32
slide-33
SLIDE 33
slide-34
SLIDE 34

where is CSS?

by @aganaplocha
slide-35
SLIDE 35

where is CSS?

by @aganaplocha
slide-36
SLIDE 36
slide-37
SLIDE 37

the CSS challenge

by @aganaplocha
slide-38
SLIDE 38

CSS

grid is here!

by @aganaplocha
slide-39
SLIDE 39 https://www.mozilla.org/en-US/developer/css-grid/
slide-40
SLIDE 40
slide-41
SLIDE 41

clipping clip-path

by @aganaplocha
slide-42
SLIDE 42 by @aganaplocha
slide-43
SLIDE 43 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
slide-44
SLIDE 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
slide-45
SLIDE 45 by @aganaplocha
slide-46
SLIDE 46 by @aganaplocha
slide-47
SLIDE 47
  • 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
slide-48
SLIDE 48
slide-49
SLIDE 49 clip-path now also supports basic shapes
slide-50
SLIDE 50

clipping

cut out image

by @aganaplocha
slide-51
SLIDE 51 by @aganaplocha
slide-52
SLIDE 52

.svg .jpg

slide-53
SLIDE 53
  • 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
slide-54
SLIDE 54

wait, but why?

by @aganaplocha
slide-55
SLIDE 55

.jpg .png

123 kB 819 kB

by @aganaplocha
slide-56
SLIDE 56

.jpg .png

123 kB 819 kB

x6

by @aganaplocha
slide-57
SLIDE 57

.jpg .png

123 kB 819 kB

x6

by @aganaplocha
slide-58
SLIDE 58

.jpg .png

123 kB 819 kB

x6

by @aganaplocha
slide-59
SLIDE 59 https://css-tricks.com/transparent-jpg-svg/
slide-60
SLIDE 60

masking

by @aganaplocha
slide-61
SLIDE 61

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

slide-62
SLIDE 62

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
slide-63
SLIDE 63

CSS

by @aganaplocha
  • webkit-mask-image: url(image.png);

mask-image: url(image.png);

remember about vendor prefixes
slide-64
SLIDE 64

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

slide-65
SLIDE 65 by @aganaplocha transparency
slide-66
SLIDE 66 by @aganaplocha transparency
slide-67
SLIDE 67

clipping masking

vs

by @aganaplocha
slide-68
SLIDE 68

vectors

clipping masking

by @aganaplocha

images

slide-69
SLIDE 69

vectors

clipping masking

by @aganaplocha

images

slide-70
SLIDE 70

vectors

clipping masking

by @aganaplocha

images

slide-71
SLIDE 71

shape

  • utside
by @aganaplocha
slide-72
SLIDE 72

shape-outside: circle(50%);

CSS

by @aganaplocha
slide-73
SLIDE 73

shape-outside: circle(50%);

CSS

you can go with the circle(), polygon(), inset(), ellipse(), but another possible value is the url() function. by @aganaplocha
slide-74
SLIDE 74
slide-75
SLIDE 75
slide-76
SLIDE 76

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

CSS

by @aganaplocha
slide-77
SLIDE 77 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.
slide-78
SLIDE 78

CORS

by @aganaplocha

eeeoooeeeooo

slide-79
SLIDE 79

CORS

by @aganaplocha

#emergency

slide-80
SLIDE 80

CORS

by @aganaplocha

#emergency

Cross-Origin Resource Sharing

slide-81
SLIDE 81

SVG

is sooo cool

by @aganaplocha
slide-82
SLIDE 82 by @aganaplocha by @aganaplocha
slide-83
SLIDE 83 <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
slide-84
SLIDE 84
slide-85
SLIDE 85

chaos

you’re welcome

by @aganaplocha
slide-86
SLIDE 86 /prettyuglyproject
slide-87
SLIDE 87
slide-88
SLIDE 88
slide-89
SLIDE 89
slide-90
SLIDE 90
slide-91
SLIDE 91

let’s make Web more crazy!

zzzzzzzzzz

by @aganaplocha
slide-92
SLIDE 92

let’s make Web more crazy!

zzzzzzzzzz

by @aganaplocha
slide-93
SLIDE 93

Hermitage

slide-94
SLIDE 94 by @aganaplocha

Henri Matisse

„ „

Creativity takes courage

slide-95
SLIDE 95

create a website

by @aganaplocha
slide-96
SLIDE 96

caniuse.com

slide-97
SLIDE 97

caniuse.com

slide-98
SLIDE 98 by @aganaplocha

Henri Matisse

„ „

Creativity takes courage

slide-99
SLIDE 99

ssstickers! tattoosss!

CONTEST!

@aganaplocha @pitercss_conf

slide-100
SLIDE 100

which CSS properties are necessary to achieve this effect?

CONTEST!

@aganaplocha @pitercss_conf

slide-101
SLIDE 101

thank you!

@aganaplocha

slide-102
SLIDE 102

let’s break the norm

@aganaplocha