Neprogramuj, pokud to není nezbytně nutné. Michal Lupečka

Neprogramuj, pokud to není nezbytně nutné

Michal Lupečka

Kolik osob na tom dělá? ● ● ● ●

grafik kodér programátor copywriter / content editor

CSS bude mít na starosti vzhled! Co už se nemusí programovat? ● mobilní verze ● některé animace a transformace ● kulaté rohy ● stíny textu ● stíny objektu ● našeptávání textu do inputu ● …

A teď konkrétně ● ● ● ● ● ●

Modální okna Stránkování Flash zprávičky Skloňování / množné čísla Našeptávání

Výhody / Nevýhody HTML & CSS + rychlost + bezpečnost +/- podpora starších prohlížečů +/- datové přenosy

Javascript + více možností + více nastavení + přesnější

+ Rychlost & datové přenosy

Jednoduchá CSS podmínka Ukládání stavů ● url adresa ● input type=”checkbox” ● input type=”radio”

“Dialogové okno”

bit.ly/bcb-1

1. Podmínka s URL adresou web.tld/adresa#prihlaseni css: #prihlaseni { display:none; /* … */ } #prihlaseni:target { display:block; /* … */ }

Zobrazení ‘flash zpráviček’

bit.ly/bcb-2

2. Podmínka s input type=” checkbox” html:

2. Podmínka s input type=” checkbox” css 1/2: #snippet--flashMessage { background: none; position: fixed; } #snippet--flashMessage input { display: none; } #snippet--flashMessage input:checked+label { display: block; left: -600px; opacity: 0; transition: all 2s linear; }

2. Podmínka s input type=” chekcbox” css 2/2: #snippet--flashMessage label { width: 280px; opacity: 1; left: 0; display: block; animation: animace 1.4s linear; } @keyframes animace { 0% { opacity: 0; left: -500px; } 100% { opacity: 1; left: 0; }}

Kalkulačka v html / css

bit.ly/bcb-3

3. Podmínka s input type=”radio” html: 1 2 3 … + 1 2 3 … =

3. Podmínka s input type=”radio” css 1/2: label { display:block; border:4px solid #666; } input {display:none;} input[name="m"], input[name="m"]+label { display:none; } #plus:checked ~ input[name="m"]+label { display:block; }

~

3. Podmínka s input type=”radio” css 2/2: #n1:checked ~ #plus:checked ~ #m1:checked ~ #equal: checked ~ #display:after { content:'2' } #n1:checked ~ #plus:checked ~ #m2:checked ~ #equal: checked ~ #display:after, #n2:checked ~ #plus:checked ~ #m1:checked ~ #equal: checked ~ #display:after { content:'3' }

Našeptávač při psaní v inputu (pouze html)

bit.ly/bcb-4

Našeptávání html: <meta charset="utf-8">

Plurál

originál:www.misantrop.info/pluraly-pomoci-css/ bit.ly/bcb-5

Plurál html: …

Plurál css 1/2: *[data-plural]:after { content: attr(data-plural-n); } *[data-plural][data-count='1']:after { content: none; } *[data-plural][data-count='2']:after, *[data-plural][datacount='3']:after, *[data-plural][data-count='4']:after { content: attr(data-plural); }

Plurál css 2/2: *[data-pronoun][data-count='2'], *[data-pronoun][datacount='3'], *[data-pronoun][data-count='4'] { font-size:0; } *[data-pronoun][data-count='2']:after, *[data-pronoun] [data-count='3']:after, *[data-pronoun][data-count='4']:after { content: attr(data-pronoun); font-size:medium; }

CSS přepínače

bit.ly/bcb-6

CSS přepínače html:

CSS přepínače css 1/2: .switch label { width: 100%; height: 100%; position: relative; display: block; } .switch input { opacity: 0; position: absolute; }

CSS přepínače css 2/2: .switch.demo3 label:after { content: ""; } .switch.demo3 label:before { content: ""; } .switch.demo3 label i { display: block; } .switch.demo3 label i:after { content: ""; } .switch.demo3 label i:before { content: "off"; } .switch.demo3 input:checked ~ label i:before { content: "on"; }

Pozor na neviditelný text! ● Na webu www.biznisweb.sk/ceny-a-balicky je slovo bitcoin, ale kde ? ● Plovoucí hlavička nesmí skrývat nadpisy při prokliku na záložky

Děkuji za pozornost @iiic

Slajdy bit.ly/bcb-0

gist.github.com gist.github.com/iiic/2187afb269fcd7424663 gist.github.com/iiic/ef71adf96e80384fa8ee gist.github.com/iiic/797a9b2e2d5537168ff1 gist.github.com/iiic/498e82ffeb8a8ce468ea gist.github.com/iiic/640004b213d149e6d6e6 tympanus. net/Tutorials/CSS3ButtonSwitches/index3.html

Otázky?