IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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