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í

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Column – obsah ve sloupcích

Vícesloupcový text a column

CSS vlastnost column umožňuje rozdělení textu do více sloupců.

Rotace

Rotace obsahu

Napříč prohlížeči funkční řešení vytvoření svislého textu (otočeného o 90 stupňů).

Kulaté rohy

Kulaté okraje v CSS

Jak vytvořit v CSS zaoblené okraje.

CSS průhlednost (opacity)

Průhledný obsah v CSS

Pro zprůhlednění obsahu existují různé možnosti. Nejen CSS vlastnost opacity.

Filtr blur

Rozmazání obsahu

Rozmazávání obsahu v různých prohlížečích.

Komentáře