C/C++ week November Black Friday
Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Pouze tento týden sleva až 80 % na e-learning týkající se C/C++

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

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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.

 

 

Manuál 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í.
Všechny články v sekci
Ostatní CSS vlastnosti
Aktivity (1)

 

 

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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
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.