Cuprins
Site-urile sau aplicațiile web care gestionează tot ceea ce ține de rețetele alimentare trebuie să aibă un design care să fie nu numai atractiv, ci și util, prietenos și care să permită utilizatorilor să efectueze instrucțiunile prezentate în rețetele menționate.Dacă nucleul nostru este exact acesta, atunci trebuie să implementăm modele bune pentru fiecare dintre rețetele postate pe site-ul sau aplicația noastră web și, deși s-ar putea să ne gândim că avem nevoie de ore și ore în proiectare, adevărul este că, cu unele stiluri de CSS și o structură bine planificată putem realiza ceea ce avem nevoie.
Cod HTML
Al nostru HTML Va fi destul de simplu, vom include fișierul nostru styles.css în antetul nostru și îl vom structura într-o serie de divs, unde vom organiza informațiile în liste, pe lângă identificarea blocului de informații cu o etichetă de articol:
catifea rosie
Desert
- 1
- 45 min
- Dificultate
- 560
Un tort de catifea roșie -în limba engleză: Tort de catifea roșie- este un tort cu o culoare roșu închis, roșu aprins sau roșu-maro.
Ingrediente: Lapte, făină, ouă, vanilie, colorant, zahăr, unt.
Aici adăugăm în plus imaginea rețetei noastre, pe care fiecare dintre voi o va modifica în funcție de nevoile dvs., să vedem ce va purta fișierul nostru .css.Cod CSS
Având structura noastră definită în .html, trebuie doar să ne creăm stilurile. Pentru aceasta vom folosi unele proprietăți cunoscute sub numele de margine, căptușeală și poziții. În plus, vom folosi proprietăți precum gradienți sau dimensionare cutie, sa vedem:
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html {înălțime: 100%; } corp {fundal-culoare: # 57abf2; imagine de fundal: -webkit-linear-gradient (-225deg, # 19d3d1 5%, # 57abf2); imagine de fundal: gradient liniar (-45deg, # 19d3d1 5%, # 57abf2); font-family: „Open Sans”, sans-serif; dimensiunea fontului: 1rem; } img {max-width: 100%; înălțime: auto; vertical-align: jos; } .recipe-card {fundal: #fff; margine: 4em auto; lățime: 90%; lățime maximă: 496px; chenar-sus-stânga-rază: 5 px; raza chenar-sus-dreapta: 5 px; chenar-jos-stânga-rază: 5px; raza de margine-jos-dreapta: 5 px; } În plus, vom folosi proprietățile copiilor documentului nostru și pentru pictogramele pe care le vom folosi în rețeta noastră vom folosi un .svg pentru a le extrage și a le plasa în HTML-ul nostru:
.recipe-card .icon {display: inline; afișaj: bloc în linie; imagine de fundal: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg); background-repeat: no-repeat; } .recipe-card .icon-calorii, .recipe-card .icon-calorii \: regulat {background-position: 0 0; lățime: 16px; înălțime: 19 px; } .recipe-card .icon-clock, .recipe-card .icon-clock \: regular {background-position: 0 -19px; lățime: 20px; înălțime: 20px; } .recipe-card .icon-level, .recipe-card .icon-level \: regular {background-position: 0 -39px; lățime: 16 px; înălțime: 19 px; } .recipe-card .icon-play, .recipe-card .icon-play \: regular {background-position: 0 -58px; lățime: 21px; înălțime: 26px; } .recipe-card .icon-users, .recipe-card .icon-users \: regular {background-position: 0 -84px; lățime: 18px; înălțime: 18px; }Odată ce acest lucru este făcut, să vedem rezultatul final al aspectului rețetei noastre.
MARI
recipe.zip 91.82K 415 DescărcăriV-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv 
