The CSS of Tomorrow - Speaker Deck

Slide 1

Slide 1 text

THE CSS3 OF TOMORROW PETER GASSTON @STOPSATGREEN BROKEN-LINKS.COM

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

“35 Awesome CSS3 Examples!” “50+ Best CSS3 Examples!” “350+ Amazing CSS3 Resources - All You'll Ever Need to Become a CSS3 Master!”

Slide 6

Slide 6 text

CSS3 TODAY border-radius: 5px; box-shadow: 2px 2px 4px #000; text-shadow: 4px 4px 2px #000;

Slide 7

Slide 7 text

BACKGROUNDS & BORDERS background-image: url('img1.png'), url('img2.png'), url('img3.png'); border-image: url('img1.png') 20 25 20 25 stretch;

Slide 8

Slide 8 text

SELECTORS :first-child | :last-child :first-of-type | :last-of-type :nth-child() | :nth-last-child() :nth-of-type() | :nth-last-of-type()

Slide 9

Slide 9 text

OPACITY, ALPHA & COLOUR opacity: 0.5; color: rgba(255,0,0,0.5); color: hsl(0,100%,50%); color: hsla(0,100%,50%,0.5);

Slide 10

Slide 10 text

WEB FONTS @font-face { font-family: 'My Font'; src: url('/path/to/font.woff'); } h1 { font-family: 'My Font'; }

Slide 11

Slide 11 text

MEDIA QUERIES @media all and (min-device-width: 480px) @media all and (pixel-ratio: 2) @media screen not (monochrome) @media screen and (max-device-width: 640px) and (touch-enabled: 1)

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

GRADIENTS linear-gradient(45deg,red,yellow); repeating-linear-gradient(red,blue 10%); radial-gradient(circle cover,red,blue); repeating-radial-gradient(red,blue 10%);

Slide 14

Slide 14 text

TRANSFORMATIONS transform: rotate(45deg); transform: rotate3d(1,1,0,45deg);

Slide 15

Slide 15 text

TRANSITIONS & ANIMATIONS @keyframes foo { from { color: #f00; } 50% { color: #00f; } to { color: #0f0; } } div { animation: foo 1s linear; } transition: all 2s 500ms ease-in;

Slide 16

Slide 16 text

TRANSITIONS & ANIMATIONS

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

MULTIPLE COLUMNS div { column-count: 3; column-width: 25em; column-gap: 1.5em; column-rule: 3px double #f00; } h2 { column-span: all; }

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

FLEXIBLE BOX LAYOUT A B div { display: flexbox; } .a,.b { width: 40%; } A B .a,.b { width: flex(1); } A B .a { width: flex(3); } .b { width: flex(2); }

Slide 22

Slide 22 text

FLEXIBLE BOX LAYOUT a .a { flex-align: center; flex-pack: center; width: flex(0); } c a b div { flex-flow: column; } .a,.b { flex-order: 2; } .c { flex-order: 1; }

Slide 23

Slide 23 text

GRID LAYOUT div { display: grid; grid-columns: 1fr 1fr 2fr; } div { display: grid; grid-columns: 1fr 1fr 2fr; grid-rows: 80px auto 10em; }

Slide 24

Slide 24 text

GRID LAYOUT article { grid-column: 2; grid-row: 2; grid-column-span: 2; }

Slide 25

Slide 25 text

GRID LAYOUT a b c .a { grid-cell: a; } .b { grid-cell: b; } .c { grid-cell: c; } a b c div { grid-template: 'abc'; }

Slide 26

Slide 26 text

GRID LAYOUT a b c div { grid-template: 'aa' 'bc'; } a b c div { grid-template: 'acc' 'a.b'; }

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

REGIONS a b .a { flow-into: foo; } .b { flow-from: foo; } b c d e .b, .c, .d, .e { flow-from: foo; } @region .b { color: #f00 }

Slide 29

Slide 29 text

LINE GRID article { layout-grid-line: 1.5; } h1 { layout-grid-mode: block; } p { layout-grid-mode: line; margin-bottom: 1gd; }

Slide 30

Slide 30 text

EXCLUSIONS div { shape-outside: circle(50%, 50%, 50px); wrap-flow: both; }

Slide 31

Slide 31 text

EXCLUSIONS div { shape-inside: polygon(150px,0 0,300px 300px,300px); }

Slide 32

Slide 32 text

EXCLUSIONS

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

PAGED MEDIA @media paged { height: 100%; overflow: paged-x; } @navigation { nav-right: link-rel(next); }

Slide 35

Slide 35 text

FILTER EFFECTS img { filter: grayscale(0.25); } img { filter: blur(5,2) sepia(1); }

Slide 36

Slide 36 text

SHADERS img { filter: custom(url(foo.fs), 20 20, phase 90); }

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

IMAGES background-image: image('img.svg','img.png',#f00); background-image: url(' img.png#xywh=0,20,25,30'); background-image: element(#foobar);

Slide 40

Slide 40 text

VALUES width: calc((12em * 3) + 10px); height: min(3em, 30px); list-style-type: cycle(disk, circle); content: attr(href);

Slide 41

Slide 41 text

CONDITIONAL RULES @supports (display: grid) {} @supports (display: box) and (background: linear-gradient) {} @supports (display: box) or (background: linear-gradient) {} @supports not (transform: rotate3d) {}

Slide 42

Slide 42 text

CONDITIONAL RULES @document url('http://w3.org/index.html') {} @document url-prefix('http://w3.org/blog/') {} @document domain('w3.org') {} @document regexp('http://w3.org/[^/]*-\\d{8}/') {}

Slide 43

Slide 43 text

DEVICE ADAPTATION @viewport { width: device-width; }

Slide 44

Slide 44 text

VARIABLES @var $myColor #f00; h1 { color: $myColor; }

Slide 45

Slide 45 text

MIXINS @mixin myStuff { color: #f00; font-size: 1.5em; } h1 { @mix myStuff; font-weight: bold; }

Slide 46

Slide 46 text

MIXINS @mixin myStuff($myColor #f00) { color: $myColor; font-size: 1.5em; } h1 { @mix myStuff(#00f); font-weight: bold; }

Slide 47

Slide 47 text

NESTING h1 { border: 1px solid #f00; & a { color: #00f; &:hover { color: #ff0; } } }

Slide 48

Slide 48 text

SELECTORS :matches(header,aside,div) h1 {} :not(header,aside,div) h1 {} $div h1 {}

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

THX. PLEASE BUY MY BOOK http://nostarch.com/css3.htm

Slide 51

Slide 51 text

Superman copyright is a contentious issue, but the images I use here belong to DC Comics and no permission was given. I hope they fall under fair use doctrines. You should buy a copy of All Star Superman – it’s really good! LEGAL NOTE