07-pokrocile-techniky

7. Pokročilé techniky

CSS preprocesory

• zjednodušují tvorbu komplexních stylů a jejich zápis v textové podobě
• doplňují funkce pro výpočty, konstanty, předpřipravené části stylů, cykly, podmínky atd.
• rozšířenými zástupci jsou SASS, LESS a STYLUS
• Sass Guide
• Sass online compiler
• Stylus documentation
• Stylus - online ukázky
• Less - český manuál

Ukázka kódu ve Stylusu:

$linkColor: #00b3ff;

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: $linkColor;
    &:hover {
      color: darken($linkColor, 20%);    
    }   
  }
}

Responsivní weby

• stránky reagují na různou velikost okna
• v ideálním případě jde web zobrazit na všech možných zařízeních s různou velikostí okna prohlížeče
• media queries - viz 3. cvičení
• mobile first vs. desktop first přístup - dnes je populární mobile first (nejdřív uděláme web pro mobily, teprve pak pro desktop)
• tvorba speciální mobilní verze webu vs. responsivní styly (výhody a nevýhody)

Responsivní obrázky

• velikost obrázku se mění dle velikosti okna
• width: 100% - šířka obrázku = šířka okna. Nevýhoda: zvětšuje obrázek i přes jeho původní velikost.
• max-width: 100% - šířka obrázku = šířka okna. Nezvětšuje obrázek přes jeho původní šířku.
• responsive-images.html
• http://www.w3schools.com/css/css_rwd_images.asp
• více viz 4. cvičení - nové možnosti obrázků v HTML 5

Pozadí

• backgrounds.html
• http://www.w3schools.com/css/css_rwd_images.asp
• pozadí elementu přes background-image: url('NĚJAKÉ URL');
• background-size: contain - obrázek vyplní pozadí, ale zachová původní velikost
• background-size: 100% 100% - obrázek vyplní pozadí, úplně, nezachová původní velikost
• background-repeat: no-repeat - obrázek se nebude opakovat, pokud jeho velikost nestačí na výplň pozadí
• background-size: cover - obrázek se v pozadí přiblíží tak, aby zakryl celou plochu, udělá si výřez, pokud je to nutné.

Bootstrap

• web framework, defacto standard při vývoji web aplikací
• CSS, komponenty, JavaScript přes jQuery
• responsivní layout, grid model
• mobile-first přístup
• kompatibilní se všemi moderními prohlížeči
• razantně urychluje vývoj
• velmi doporučujeme používat
• http://getbootstrap.com/getting-started/
• http://getbootstrap.com/css/
• http://getbootstrap.com/components/
• http://getbootstrap.com/javascript/
• bootstrap-grid.html
  • více ukázek gridu a responsivních sloupců tady
• bootstrap-responsive.html
• bootstrap-css.html
• bootstrap-components.html

Animace pomocí CSS

• animace v CSS - změna jednoho stylu v jiný
• pro animaci je třeba nastavit keyframes - konkrétní stavy v čase pro animaci
• https://developer.mozilla.org/en-US/docs/Web/CSS/animation
• http://www.w3schools.com/cssref/css3_pr_animation.asp
• css-animation.html

Transformace pomocí CSS

• transformace v CSS - změna objektu - posunutí, rotace, atd.
• https://developer.mozilla.org/en-US/docs/Web/CSS/transform
• http://www.w3schools.com/cssref/css3_pr_transform.asp
• http://meyerweb.com/eric/tools/matrix/
• http://desandro.github.io/3dtransforms/
• css-transform.html