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.