CSS resize

V Opeře 12 funguje resize nejspíš jen u značek <textarea> a <input>; v Opeře 17 založené na Webkitu už resize funguje všude. Ve Firefoxu a Chrome také není problém. IE (včetně IE 11) se zatím vůbec nechytá.

Co umí? Umožňuje bez JavaScriptu uživateli měnit rozměry libovolného elementu (třeba <div>u).

Tento element je možné ve Firefoxu, Chromu a Webkit Opeře roztahovat.

CSS změna rozměrů bude fungovat jen při nastaveném overflow na libovolnou hodnotu (auto, scroll), pochopitelně kromě výchozího overflow: visible.

Stanovit maximální a minimální rozměry roztahování jde vlastnostmi min-width a max-width / min-height a max-height. Samotné height nebo width platí zároveň jako minimální možný rozměr.

Zápis

Zápis vlastnosti resize je dost jednoduchý.

element {
  resize: both;
}

Může nabývat čtyřech hodnot:

  • both — roztahování do obou stran,
  • horizontal — roztahování do strany,
  • vertical — roztahování do výšky,
  • none — zruší možnost změn rozměrů (má smysl třeba pro <textarea>, kde bývá výchozí resize: both).

Tento element je možné ve Firefoxu, Chromu a Webkit Opeře roztahovat jen vodorovně.

 ↔ 

Tento element je možné ve Firefoxu, Chromu a Webkit Opeře roztahovat jen svisle.

 ↕ 

Roztahování formulářových prvků

Doplnění od Kolesovy plavkyně:

Textový <input> jde v Opeře roztahovat jen vodorovně i při nastavení resize: both, v Chrome nejde roztáhnout vůbec, přestože se symbol pro roztažení ukazuje.

Resize kursor (cursor)

Kursor do resizovací podoby je možné změnit následovně:

element {
  cursor: se-resize; /* both */
  cursor: e-resize; /* vodorovně */
  cursor: n-resize; /* svisle */
}

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ářů ↓

CSS vlastnosti content a attr

Úprava obsahu pomocí content a attr

Pomocí CSS vlastnosti content a funkce attr lze ovlivňovat z CSS výsledný textový obsah webu.

CSS transition

Animace v CSS pomocí transition

CSS vlastností transition lze na stránce docílit přechodových animací bez JavaScriptu.

CSS animace

CSS vlastnost animation

Animování prvků na stránce pomocí čistého CSS s využitím @keyframes.

Column – obsah ve sloupcích

Vícesloupcový text a column

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

CSS flex

Flexboxy

Flexibilní stylování boxů je jednoduší a schopnější alternativa k obtékání (float), ale zatím hudba budoucnosti…

Komentáře