Innehållsförteckning
Webbplatserna eller webbapplikationerna som hanterar allt som rör matrecept måste ha en design som inte bara är attraktiv utan också användbar, vänlig och som gör det möjligt för användare att utföra instruktionerna som visas i nämnda recept.Om vår kärna är exakt detta, måste vi implementera bra design för vart och ett av recepten som läggs ut på vår webbplats eller webbapplikation, och även om vi kanske tänker att vi behöver timmar och timmar i design, är sanningen att med vissa stilar av CSS och en välplanerad struktur kan vi uppnå det vi behöver.
HTML -kod
Vår HTML Det kommer att vara ganska enkelt, vi kommer att inkludera vår styles.css -fil i vår rubrik och vi kommer att strukturera den i en serie divs, där vi kommer att organisera informationen i listor, förutom att identifiera informationsblocket med en artikeltagg:
röd sammet
Efterrätt
- 1
- 45 min
- Svårighet
- 560
En röd sammetskaka-på engelska: Röd sammetskaka- är en tårta med en mörk röd, ljusröd eller rödbrun färg.
Ingredienser: Mjölk, mjöl, ägg, vanilj, färg, socker, smör.
Här lägger vi dessutom till bilden för vårt recept, som var och en av er kommer att ändra efter era behov, låt oss se vad vår .css -fil kommer att bära.CSS -kod
Genom att ha vår struktur definierad i den .html behöver vi bara skapa våra stilar. För detta kommer vi att använda några egenskaper som kallas marginal, vaddering och positioner. Utöver detta kommer vi att använda egenskaper som gradienter eller lådstorlek, låt oss se:
* {-webkit-box-sizing: border-box; -moz-box-dimensionering: border-box; box-dimensionering: border-box; } html {höjd: 100%; } kropp {bakgrund-färg: # 57abf2; bakgrundsbild: -webkit-linjär-gradient (-225deg, # 19d3d1 5%, # 57abf2); bakgrundsbild: linjär-gradient (-45deg, # 19d3d1 5%, # 57abf2); font-family: 'Open Sans', sans-serif; typsnitt: 1rem; } img {max-bredd: 100%; höjd: auto; vertikal-inriktning: botten; } .recept-kort {bakgrund: #fff; marginal: 4em auto; bredd: 90%; maxbredd: 496px; kant-topp-vänster-radie: 5px; kant-topp-höger-radie: 5px; kant-nedre-vänster-radie: 5px; kant-nedre-höger-radie: 5px; } Utöver detta kommer vi att använda egenskaperna hos barnen i vårt dokument och för ikonerna som vi kommer att använda i vårt recept kommer vi att använda en .svg för att extrahera dem och placera dem i vår HTML:
.recept-kort .ikon {display: inline; display: inline-block; bakgrundsbild: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg); bakgrund-upprepa: ingen upprepning; } .recept-kort .ikon-kalorier, .recept-kort .ikon-kalorier \: vanlig {bakgrundsposition: 0 0; bredd: 16px; höjd: 19px; } .recept-kort .ikon-klocka, .recept-kort .ikon-klocka \: vanlig {bakgrundsposition: 0 -19px; bredd: 20px; höjd: 20px; } .recept-kort .ikon-nivå, .recept-kort .ikon-nivå \: vanlig {bakgrundsposition: 0 -39px; bredd: 16px; höjd: 19px; } .recept-kort .icon-play, .recept-kort .icon-play \: vanlig {bakgrundsposition: 0 -58px; bredd: 21px; höjd: 26px; } .recept-kort .ikon-användare, .recept-kort .ikon-användare \: vanlig {bakgrundsposition: 0 -84px; bredd: 18px; höjd: 18px; }När detta är gjort, låt oss se det slutliga resultatet av hur vårt recept skulle se ut.
FÖRSTORA
recept.zip 91,82K 415 NedladdningarGillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng
