Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Jed Schmidt HELLO MY NAME IS

Slide 4

Slide 4 text

german

Slide 5

Slide 5 text

german

Slide 6

Slide 6 text

german english

Slide 7

Slide 7 text

german english

Slide 8

Slide 8 text

german english CSS

Slide 9

Slide 9 text

a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input ins kbd keygen label legend li link main map mark math menu menuitem meta meter nav noscript object ol optgroup option output p param pre progress q rp rt ruby s samp script section select small source span strong style sub summary svg table tbody td textarea tfoot th thead time title tr track u ul var video wbr

Slide 10

Slide 10 text

animation animation‑name animation‑duration animation‑timing‑function animation‑delay animation‑iteration‑count animation‑direction animation‑play‑state background background‑attachment background‑color background‑image background‑position background‑repeat background‑clip background‑origin background‑size border border‑bottom border‑bottom‑color border‑bottom‑style border‑bottom‑width border‑color border‑left border‑left‑color border‑left‑style border‑left‑width border‑right border‑right‑color border‑right‑style border‑right‑width border‑style border‑top border‑top‑color border‑top‑style border‑top‑width border‑width outline outline‑color outline‑style outline‑width border‑bottom‑left‑radius border‑bottom‑right‑radius border‑image border‑image‑outset border‑image‑repeat border‑image‑slice border‑image‑source border‑image‑width border‑radius border‑top‑left‑radius border‑top‑right‑radius box‑decoration‑break box‑shadow overflow‑x overflow‑y overflow‑style rotation rotation‑point color‑profile opacity rendering‑intent bookmark‑label bookmark‑level bookmark‑target float‑offset hyphenate‑after hyphenate‑before hyphenate‑character hyphenate‑lines hyphenate‑resource hyphens image‑resolution marks string‑set height max‑height max‑width min‑height min‑width width box‑align box‑direction box‑flex box‑flex‑group box‑lines box‑ordinal‑group box‑orient box‑pack font font‑family font‑size font‑style font‑variant font‑weight @font‑face font‑size‑adjust font‑stretch content counter‑increment counter‑reset quotes crop move‑to page‑policy grid‑columns grid‑rows target target‑name target‑new target‑position alignment‑adjust alignment‑baseline baseline‑shift dominant‑baseline drop‑initial‑after‑adjust drop‑initial‑after‑align drop‑initial‑before‑adjust drop‑initial‑before‑align drop‑initial‑size drop‑initial‑value inline‑box‑align line‑stacking line‑stacking‑ruby line‑stacking‑shift line‑stacking‑strategy text‑height list‑style list‑style‑image list‑style‑position list‑style‑type margin margin‑bottom margin‑left margin‑right margin‑top marquee‑direction marquee‑play‑count marquee‑speed marquee‑style column‑count column‑fill column‑gap column‑rule column‑rule‑color column‑rule‑style column‑rule‑width column‑span column‑width columns padding padding‑bottom padding‑left padding‑right padding‑top fit fit‑position image‑orientation page size bottom clear clip cursor display float left overflow position right top visibility z‑index orphans page‑break‑after page‑break‑before page‑break‑inside widows ruby‑align ruby‑overhang ruby‑position ruby‑span mark mark‑after mark‑before phonemes rest rest‑after rest‑before voice‑balance voice‑duration voice‑pitch voice‑pitch‑range voice‑rate voice‑stress voice‑volume border‑collapse border‑spacing caption‑side empty‑cells table‑layout color direction letter‑spacing line‑height text‑align text‑decoration text‑indent text‑transform unicode‑bidi vertical‑align white‑space word‑spacing hanging‑punctuation punctuation‑trim text‑align‑last text‑justify text‑outline text‑overflow text‑shadow text‑wrap word‑break word‑wrap transform transform‑origin transform‑style perspective perspective‑origin backface‑visibility transition transition‑property transition‑duration transition‑timing‑function transition‑delay appearance box‑sizing icon nav‑down nav‑index nav‑left nav‑right nav‑up outline‑offset resize

Slide 11

Slide 11 text

intro

Slide 12

Slide 12 text

intro.css

Slide 13

Slide 13 text

intro.cß

Slide 14

Slide 14 text

H1

Slide 15

Slide 15 text

H1 UL

Slide 16

Slide 16 text

H1 * BODY

Slide 17

Slide 17 text

H1 * BODY

Slide 18

Slide 18 text

H1 * BODY

Slide 19

Slide 19 text

.intro { }

Slide 20

Slide 20 text

.intro { background: }

Slide 21

Slide 21 text

