Sadržaj
Web stranice ili web aplikacije koje se bave svime što se odnosi na recepte hrane moraju imati dizajn koji nije samo atraktivan, već i koristan, prijateljski i koji omogućuje korisnicima da izvršavaju upute prikazane u navedenim receptima.Ako je naša srž upravo to, tada moramo implementirati dobre dizajne za svaki od recepata objavljenih na našoj web stranici ili web aplikaciji, pa iako možda mislimo da su nam potrebni sati i sati u dizajnu, istina je da s nekim stilovima CSS i dobro planiranu strukturu možemo postići ono što nam je potrebno.
HTML kod
Naše HTML Bit će vrlo jednostavno, uključit ćemo našu datoteku styles.css u svoje zaglavlje i strukturirat ćemo je u niz divova, gdje ćemo organizirati podatke na popisima, uz identifikaciju informacijskog bloka s oznakom članka:
crveni baršun
Desert
- 1
- 45 min
- Poteškoće
- 560
Torta od crvenog baršuna-na engleskom: Red velvet cake-kolač je tamnocrvene, svijetlo crvene ili crveno-smeđe boje.
Sastojci: mlijeko, brašno, jaja, vanilija, boja, šećer, maslac.
Ovdje dodatno dodajemo sliku za naš recept, koju će svatko od vas izmijeniti prema svojim potrebama, da vidimo što će nositi naša .css datoteka.CSS kod
Budući da je naša struktura definirana u njemu .html, moramo samo stvoriti svoje stilove. Za to ćemo koristiti neka svojstva poznata kao margin, padding i položaji. Osim toga koristit ćemo svojstva poput nagiba ili dimenzioniranje kutije, da vidimo:
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; okvir veličine: border-box; } html {visina: 100%; } body {background-color: # 57abf2; background-image: -webkit-linear-gradient (-225deg, # 19d3d1 5%, # 57abf2); pozadinska slika: linearni gradijent (-45 stepeni, # 19d3d1 5%, # 57abf2); font-family: 'Open Sans', sans-serif; veličina fonta: 1rem; } img {max-width: 100%; visina: auto; okomito poravnati: dolje; } .recipe-card {pozadina: #fff; marža: 4em auto; širina: 90%; max-širina: 496px; obrub-gore-lijevo-radijus: 5px; obrub-gore-desno-radijus: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } Osim toga, koristit ćemo svojstva djece našeg dokumenta, a za ikone koje ćemo koristiti u našem receptu koristit ćemo .svg za njihovo izdvajanje i postavljanje u naš HTML:
.recipe-card .icon {display: inline; prikaz: inline-block; background-image: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg); background-repeat: bez ponavljanja; } .recipe-card .icon-kalorije, .recipe-card .icon-kalorije \: regularna {background-position: 0 0; širina: 16px; visina: 19px; } .recipe-card .icon-clock, .recipe-card .icon-clock \: regular {background-position: 0 -19px; širina: 20px; visina: 20px; } .recipe-card .razina ikone, .recipe-card .icon-razina \: regularna {background-position: 0 -39px; širina: 16px; visina: 19px; } .recipe-card .icon-play, .recipe-card .icon-play \: regular {background-position: 0 -58px; širina: 21px; visina: 26px; } .recipe-card .icon-korisnici, .recipe-card .icon-korisnici \: regularni {background-position: 0 -84px; širina: 18px; visina: 18px; }Kad to učinimo, pogledajmo konačni rezultat kako bi izgledao naš recept.
POVEĆAJTE
recept.zip 91.82K 415 preuzimanjaJe li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod 
