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

HTML a CSS Manuál Ostatní vlastnosti 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.

 

  Aktivity (1)

Manuál pro vás napsal David Jančík [sczdavos]
Avatar
Autor je vášnivý programátor v .NET C# a PHP. Nezná slovo "nelze", nebojí se zkoušet nepoznané a pronikat do nových technologií.

Miniatura
Všechny články v sekci
Ostatní CSS vlastnosti

 

 

Komentáře

Avatar
00
Člen
Avatar
00:

Chyba u ukázky Resize :-C

 
Odpovědět 6.4.2014 19:25
Avatar
nogare
Člen
Avatar
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.