Índice
Os sites ou aplicações web que tratam de tudo o que se relaciona com receitas alimentares devem ter um design que não só seja atractivo, mas também útil, amigável e que permita aos utilizadores seguir as instruções indicadas nas referidas receitas.Se nosso núcleo é exatamente este, devemos implementar bons designs para cada uma das receitas postadas em nosso site ou aplicativo da web, e embora possamos estar pensando que precisamos de horas e horas de design, a verdade é que com alguns estilos de CSS e uma estrutura bem planejada podemos alcançar o que precisamos.
Código HTML
Nosso HTML Será bastante simples, incluiremos nosso arquivo styles.css em nosso cabeçalho e o estruturaremos em uma série de divs, onde organizaremos as informações em listas, além de identificar o bloco de informações com uma tag de artigo:
veludo vermelho
Sobremesa
- 1
- 45 min
- Dificuldade
- 560
Um bolo de veludo vermelho - em inglês: Bolo de veludo vermelho - é um bolo com uma cor vermelha escura, vermelha brilhante ou marrom avermelhada.
Ingredientes: Leite, farinha, ovos, baunilha, corante, açúcar, manteiga.
Aqui nós adicionamos adicionalmente a imagem para nossa receita, que cada um de vocês irá modificar de acordo com suas necessidades, vamos ver o que nosso arquivo .css carregará.Código CSS
Tendo nossa estrutura definida em .html, só temos que criar nossos estilos. Para isso, usaremos algumas propriedades conhecidas como margem, preenchimento e posições. Além disso, usaremos propriedades como gradientes ou o tamanho da caixa, vamos ver:
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; dimensionamento da caixa: caixa de borda; } html {altura: 100%; } corpo {cor de fundo: # 57abf2; imagem de fundo: -webkit-linear-gradient (-225deg, # 19d3d1 5%, # 57abf2); imagem de fundo: gradiente linear (-45deg, # 19d3d1 5%, # 57abf2); família de fontes: 'Open Sans', sans-serif; tamanho da fonte: 1rem; } img {largura máxima: 100%; altura: automático; alinhamento vertical: inferior; }. cartão de receita {background: #fff; margem: 4em automático; largura: 90%; largura máxima: 496 px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } Além disso, vamos usar as propriedades dos filhos de nosso documento e para os ícones que usaremos em nossa receita usaremos um .svg para extraí-los e colocá-los em nosso HTML:
. cartão de receita .icon {display: inline; display: bloco embutido; imagem de fundo: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg); repetição de fundo: sem repetição; } .cartão de receitas .icon-calorias, .cartão de receitas .icon-calorias \: regular {posição de fundo: 0 0; largura: 16px; altura: 19px; } cartão de receita .icon-clock, cartão de receita .icon-clock \: regular {posição de fundo: 0 -19px; largura: 20px; altura: 20px; } cartão .recipe-card .icon-level, .recipe-card .icon-level \: regular {background-position: 0 -39px; largura: 16px; altura: 19px; } .recipe-card .icon-play, .recipe-card .icon-play \: regular {background-position: 0 -58px; largura: 21px; altura: 26px; } cartão de receita .icon-users,. cartão de receita .icon-users \: regular {background-position: 0 -84px; largura: 18px; altura: 18px; }Feito isso, vamos ver o resultado final de como ficaria nossa receita.
PROLONGAR
receita.zip 91,82K 415 downloadsGostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
