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

Rozměr: px

Začít zobrazení ze stránky:

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

Julie Svobodová
před 7 lety
Počet zobrazení:

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

2 Kolik osob na tom dělá? grafik kodér programátor copywriter / content editor

3 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

4 A teď konkrétně Modální okna Stránkování Flash zprávičky Skloňování / množné čísla Našeptávání

5 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ší

6 + Rychlost & datové přenosy

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

8 Dialogové okno bit.ly/bcb-1

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

10 Zobrazení flash zpráviček bit.ly/bcb-2

11 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>

12 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; }

13 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; animace { 0% { opacity: 0; left: -500px; } 100% { opacity: 1; left: 0; } }

14 Kalkulačka v html / css bit.ly/bcb-3

15 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>

16 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; }

17 ~

18 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' }

19 Našeptávač při psaní v inputu (pouze html) bit.ly/bcb-4

20 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>

21 Plurál originál: bit.ly/bcb-5

22 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>

23 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); }

24 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; }

25 CSS přepínače bit.ly/bcb-6

26 CSS přepínače html: <div class="switch demo3"> <input type="checkbox"> <label><i></i></label> </div>

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

28 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"; }

29 Pozor na neviditelný text! Na webu je slovo bitcoin, ale kde? Plovoucí hlavička nesmí skrývat nadpisy při prokliku na záložky

30 Děkuji za

31 Slajdy bit.ly/bcb-0

32 gist.github.com gist.github.com/iiic/2187afb269fcd gist.github.com/iiic/ef71adf96e80384fa8ee gist.github.com/iiic/797a9b2e2d ff1 gist.github.com/iiic/498e82ffeb8a8ce468ea gist.github.com/iiic/640004b213d149e6d6e6 tympanus. net/tutorials/css3buttonswitches/index3.html

33 Otázky?

Podobné dokumenty

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE