Inhoudsopgave
De sites of webapplicaties die alles met betrekking tot voedselrecepten behandelen, moeten een ontwerp hebben dat niet alleen aantrekkelijk is, maar ook nuttig, vriendelijk en waarmee gebruikers de instructies in die recepten kunnen uitvoeren.Als onze kern precies dit is, dan moeten we goede ontwerpen implementeren voor elk van de recepten die op onze site of webapplicatie zijn geplaatst, en hoewel we misschien denken dat we uren en uren nodig hebben in ontwerp, is de waarheid dat met sommige stijlen van CSS en een goed geplande structuur kunnen we bereiken wat we nodig hebben.
HTML code
Ons HTML Het zal vrij eenvoudig zijn, we zullen ons bestand styles.css in onze header opnemen en we zullen het structureren in een reeks divs, waar we de informatie in lijsten zullen ordenen, naast het identificeren van het informatieblok met een artikeltag:
rood fluweel
Toetje
- 1
- 45 minuten
- moeilijkheidsgraad
- 560
Een red velvet cake -in het Engels: Red velvet cake- is een cake met een donkerrode, felrode of roodbruine kleur.
Ingrediënten: Melk, bloem, eieren, vanille, kleurstof, suiker, boter.
Hier voegen we bovendien de afbeelding voor ons recept toe, die ieder van u zal aanpassen aan uw behoeften, laten we eens kijken wat ons .css-bestand zal bevatten.CSS-code
Door onze structuur in .html te definiëren, hoeven we alleen onze stijlen te maken. Hiervoor zullen we enkele eigenschappen gebruiken die bekend staan als de marge, opvulling en posities. Daarnaast zullen we eigenschappen gebruiken zoals verlopen of de doosmaat, laten we kijken:
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html {hoogte: 100%; } body {achtergrondkleur: # 57abf2; achtergrondafbeelding: -webkit-lineair verloop (-225deg, # 19d3d1 5%, # 57abf2); achtergrondafbeelding: lineair verloop (-45deg, # 19d3d1 5%, # 57abf2); font-familie: 'Open Sans', schreefloos; lettergrootte: 1rem; } img {max-breedte: 100%; hoogte: automatisch; verticaal uitlijnen: onder; } .receptkaart {achtergrond: #fff; marge: 4em automatisch; breedte: 90%; maximale breedte: 496px; border-top-links-radius: 5px; grens-rechtsboven-radius: 5px; border-linksonder-radius: 5px; grens-rechtsonder-straal: 5px; } Daarnaast gaan we de eigenschappen van de kinderen van ons document gebruiken en voor de pictogrammen die we in ons recept zullen gebruiken, gaan we een .svg gebruiken om ze uit te pakken en in onze HTML te plaatsen:
.receptkaart .icon {display: inline; weergave: inline-blok; achtergrondafbeelding: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg); achtergrondherhaling: geen herhaling; } .receptkaart .icon-calorieën, .receptkaart .icon-calories \: regulier {achtergrondpositie: 0 0; breedte: 16px; hoogte: 19px; } .receptkaart .icon-clock, .receptkaart .icon-clock \: normaal {achtergrondpositie: 0 -19px; breedte: 20px; hoogte: 20px; } .receptkaart .pictogramniveau, .receptkaart .pictogramniveau \: regulier {achtergrondpositie: 0 -39px; breedte: 16px; hoogte: 19px; } .receptkaart .icon-play, .receptkaart .icon-play \: regular {achtergrondpositie: 0 -58px; breedte: 21px; hoogte: 26px; } .receptkaart .pictogram-gebruikers, .receptkaart .icon-gebruikers \: normaal {achtergrondpositie: 0 -84px; breedte: 18px; hoogte: 18px; }Zodra dit is gebeurd, laten we het uiteindelijke resultaat zien van hoe ons recept eruit zou zien.
VERGROTEN
recept.zip 91,82K 415 DownloadsVond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven 
