Grafik digitálnych médií

Združená definícia rámčeka – border

Umožňuje skrátený zápis všetkých vlastností rámčeka:

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

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

Pri použití združenej definície sú pri neuvedených vlastnostiach nastavené východiskové hodnoty.

Samostatne je možné zadávať aj jednotlivé strany:

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

Šírka rámčeka – border-width

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

Samostatne je možné zadávať aj jednotlivé strany:

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

Šírka vykresľovania kľúčových slov (thin, medium, thick) sa v jednotlivých prehliadačoch líši.

Štýl rámčeka – border-style

• solid – spojitý
• double – dvojitý
• groove – priekopa
• ridge – val
• inset – stlačený
• outset – vystúpený
• dotted – bodkovaný
• dashed – čiarkovaný
• none – žiadny

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

Samostatne je možné zadávať aj jednotlivé strany:

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

 IE6- vykresľuje bodkovaný rámček so šírkou 1px čiarkovane.

 IE5- vykresľuje bodkovaný a čiarkovaný rámček ako spojitý.

Farba rámčeka – border-color

body {
  border: 10px solid;
  border-color: červená čierna green;
}

Samostatne je možné zadávať aj jednotlivé strany:

body {
  border: 10px solid;
  border-top-color: červená;
  border-right-color: čierna;
  border-bottom-color: blue;
  border-left-color: transparent;
}

Zaoblenie rámčeka – 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 súčasnej dobe nepodporujú prehliadače IE a Opera. Pre prehliadače Mozilla Firefox, Google Chrome a Safari je možné už dnes používať skúšobné vlastnosti -moz-border-radius a  -webkit-border-radius .

Obmedzenie:

• zaobliť rohy elementu <img>nie je možné, ale môžete použiť obrázok v pozadí elementu<div>
• pre prehliadač Opera musí byť štýl pre okrúhle rožky uvedený v zdrojovom kóde stránky (na odstránení tohto obmedzenia sa pracuje)

Vonkajší okraj – margin

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

Samostatne je možné zadávať aj jednotlivé strany:

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

Vnútorný okraj – padding

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

Samostatne je možné zadávať aj jednotlivé strany:

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

Výška – height

• iba pre blokové elementy (pre riadkové je možné použiť vlastnosť line-height)
• hodnota vyjadrená percentami sa vzťahuje k zadanej výške nadradeného elementu
• ak je obsah elementu menší ako zadaná výška, vytvorí sa pod obsahom prázdne miesto
• pretečeniu obsahu rieši vlastnosťoverflow

#header {height: 100px;}

 Maximálna výška – max-height

div {max-height: 100px;}

Nepodporuje IE6-

Minimálna výška – min-height

div {min-height: 100px;}

Nepodporuje IE6-

Šírka – width

• iba pre blokové elementy
• hodnota vyjadrená percentami sa vzťahuje k zadanej šírke nadradeného elementu
• ak je obsah elementu menší ako zadaná šírka, vytvorí sa vedľa obsahu prázdne miesto
• pretečeniu obsahu rieši vlastnosťoverflow

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

Maximálna šírka – max-width

div {max-width: 100px;}

Nepodporuje IE6-

 Minimálna šírka – min-width

div {min-width: 100px;}

Nepodporuje IE6-

Tieň bloku – box-shadow

box-shadow: [horizontálny posun] [vertikálny posun] (rozostrenie) (roztiahnutie) [farba] ​​(pozícia), (…ďalšie tiene…)

.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ý príklad použitia tieňov je vidieť napr. u loga Microsoft.