O webu
CSS zoom

Již v prastarých Internet Explorerech bylo možné cokoliv zvětšit nestandardní CSS vlastností zoom. V IE, Chrome a nové Opeře funguje zoom dodnes. Pro zvětšení/zmenšení se zadává buď poměr změny velikosti, nebo procenta.

.dvakrat-vetsi {
  zoom: 2;
  /* totéž jako */
  zoom: 200%;
}

Živá ukázka

CSS vlastnost zoom funguje v podstatě stejně, jako by se danému elementu zvětšily nebo zmenšily rozměry, písmo a podobně.

Vlastností zoom upravený element tak ovlivní i své okolí.

Transformace scale

Modernější a podporovaný i ve Firefoxu je způsob změny velikosti pomocí CSS transformace scale. Element upravený transformací neovlivňuje své okolí, což činí úpravy méně náročné na výpočetní výkon (nemusí se přepočítávat umístění okolí).

Z neovlivňování okolí plyne fakt, že zvětšený element bude okolí překrývat.

Zápis

.dvakrat-vetsi {
  transform: scale(2);
}

Funkce scale může element zvětšovat zvlášť ve směru vodorovném a zvlášť ve směru svislém při zadání dvou parametrů.

.dvakrat-sirsi-ctyrikrat-vyssi {
  transform: scale(2, 4);
}

Pro změnu velikosti pouze v ose X nebo ose Y existují ještě funkce:

  • scaleX()
  • scaleY()
.dvakrat-sirsi-ctyrikrat-vyssi {
  transform: scaleX(2) scaleY(4);
}

Hezké na změně velikosti pomocí tranform: scale je možnost animace pomocí transition. Stačí přidat jeden řádek (plus případné vlastnosti s CSS prefixy) a změny velikosti jsou plynulé.

element {
  transition: 5.s transform;
}

Podpora v prohlížečích

Transformace pro zvětšení nebo zmenšení fungují od:

  • IE 9,
  • Chrome 4,
  • Opera 11.5,
  • Firefox 3.5,
  • Safari 3.1

Pro podporu i ve starších prohlížečích se používají CSS prefixy:

.zvetseny {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}

Využití

Transformace scale se asi nejvíc hodí pro animované efekty.

Plynulé zobrazení přes celou obrazovku

Po kliknutí na tlačítko se přes celou obrazovku plynule zobrazí obsah.

Obsah přes celou obrazovku.

Náhled webu

Zmenšením webu v <iframe> jde vytvořit okamžitý náhled webu.

Není to ale úplně ideální řešení, protože:

  • stránka může blokovat zobrazení v rámu,
  • celý obsah stránky se bude muset stáhnout, což bude poměrně datově náročné

Náhled webu se dá snadno získat i jako obrázek:

Pomocí zvětšování/zmenšování jde docílit i různých pěkných efektů.

  • Magnifier.js – zvětšování části obrázku
  • Zoomerang – zvětšení čehokoliv na stránce po kliknutí