Paint the Web creating art with CSS Eva Lettner Frontend Developer - - PowerPoint PPT Presentation

▶

Apr 21, 2023 234 likes •567 views

Paint the Web creating art with CSS Eva Lettner Frontend Developer @ ChillBill Coding "Artist" Code is magic We are Creators! CSS Original: https://www.instagram.com/365days.of.cacti/ Lets draw something! Shapes

SLIDE 1

Paint the Web

creating art with CSS

SLIDE 2

Eva Lettner

Frontend Developer @ ChillBill Coding "Artist"

SLIDE 3

Code is magic

SLIDE 4

We are

Creators!

SLIDE 5

♥ CSS ♥

SLIDE 6

Original: https://www.instagram.com/365days.of.cacti/

SLIDE 7

SLIDE 8

Lets draw something!

SLIDE 9

SLIDE 10

Shapes

SLIDE 11

Rectangles

.rectangle { width: 20rem; height: 20rem; }

SLIDE 12

Triangles

.triangle { border-top: 10rem solid yellow; border-left: 10rem solid orange; border-bottom: 10rem solid purple; border-right: 10rem solid blue; }

SLIDE 13

SLIDE 14

Pseudo Elements

SLIDE 15

before :before & :after after

SLIDE 16

I'm a 1 div tooltip!

SLIDE 17

SLIDE 18

Box-Shadow

SLIDE 19

.eye { box-shadow: 0px 0px 0px #798d52, inset 0px 0px 0px #798d52; }

SLIDE 20

SLIDE 21

Why?

SLIDE 22

Why not?

SLIDE 23

It's fun!

SLIDE 24

Learn new stuff!

SLIDE 25

Community ♥

SLIDE 26

CSS images in production?

SLIDE 27

What did we learn?

SLIDE 28

Play

SLIDE 29

Learn

SLIDE 30

Just because it's "useless" doesn't mean it's a waste

f time

SLIDE 31

Resources

Codepen: http://www.codepen.io #cssdailyimages

SLIDE 32

@eva_trostlos