Naštýlovanie kontaktného formuláru

Kontaktný formulár sa nachádza v identifikátory #contact . Na pozadie, chceme umiestniť obrázok. Obrázky je možné vkladať v html priamo, čo sme si už skúsili alebo pomocou CSS.

V CSS obrázok vložíme pomocou atribútu background, kde mu priradíme url adresu, z ktorej sa k obrázku dostane. Na záver je potrebné nastaviť hodnotu no-repeat aby sa obrázok neopakoval (ak samozrejme nechceme cielene, aby sa obrázok opakoval).

Pomocou background-size: cover nastavíme obrázok roztiahnutý na celú šírku elementu contact.

Posledným atribútom background-position definujeme ako chceme (pozeraj sa na to, ktorú časť obrázku) zobrazíme. Nastavenie center center napríklad obrázok nacentruje vertikálne a horizontálne.

#contact {
  background: url('../img/contact.jpg') no-repeat;
  background-size: cover;
  background-position: center center;
}

Úloha

  1. Skús upraviť nastavenie background-position center center na top center.
  2. Pozri si výsledok v prehliadači
  3. Skús upraviť nastavenie background-position center center na center bottom.
  4. Pozri si výsledok v prehliadači.
  5. Vráť nastavenie background-position do pôvodného nastavenia na hodnoty center center
  6. Ulož súbor custom.css

Následne v ďalšom kroku prepíšeme modrý nadpis, ktorý je definovaný pre všetky h2 nadpisy na webstránke na biely. Aby sa nadpis prepísal je potrebné uviesť nakoniec hodnotu !important (nie vždy je potrebné !important definovať).

#contact h2 {
  color: #fff !important;
}

Formulár sme v HTML obalili do triedy .form-wrapper, vďaka ktorej vieme s formulárom pracovať ako s celkom. Poďme okolo formuláru vytvoriť tmavšie pozadie s prekrytím na 0.5.

Poznámka: Farbu pre pozadia, texty a ostatné elementy je možné uviesť viacerými spôsobmi. Jedným so spôsobov je pomocou #fff , ale taktiež môžeme farbu uviesť v rgba formáte, kde vieme definovať overlay efekt navyše. (v našom príklade je to hodnota 0.5)

Pomocou paddingu odsadíme celý formulár zo všetkých strán o 40px a rohy boxu mierne zaoblíme pomocou atribútu border-radius v hodnote .2 (skrátené zo zápisu 0.2).

.form-wrapper {
  background:rgba(51, 51, 51, 0.5);
  padding: 40px;
  border-radius: .2em;
}

Momentálne, keď klikneme do input fieldu (poľa s menom napríklad) vidíme, že sa okolo políčka vytvoril modrý rám. Ten sa však veľmi nehodí k nášmu súčasnému dizajnu na webstránke, preto si otvoríme debugger a zistíme, ako efekt upravíme.

Úloha

  1. Chod do Google Chrome , kde máš aktuálne otvorený svoj web
  2. Otvor developer nástroje na debugovanie kódu

Pomocou debugeru vieme nielen zistiť, ako sa volá hľadaný element, ale zobraziť si ho aj v rôznych stavoch (viď obrázok). My konkrétne budeme meniť stav focus, ktorému nastavíme nasledovné hodnoty.

Orámovanie zmeníme na ružovú farbu zhodnú s farbou pre hover efekty odkazov na webstránke. Outline nastavíme na none. Odstránime vlastnosť box-shadow (tieň) okolo input fieldu.

.form-control:focus {
    border-color: #c5308a;
    outline: none;
    -webkit-box-shadow:  transparent;
    box-shadow: transparent;
}

Úloha

  1. Doplň box-shadow pre ostatné prehliadače (pomôcka prefixy sú moz, o)

Ešte je potrebné upraviť spodnú informáciu "Polia označené hviezdičkou sú povinné" .

Keďže sme zámerne pre študijné účely prvku nedefinovali vlastnú triedu je možné sa k nemu dostať nasledovne. V debugeri vidíme, že je to 4tý prvok na úrovni form div div.

Nastavíme farbu textu na bielu, štýl písma na kurzívu pomocou font-style: italic a veľkosť písma na 0.75em.

Keďže chceme text zarovnať k spodnej časti buttonu nastavíme mu line-height (riadkovanie) na 40px.

form div div:nth-child(4) {
  color: #fff;
  font-style:italic;
  font-size: 0.75em;
  line-height: 40px;
}

V poslednom kroku upravíme button. K dispozícii máme preddefinovaný button Bootstrapu definovaný v triede .btn-primary.

Upravíme mu farbu na bielu, pozadie na modré zhodné s pozadím pre hlavné nadpisy.

Okolo buttonu nechceme žiadne orámovanie, preto border-color nastavíme na transparent, čím zabezpečíme neviditeľný rám a zároveň chceme rohy buttonu spraviť gulatými zhodne s rohmi boxu, v ktorom je formulár.

.btn-primary {
    color: #fff;
    background-color: #455376;
    border-color: transparent;
    border-radius: 0.2em;
}

Pomocou debugeru zistíme, v akých všetkých stavoch môže byť tlačítko ešte použité (stavy definuje a priradil za nás Bootstrap), no keďže nám sa modré orámovanie a farba nepáči prepíšeme štýl nasledovne.

Z debugure skopírujeme kód pre hover a ďalšie efekty a nastavíme tlačítku farbu na ružovú. Aby sa štýl prepísal, je potrebné použiť !important. Okolo tlačítka taktiež skryjeme aj v tomto stave orámovanie pomocou transparentnej farby.

.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover,
.btn-primary:hover {
  background-color: #a1236f !important;
  border-color: transparent !important;
}