7. diel - Tvorba Bootstrap šablóny z PSD - Dokončenie panela a navigácia
V minulej lekcii, Tvorba Bootstrap šablóny z PSD - Header a panel s tlačidlami , sme vytvorili časť hlavičky a začali pracovať na paneli s tlačidlami. Dnes si panel dokončíme, vrátime sa k sekcii MODERNÉ BÝVANIE pod ním a doupravíme ju. A tiež začneme pracovať na navigačnom menu.
Dokončenie panelu s tlačidlami
V HTML si do riadku, kde už máme .border, pridáme
.border-light, aby sme dostali svetlejšie rámček.
V CSS si vytvoríme triedu .buttons a pridáme do nej
box-shadow:
.buttons { box-shadow: 0 0 10px #b6b6b6; }
Triedu .buttons pridelíme v HTML <div> u,
kde máme .border .border-light. Teraz potrebujeme, aby
panel zasahoval do obrázka nad ním. Triede .buttons
pridáme transform: translateY (-50%). Tým sa nám celý
panel posunie o 50% nahor (po osi Y). Ešte môžeme použiť
...koniec náhľadu článku...
Pokračuj ďalej
Došiel si až sem a to je super! Veríme, že ti prvé lekcie ukázali niečo nového a užitočného.
Chceš v kurze pokračovať? Prejdi do prémiovej sekcie.
ročné PREDPLATNÉ
44 €
mesačne, platené ročne (528 €)14 000+ lekcií, cvičení a testov
6 000+ ti zostane navždy
Neobmedzený prístup ku všetkým aktuálnym
aj pripravovaným kurzom.
Kúpiť iba tento kurz
Získaj okamžitý prístup ku kurzu bez
časového obmedzenia.
17 €
Pred kúpou tohto článku je potrebné kúpiť predchádzajúci diel
Obsah článku spadá pod licenciu Premium no-reselling, kúpou článku súhlasíš s Prevádzkovými podmienkami.
Komerčný článok (licencia no-reselling)
Tento článok vznikol na základe mnohoročných skúseností v odbore a opisuje vývoj profesionálneho komerčného produktu alebo jeho súčasti, ktorú možno priamo využiť za účelom zisku alebo k preniknutiu do komerčnej sféry IT odvetvia.
Tieto vrcholové znalosti sprístupňujeme samozrejme iba niektorým členom komunity, ktorí sa majú záujem vypracovať na profesionálov v odbore a preto sú k dispozícii len za kredity. Kód z článku môžete použiť pre jeden svoj komerčný projekt. Nie je ho však možné prepredávať (raz zakúpiť a následne predať ďalej v niekoľkých projektoch). Ak potrebujete širšie využitie kódu, radi sa s vami dohodneme na komerčnej licencii. Viac informácií nájdete v článku Licencia.
Ste pripravení stať sa profesionálmi v odbore? Stačí kliknúť.
Popis článku
Požadovaný článok má nasledujúci obsah:
V Bootstrap tutoriálu dokončíme prácu na paneli s tlačidlami, dodatočne ostylujeme sekcii Moderné bývanie a začneme navigačné menu.
