Tomáš Daněk

Zápis hodnot vlastností, u kterých je možné nastavovat všechny čtyři strany je možné zkrátit.

Sdružená definice rámečku – border

Umožňuje zkrácený zápis všech vlastností rámečku:

• border-width
• border-style
• border-color

h1 {border: 4px groove green;}
p {border: 4px ridge green;}

Při použití sdružené definice jsou u neuvedených vlastností nastaveny výchozí hodnoty.

Samostatně lze zadávat i jednotlivé strany:

body {
  border-top: 10px solid lime;
  border-right: 10px double green;
  border-bottom: 10px dotted purple;
  border-left: 10px dashed blue;
}

Šířka rámečku – border-width

body {
  border: solid green;
  border-width: 1px 2px 3px 4px;
}

Samostatně lze zadávat i jednotlivé strany:

body {
  border: solid green;
  border-top-width: 5px;
  border-right-width: 10px;
  border-bottom-width: 15px;
  border-left-width: 20px;
}

Šířka vykreslování klíčových slov (thin, medium, thick) se v jednotlivých prohlížečích liší.

Styl rámečku – border-style

• solid – spojitý
• double – dvojitý
• groove – příkop
• ridge – val
• inset – vmáčknutý
• outset – vystouplý
• dotted – tečkovaný
• dashed – čárkovaný
• none – žádný

body {
  border: 10px green;
  border-style: solid;
}

Samostatně lze zadávat i jednotlivé strany:

body {
  border: 10px green;
  border-top-style: double;
  border-right-style: dotted;
  border-bottom-style: dashed;
  border-left-style: none;
}

IE6- vykresluje tečkovaný rámeček o šířce 1px čárkovaně.

IE5- vykresluje tečkovaný a čárkovaný rámeček jako spojitý.

Barva rámečku – border-color

body {
  border: 10px solid;
  border-color: red black blue green;
}

Samostatně lze zadávat i jednotlivé strany:

body {
  border: 10px solid;
  border-top-color: red;
  border-right-color: black;
  border-bottom-color: blue;
  border-left-color: transparent;
}

Zaoblení rámečku – border-radius

.radius {
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  position: relative;
  behavior: url('sites/all/themes/legadino/design/pie.htc');
}

V současné době nepodporují prohlížeče IE a Opera. Pro prohlížeče Mozilla Firefox, Google Chrome a Safari je možné již dnes používat zkušební vlastnosti -moz-border-radius a -webkit-border-radius.

Omezení:

• zaoblit rohy elementu <img>není možné, ale můžete použít obrázek v pozadí elementu <div>
• pro prohlížeč Opera musí být styl pro kulaté rožky uveden ve zdrojovém kódu stránky (na odstranění tohoto omezení se pracuje)

Vnější okraj – margin

p {margin: 1em 0 .5em;}

Samostatně lze zadávat i jednotlivé strany:

p {
  margin-top: 1em;
  margin-right: 0;
  margin-bottom: .5em;
  margin-left: 0;
}

Vnitřní okraj – padding

th, td {padding: 0.1em .3em 0;}

Samostatně lze zadávat i jednotlivé strany:

th, td {
  padding-top: .1em;
  padding-right: .3em;
  padding-bottom: 0;
  padding-left: .3em;
}

Výška – height

• pouze pro blokové elementy (pro řádkové je možné použít vlastnost line-height)
• hodnota vyjádřená procenty se vztahuje k zadané výšce nadřazeného elementu
• je-li obsah elementu menší než zadaná výška, vytvoří se pod obsahem prázdné místo
• přetečení obsahu řeší vlastnost overflow

#header {height: 100px;}

 Maximální výška – max-height

div {max-height: 100px;}

Nepodporuje IE6-

Minimální výška – min-height

div {min-height: 100px;}

Nepodporuje IE6-

Šířka – width

• pouze pro blokové elementy
• hodnota vyjádřená procenty se vztahuje k zadané šířce nadřazeného elementu
• je-li obsah elementu menší než zadaná šířka, vytvoří se vedle obsahu prázdné místo
• přetečení obsahu řeší vlastnost overflow

#header, #content, #footer {width: 760px;}

Maximální šířka – max-width

div {max-width: 100px;}

Nepodporuje IE6-

 Minimální šířka – min-width

div {min-width: 100px;}

Nepodporuje IE6-

Stín bloku – box-shadow

box-shadow: [horizontální posun] [vertikální posun] (rozostření) (roztažení) [barva] (pozice), (...další stíny...)

.box-shadow {
  -moz-box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .7) inset,
                   0 -20px 20px 20px rgba(0, 0, 0, .7); /* FF(3.5-3.6) */
  -webkit-box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .7) inset,
                      0 -20px 20px 20px rgba(0, 0, 0, .7); /* Chrome(4-9), Safari(3.1-4), iOS(3.2-4.3), Android(2.1-3) */
  box-shadow: 0 20px 20px -20px rgba(0, 0, 0, .7) inset,
              0 -20px 20px 20px rgba(0, 0, 0, .7); /* Opera10.5+, IE9+ */
}

Praktický příklad použití stínů je vidět např. u loga Microsoft.