Zvětšení a zmenšení v CSS
Jak v CSS zoomovat (zvětšovat a zmenšovat) elementy.
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%;
}
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í).
- Jak funguje vykreslování stránky – co prohlížeč dělá se stránkou při načítání a změnách
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í
Komentáře