.intro { background: #CSSCONF; }

Slide 22

Slide 22 text

.intro { background: #C55C0NF; }

Slide 23

Slide 23 text

.intro { background: #C55C1F; }

Slide 24

Slide 24 text

.intro { background: #C55C1F; }

Slide 25

Slide 25 text

.intro { background: #C55C1F url("love it!"); }

Slide 26

Slide 26 text

*:before { }

Slide 27

Slide 27 text

*:before { content: "filler"; }

Slide 28

Slide 28 text

*:before { content: "filler"; color: #0ff; }

Slide 29

Slide 29 text

*:before { content: "filler"; color: #0ff; color: rgba(0, 0, 0, 0); }

Slide 30

Slide 30 text

*:before { content: "filler"; color: #0ff; color: rgba(0, 0, 0, 1); }

Slide 31

Slide 31 text

*:before { content: "filler"; color: #0ff; color: rgba(0, 0, 0, 1); font-stretch: semi-expanded; }

Slide 32

Slide 32 text

ol.jokes { }

Slide 33

Slide 33 text

ol.jokes { font-weight: lighter; }

Slide 34

Slide 34 text

ol.jokes { font-weight: lighter; color: red; }

Slide 35

Slide 35 text

ol.jokes { font-weight: lighter; color: lavenderblush; }

Slide 36

Slide 36 text

ol.jokes { font-weight: lighter; color: #FFF0F5; }

Slide 37

Slide 37 text

ol.jokes { font-weight: lighter; color: #FFF0F5; bottom: 0; }

Slide 38

Slide 38 text

ol.jokes { font-weight: lighter; color: #FFF0F5; bottom: 0; } .joke:nth-child(10) { }

Slide 39

Slide 39 text

ol.jokes { font-weight: lighter; color: #FFF0F5; bottom: 0; } .joke:nth-child(10) { float: right; }

Slide 40

Slide 40 text

ol.jokes { font-weight: lighter; color: #FFF0F5; bottom: 0; } .joke:nth-child(10) { float: right; font-family: Comic Sans; color: gold; }

Slide 41

Slide 41 text

ol.jokes { font-weight: lighter; color: #FFF0F5; bottom: 0; } .joke:nth-child(10) { float: right; font-family: Comic Sans; color: #ffd700; }

Slide 42

Slide 42 text

area

Slide 43

Slide 43 text

area#berlin

Slide 44

Slide 44 text

area#berlin style

Slide 45

Slide 45 text

area#berlin style style

Slide 46

Slide 46 text

area#berlin style style { background-repeat: repeat; }

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

area

Slide 55

Slide 55 text

area +

Slide 56

Slide 56 text

area + #berlinwall { }

Slide 57

Slide 57 text

area + #berlinwall { left: 2000000px; }

Slide 58

Slide 58 text

area + #berlinwall { left: 2000000px; border: solid; }

Slide 59

Slide 59 text

area + #berlinwall { left: 2000000px; border: solid; border-collapse: collapse; }

Slide 60

Slide 60 text

var berlinWall

Slide 61

Slide 61 text

var berlinWall = $( )

Slide 62

Slide 62 text

var berlinWall = $("area" )

Slide 63

Slide 63 text

var berlinWall = $("area:has( )")

Slide 64

Slide 64 text

var berlinWall = $("area:has(.selhoff)")

Slide 65

Slide 65 text

var berlinWall = $("area:has(.selhoff)")

Slide 66

Slide 66 text

address

Slide 67

Slide 67 text

address#invalidenstraße

Slide 68

Slide 68 text

:lang(de) address#invalidenstraße

Slide 69

Slide 69 text

:lang(de) address#invalidenstraße :lang(en)

Slide 70

Slide 70 text

:lang(de) address#invalidenstraße :lang(en) address.street

Slide 71

Slide 71 text

:lang(de) address#invalidenstraße :lang(en) address.street:disabled

Slide 72

Slide 72 text

section

Slide 73

Slide 73 text

section#villaelisabeth { }

Slide 74

Slide 74 text

section#villaelisabeth { background-position: right center; }

Slide 75

Slide 75 text

section#villaelisabeth { background-position: right center; background-color: white; }

Slide 76

Slide 76 text

section#villaelisabeth { background-position: right center; background-color: #ffffff; }

Slide 77

Slide 77 text

section#villaelisabeth { background-position: right center; background-color: #ffffff; color: #faebd7; }

Slide 78

Slide 78 text

section#villaelisabeth { background-position: right center; background-color: #ffffff; color: antiquewhite; }

Slide 79

Slide 79 text

section#villaelisabeth { background-position: right center; background-color: #ffffff; color: antiquewhite; white-space: normal; }

Slide 80

Slide 80 text

section#villaelisabeth { background-position: right center; background-color: #ffffff; color: antiquewhite; white-space: normal; display: none; }

Slide 81

Slide 81 text

section#villaelisabeth { background-position: right center; background-color: #ffffff; color: antiquewhite; white-space: normal; display: none; /* display: nun; */ }

Slide 82

Slide 82 text

@import url(http://cssconf.com);

Slide 83

Slide 83 text

.cssconf

Slide 84

Slide 84 text

#cssconfeu

Slide 85

Slide 85 text

#cssconfeu:first-of-type,

Slide 86

Slide 86 text

#cssconfeu:first-of-type, #cssconfeu:only-of-type,

Slide 87

Slide 87 text

#cssconfeu:first-of-type, #cssconfeu:only-of-type, .organizers > .conference:first-child,

Slide 88

Slide 88 text

#cssconfeu:first-of-type, #cssconfeu:only-of-type, .organizers > .conference:first-child, .organizers > .conference:nth-child(1)

Slide 89

Slide 89 text

#cssconfeu:first-of-type, #cssconfeu:only-of-type, .organizers > .conference:first-child, .organizers > .conference:nth-child(1) { z-index: 1; }

Slide 90

Slide 90 text

#cssconfeu { }

Slide 91

Slide 91 text

#cssconfeu { margin: 0; }

Slide 92

Slide 92 text

#cssconfeu { margin: 0; left: 0; }

Slide 93

Slide 93 text

#cssconfeu { margin: 0; left: 0; } :not(#cssconfeu) { }

Slide 94

Slide 94 text

#cssconfeu { margin: 0; left: 0; } :not(#cssconfeu) { overflow: }

Slide 95

Slide 95 text

#cssconfeu { margin: 0; left: 0; } :not(#cssconfeu) { overflow: hidden; }

Slide 96

Slide 96 text

ul.speakers { }

Slide 97

Slide 97 text

ul.speakers { top: 1%; }

Slide 98

Slide 98 text

ul.speakers { top: 1%; background: #BADA55; }

Slide 99

Slide 99 text

ul.speakers { top: 1%; background: #BADA55; position: absolute; }

Slide 100

Slide 100 text

u

Slide 101

Slide 101 text

u:not(:focus)

Slide 102

Slide 102 text

u:not(:focus) + ::selection { }

Slide 103

Slide 103 text

u:not(:focus) + ::selection { background: #000000; }

Slide 104

Slide 104 text

u:not(:focus) + ::selection { background: #000000; background: #C0FFEE; }

Slide 105

Slide 105 text

u:not(:focus) + ::selection { background: #000000; background: #C0FFEE; background: #0DECAF; }

Slide 106

Slide 106 text

u:not(:focus) + ::selection { background: #000000; background: #C0FFEE; background: #0DECAF; background: #BADBAD; }

Slide 107

Slide 107 text

u:not(:focus) + ::selection { background: #000000; background: #C0FFEE; background: #0DECAF; background: #BADBAD; background: }

Slide 108

Slide 108 text

u:not(:focus) + ::selection { background: #000000; background: #C0FFEE; background: #0DECAF; background: #BADBAD; background: #999999; }

Slide 109

Slide 109 text

u:not(:focus) + ::selection { background: #000000; background: #C0FFEE; background: #0DECAF; background: #BADBAD; background: #999999; background-repeat: no-repeat; }

Slide 110

Slide 110 text

.toilet { }

Slide 111

Slide 111 text

.toilet { direction: ltr; }

Slide 112

Slide 112 text

.toilet { direction: ltr; } .toilet:visited

Slide 113

Slide 113 text

.toilet { direction: ltr; } .toilet:visited + p:empty

Slide 114

Slide 114 text

.toilet { direction: ltr; } .toilet:visited + p:empty { }

Slide 115

Slide 115 text

.toilet { direction: ltr; } .toilet:visited + p:empty { position: fixed; }

Slide 116

Slide 116 text

.toilet { direction: ltr; } .toilet:visited + p:empty { position: fixed; right: 100%; }

Slide 117

Slide 117 text

.policy

Slide 118

Slide 118 text

.policy:not(.jerk)

Slide 119

Slide 119 text

* { user-select: none; }

Slide 120

Slide 120 text

* { user-select: none; } img[src*="7"] { transform: rotate(180deg); }

Slide 121

Slide 121 text

* { user-select: none; } img[src*="7"] { transform: rotate(180deg); } p { animation: fade 500s; }

Slide 122

Slide 122 text

* { user-select: none; } img[src*="7"] { transform: rotate(180deg); } p { animation: fade 500s; } h1 { animation: blink 1s infinite; }

Slide 123

Slide 123 text

1 point

Slide 124

Slide 124 text

1pt

Slide 125

Slide 125 text

1pt !important

Slide 126

Slide 126 text

img { }

Slide 127

Slide 127 text

img { display: inline; }

Slide 128

Slide 128 text

img { display: inline; display: block; }

Slide 129

Slide 129 text

img { display: inline; display: block; display: inline-block; }

Slide 130

Slide 130 text

img { display: inline; display: block; display: inline-block; } :not(#cssconf:after) { }

Slide 131

Slide 131 text

img { display: inline; display: block; display: inline-block; } :not(#cssconf:after) { width: }

Slide 132

Slide 132 text

img { display: inline; display: block; display: inline-block; } :not(#cssconf:after) { width: 0; }

Slide 133

Slide 133 text

img { display: inline; display: block; display: inline-block; } :not(#cssconf:after) { width: 0px; }

Slide 134

Slide 134 text

No content

Slide 135

Slide 135 text

@import url( );

Slide 136

Slide 136 text

@import url(//www.stubbornella.org);