Sommario
I siti o le applicazioni web che gestiscono tutto ciò che riguarda le ricette alimentari devono avere un design non solo accattivante, ma anche utile, amichevole e che permetta agli utenti di eseguire le istruzioni riportate in dette ricette.Se il nostro nucleo è esattamente questo, allora dobbiamo implementare buoni design per ciascuna delle ricette pubblicate sul nostro sito o applicazione web, e anche se potremmo pensare che abbiamo bisogno di ore e ore nel design, la verità è che con alcuni stili di CSS e una struttura ben pianificata possiamo ottenere ciò di cui abbiamo bisogno.
codice HTML
I nostri HTML Sarà abbastanza semplice, includeremo il nostro file styles.css nella nostra intestazione e lo struttureremo in una serie di div, dove organizzeremo le informazioni in elenchi, oltre ad identificare il blocco informazioni con un tag articolo:
velluto rosso
Dolce
- 1
- 45 minuti
- Difficoltà
- 560
Una torta di velluto rosso -in inglese: torta di velluto rosso- è una torta dal colore rosso scuro, rosso vivo o rosso-marrone.
Ingredienti: Latte, farina, uova, vaniglia, colorante, zucchero, burro.
Qui aggiungiamo anche l'immagine per la nostra ricetta, che ognuno di voi modificherà in base alle proprie esigenze, vediamo cosa porterà il nostro file .css.Codice CSS
Avendo definito la nostra struttura in esso .html, dobbiamo solo creare i nostri stili. Per questo useremo alcune proprietà note come margine, imbottitura e posizioni. Oltre a questo useremo proprietà come gradienti o il dimensionamento della scatola, vediamo:
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-size: border-box; } html {altezza: 100%; } body {colore di sfondo: # 57abf2; background-image: -webkit-linear-gradient (-225deg, # 19d3d1 5%, # 57abf2); background-image: linear-gradient (-45deg, # 19d3d1 5%, # 57abf2); font-family: 'Open Sans', sans-serif; dimensione del carattere: 1rem; } img {larghezza massima: 100%; altezza: automatica; allineamento verticale: in basso; } .ricetta {sfondo: #fff; margine: 4em automatico; larghezza: 90%; larghezza massima: 496 px; bordo-alto-sinistra-raggio: 5px; bordo-in alto-a destra-raggio: 5px; bordo-basso-sinistro-raggio: 5px; bordo-basso-destra-raggio: 5px; } Oltre a questo, utilizzeremo le proprietà dei figli del nostro documento e per le icone che utilizzeremo nella nostra ricetta utilizzeremo un .svg per estrarle e inserirle nel nostro HTML:
.recipe-card .icon {display: inline; display: blocco in linea; immagine di sfondo: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg); background-repeat: no-repeat; } .recipe-card .icon-calories, .recipe-card .icon-calories \: regular {posizione-sfondo: 0 0; larghezza: 16px; altezza: 19px; } .recipe-card .icon-clock, .recipe-card .icon-clock \: regular {posizione-sfondo: 0 -19px; larghezza: 20px; altezza: 20px; } .recipe-card .icon-level, .recipe-card .icon-level \: regular {posizione-sfondo: 0 -39px; larghezza: 16px; altezza: 19px; } .recipe-card .icon-play, .recipe-card .icon-play \: regular {posizione-sfondo: 0 -58px; larghezza: 21px; altezza: 26px; } .recipe-card .icon-users, .recipe-card .icon-users \: regular {posizione-sfondo: 0 -84px; larghezza: 18px; altezza: 18px; }Fatto ciò, vediamo il risultato finale di come sarebbe la nostra ricetta.
INGRANDIRE
ricetta.zip 91.82K 415 downloadTi è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo 
