✅ Šablona receptu s HTML5 a CSS3

Obsah

červený samet

Weby nebo webové aplikace, které zpracovávají vše, co souvisí s recepty na potraviny, musí mít design, který je nejen atraktivní, ale také užitečný, přátelský a který uživatelům umožňuje provádět pokyny uvedené v uvedených receptech.
Pokud je naše jádro přesně toto, pak musíme implementovat dobré návrhy pro každý z receptů zveřejněných na našem webu nebo webové aplikaci, a přestože si možná myslíme, že v designu potřebujeme hodiny a hodiny, pravdou je, že u některých stylů CSS a dobře naplánovanou strukturou můžeme dosáhnout toho, co potřebujeme.
HTML kód
Náš HTML Bude to celkem jednoduché, do záhlaví vložíme náš soubor styles.css a strukturujeme jej do řady divů, kde budeme informace organizovat do seznamů, kromě identifikace informačního bloku tagem článku:

červený samet

Dezert

1
45 min
Obtížnost
560

Červený sametový dort-anglicky: Red velvet cake-je dort tmavě červené, jasně červené nebo červenohnědé barvy.

Složení: mléko, mouka, vejce, vanilka, barvivo, cukr, máslo.

Zde navíc přidáváme obrázek k našemu receptu, který každý z vás upraví podle svých potřeb, podívejme se, co náš soubor .css unese.
CSS kód
Tím, že je v něm definována naše struktura .html, musíme pouze vytvářet naše styly. K tomu použijeme některé vlastnosti známé jako okraj, polstrování a pozic. Kromě toho použijeme vlastnosti, jako jsou přechody nebo velikost krabice, uvidíme:

 * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; velikost boxu: border-box; } html {výška: 100%; } body {background-color: # 57abf2; obrázek na pozadí: -webkit-lineární gradient (-225deg, # 19d3d1 5%, # 57abf2); obrázek na pozadí: lineární gradient (-45 stupňů, # 19d3d1 5%, # 57abf2); font-family: 'Open Sans', bezpatkové; velikost písma: 1rem; } img {max-width: 100%; výška: auto; svislé zarovnání: dole; }. recept-karta {pozadí: #fff; okraj: 4em auto; šířka: 90%; max-width: 496px; poloměr okraje vlevo nahoře: 5 pixelů; border-top-right-radius: 5px; poloměr ohraničení-dole-vlevo: 5px; border-bottom-right-radius: 5px; }

Kromě toho použijeme vlastnosti potomků našeho dokumentu a pro ikony, které použijeme v našem receptu, použijeme .svg k jejich extrahování a umístění do našeho HTML:

 .recipe-card .icon {display: inline; zobrazení: inline-block; obrázek na pozadí: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg); opakování na pozadí: neopakování; } .receptová karta .icon-kalorie, .receptová karta .icon-kalorie \: pravidelná {pozice na pozadí: 0 0; šířka: 16px; výška: 19px; } .recipe-card .icon-clock, .recipe-card .icon-clock \: regular {background-position: 0 -19px; šířka: 20px; výška: 20px; } .recipe-card .icon-level, .recipe-card .icon-level \: regular {background-position: 0 -39px; šířka: 16px; výška: 19px; } .recipe-card .icon-play, .recipe-card .icon-play \: regular {background-position: 0 -58px; šířka: 21px; výška: 26px; } .recipe-card .icon-users, .recipe-card .icon-users \: regular {background-position: 0 -84px; šířka: 18px; výška: 18px; }

Jakmile to bude hotové, podívejme se na konečný výsledek toho, jak by náš recept vypadal.

ZVĚTŠIT

Jak vidíme, uchýlili jsme se pouze k HTML5 Y CSS3 Chcete -li sestavit náš recept, nyní zbývá pouze těm, kteří chtějí použít tento příklad, stáhněte si jej a proveďte příslušné úpravy barvy, písma a receptů, které chtějí představit.