✅ Szablon przepisu z HTML5 i CSS3

Spisie treści

czerwony aksamit

Witryny lub aplikacje internetowe, które obsługują wszystko, co związane z przepisami kulinarnymi, muszą mieć projekt, który jest nie tylko atrakcyjny, ale także użyteczny, przyjazny i umożliwiający użytkownikom wykonywanie instrukcji podanych w przepisach.
Jeśli naszym rdzeniem jest właśnie to, musimy wdrożyć dobre projekty dla każdego z przepisów zamieszczonych na naszej stronie lub aplikacji internetowej i chociaż możemy myśleć, że potrzebujemy wielu godzin na projektowanie, prawda jest taka, że w przypadku niektórych stylów CSS i dobrze zaplanowaną strukturę możemy osiągnąć to, czego potrzebujemy.
Kod HTML
Nasz HTML Będzie to dość proste, umieścimy nasz plik styles.css w naszym nagłówku i ustrukturyzujemy go w serię divów, w których uporządkujemy informacje na listach, oprócz identyfikowania bloku informacyjnego za pomocą tagu artykułu:

czerwony aksamit

Deser

1
45 minut
Trudność
560

Ciasto z czerwonego aksamitu - po polsku: Ciasto z czerwonego aksamitu - to ciasto o ciemnoczerwonym, jaskrawoczerwonym lub czerwono-brązowym kolorze.

Skład: Mleko, mąka, jajka, wanilia, barwnik, cukier, masło.

Tutaj dodatkowo dodajemy obrazek do naszego przepisu, który każdy z Was zmodyfikuje według własnych potrzeb, zobaczmy, co przyniesie nasz plik .css.
Kod CSS
Mając zdefiniowaną strukturę w pliku .html, musimy tylko stworzyć nasze style. W tym celu użyjemy niektórych właściwości znanych jako margines, dopełnienie i stanowiska. Oprócz tego użyjemy właściwości takich jak gradienty lub rozmiar pudełka, Zobaczmy:

 * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; rozmiar pudełka: obramowanie-pudełko; } html {wysokość: 100%; } body {kolor-tła: # 57abf2; obraz w tle: -webkit-linear-gradient (-225deg, # 19d3d1 5%, # 57abf2); obraz tła: gradient liniowy (-45°, # 19d3d1 5%, # 57abf2); rodzina czcionek: 'Open Sans', bezszeryfowa; rozmiar czcionki: 1rem; } img {max-szerokość: 100%; wysokość: auto; wyrównanie w pionie: dół; } .karta-przepisu {tło: #fff; margines: 4em auto; szerokość: 90%; maksymalna szerokość: 496px; obramowanie-górny-lewy-promień: 5px; obramowanie-prawy-górny-promień: 5px; obramowanie-dolny-lewy-promień: 5px; obramowanie-dolny-prawy-promień: 5px; }

Oprócz tego użyjemy właściwości elementów potomnych naszego dokumentu, a dla ikon, których użyjemy w naszym przepisie, użyjemy pliku .svg, aby je wyodrębnić i umieścić w naszym HTML:

 .recipe-card .icon {wyświetlacz: wbudowany; wyświetlacz: inline-block; obraz w tle: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg); powtarzanie w tle: bez powtórzeń; } .recipe-card .icon-calories, .recipe-card .icon-calories \: regular {background-position: 0 0; szerokość: 16px; wysokość: 19px; } .recipe-card .icon-clock, .recipe-card .icon-clock \: regular {background-position: 0 -19px; szerokość: 20px; wysokość: 20px; } .recipe-card .icon-level, .recipe-card .icon-level \: regular {background-position: 0 -39px; szerokość: 16px; wysokość: 19px; } .recipe-card .icon-play, .recipe-card .icon-play \: regular {background-position: 0 -58px; szerokość: 21px; wysokość: 26px; } .recipe-card .icon-users, .recipe-card .icon-users \: regular {background-position: 0 -84px; szerokość: 18px; wysokość: 18px; }

Gdy to zrobimy, zobaczmy, jak będzie wyglądał nasz przepis.

POWIĘKSZAĆ

Jak widzimy, uciekamy się tylko do HTML5 Tak CSS3 Aby stworzyć nasz przepis, teraz pozostaje tylko dla tych, którzy chcą skorzystać z tego przykładu, pobrać go i wprowadzić odpowiednie zmiany w kolorze, czcionce i przepisach, które chcą zaprezentować.