Pouze tento týden sleva až 80 % na e-learning týkající se Javy. Zároveň využij akce až 50 % zdarma při nákupu e-learningu - více informací.
Aktualizovali jsme Zásady zpracování osobních údajů. Pokračováním užívání sítě projevíte souhlas s těmito podmínkami. Tuto zprávu můžete nyní zavřít.
java week + discount 50

User interface (rozhraní) - Český CSS3 manuál

Pomocí CSS3 můžete měnit vlastnosti jako jsou změna velikosti elementu, resizování například textarea nebo tzv. outlining (druhý rámeček s jiným offsetem).

Vlastnost resize

div
{
   resize: both;
   overflow: auto;
}
Pomocí `resize` můžete povolit změnu jeho velikosti klepnutím na růžek a táhnutím. Pokud jako hodnotu uvedete `horizontal` nebo `vertical` pak můžete zárověň zabránit roztahování do některé ze stran.

Vlastnost outline a outline-offset

Pomocí této vlastnosti můžeme nastavit druhý rámeček, který se vykreslí za klasickým border.

div
{
   border: 2px solid red;
   outline: 2px solid blue;
   outline-offset: 15px;
}
Můj div, který má dva rámečky. Ten druhý, který je vykreslený pomocí outline: 2px solid blue; je vzdálen pomocí outline-offset 5px od hranice prvního border.

Vlastnost Box Sizing

Pokud potřebujete mít například dva divy vedle sebe a neznáte jejich délky (potřebujete použít procenta máte různý padding, margin nebo je vůbec neznáte) pak vám jen float: left nebude fungovat. A právě k tomu je tu tato vlastnost.

div.container
{
    width: 10em;
    padding: 5px;
    border: 1em solid;
}

div.vnorenyDiv
{
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Safari */
    width: 50%;
    float: left;
}

Pokud si vyzkoušíte tuto ukázku jak je znázorněna pod tímto textem zjistíte, že lze dva divy vedle sebe zarovnat jen pokud předem zadáme jejich šířku natvrdo.

Div s neznámou šířkou vlevo.
Tentéž div vpravo.

 

Všechny články v sekci
Ostatní CSS vlastnosti
Článek pro vás napsal David Jančík
Avatar
Autor je vášnivý programátor. Nezná slovo "nelze", nebojí se zkoušet nepoznané a pronikat do nových technologií.
Aktivity

 

 

Komentáře

Avatar
00
Člen
Avatar
00:6.4.2014 19:25

Chyba u ukázky Resize :-C

 
Odpovědět
6.4.2014 19:25
Avatar
nogare
Člen
Avatar
Odpovídá na 00
nogare:18.7.2014 21:40

vse funguje ok

Odpovědět
18.7.2014 21:40
Zkoušely jste to vypnout a zapnout?
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.