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: <div id="snippet--flashmessage"> </div> <input id="flash-1" type="checkbox"> <label for="flash-1" class="flash ok">the item has been added.</label> <input id="flash-2" type="checkbox"> <label for="flash-2" class="flash ok">the item has been added.</label> <input id="flash-3" type="checkbox"> <label for="flash-3" class="flash error">some error</label>
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: <input type="radio" name="n" id="n1" value="1"> <label for="n1">1</label> <input type="radio" name="n" id="n2" value="2"> <label for="n2">2</label> <input type="radio" name="n" id="n3" value="3"> <label for="n3">3</label> <input type="checkbox" id="plus"> <label for="plus">+</label> <input type="radio" name="m" id="m1" value="1"> <label for="m1">1</label> <input type="radio" name="m" id="m2" value="2"> <label for="m2">2</label> <input type="radio" name="m" id="m3" value="3"> <label for="m3">3</label> <input type="checkbox" id="equal"> <label for="equal">=</label> <div id="display"></div>
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: <!DOCTYPE HTML> <meta charset="utf-8"> <title>našeptávání</title> <input list="browsers"> <datalist id="browsers"> <option value="safari"> <option value="internet Explorer"> <option value="opera"> <option value="firefox"> </datalist>
Plurál originál:www.misantrop.info/pluraly-pomoci-css/ bit.ly/bcb-5
Plurál html: <div> Na webu <span data-count="0" data-pronoun=" jsou">je</span> právě <span data-count="0" dataplural="é" data-plural-n="ů">0 uživatel</span> online </div> <div> Na webu <span data-count="1" data-pronoun=" jsou">je</span> právě <span data-count="1" dataplural="é" data-plural-n="ů">1 uživatel</span> online </div>
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: <div class="switch demo3"> <input type="checkbox"> <label><i></i></label> </div>
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?