CSSConf.eu Intro

Jed Schmidt HELLO MY NAME IS

german

german english

german english CSS

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

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

intro.css

intro.cß

H1 * BODY

.intro { }

.intro { background: }

.intro { background: #CSSCONF; }

.intro { background: #C55C0NF; }

.intro { background: #C55C1F; }

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

*:before { }

*:before { content: "filler"; }

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

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

1); }

1); font-stretch: semi-expanded; }

ol.jokes { }

ol.jokes { font-weight: lighter; }

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

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

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

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

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

{ float: right; }

{ float: right; font-family: Comic Sans; color: gold; }

{ float: right; font-family: Comic Sans; color: #ffd700; }

area#berlin

area#berlin style

area#berlin style style

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

area +

area + #berlinwall { }

area + #berlinwall { left: 2000000px; }

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

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

var berlinWall

var berlinWall = $( )

var berlinWall = $("area" )

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

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

address

address#invalidenstraße

:lang(de) address#invalidenstraße

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

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

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

section

section#villaelisabeth { }

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

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

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

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

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

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

normal; display: none; }

normal; display: none; /* display: nun; */ }

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

.cssconf

#cssconfeu

#cssconfeu:first-of-type,

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

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

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

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

#cssconfeu { }

#cssconfeu { margin: 0; }

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

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

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

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

ul.speakers { }

ul.speakers { top: 1%; }

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

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

u:not(:focus)

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

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

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

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

background: #BADBAD; }

background: #BADBAD; background: }

background: #BADBAD; background: #999999; }

background: #BADBAD; background: #999999; background-repeat: no-repeat; }

.toilet { }

.toilet { direction: ltr; }

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

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

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

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

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

.policy

.policy:not(.jerk)

* { user-select: none; }

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

p { animation: fade 500s; }

p { animation: fade 500s; } h1 { animation: blink 1s infinite; }

1 point

1pt !important

img { }

img { display: inline; }

img { display: inline; display: block; }

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

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

{ width: }

{ width: 0; }

{ width: 0px; }

@import url( );

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

CSSConf.eu Intro

CSSConf.eu Intro

More Decks by Jed Schmidt

Other Decks in Technology

Featured

Transcript