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:
The item has been added. The item has been added. Some error
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">
Našeptávání
Plurál
originál:www.misantrop.info/pluraly-pomoci-css/ bit.ly/bcb-5
Plurál html:
Na webu <span data-count="0" data-pronoun=" jsou">je právě <span data-count="0" dataplural="é" data-plural-n="ů">0 uživatel online
Na webu <span data-count="1" data-pronoun=" jsou">je právě <span data-count="1" dataplural="é" data-plural-n="ů">1 uživatel online
…
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?