Plantilla para receta con HTML5 y CSS3

Los sitios o aplicaciones web que manejan todo lo relacionado a recetas de comida deben tener un diseño que no sea solo atractivo, sino que también sea útil, amigable y que permita a los usuarios poder llevar a cabo las instrucciones mostradas en dichos récipes.

Si nuestro core es justamente este, entonces debemos implementar buenos diseños para cada uno de los récipes colgados en nuestro sitio o aplicación web, y a pesar que podemos estar pensando que necesitamos horas y horas en diseño, la verdad es que con algunos estilos de CSS y una estructura bien planteado podemos lograr esto que necesitamos.


Nuestro HTML será bastante sencillo, incluiremos nuestro archivo estilos.css en nuestra cabecera y estructuraremos el mismo en una serie de div, donde organizaremos la información en listas, además de identificar el bloque de información con una etiqueta article:

<div class="recipe-card">

			    <aside>

							   <img src="red-velvet.jpg" alt="Red Velvet" />

							   <a href="#" class="button"><span class="icon icon-play"></span></a>

			    </aside>

			    <article>

							   <h2>Red Velvet</h2>
							   <h3>Postre</h3>

							   <ul>
											   <li><span class="icon icon-users"></span><span>1</span></li>
											   <li><span class="icon icon-clock"></span><span>45 min</span></li>
											   <li><span class="icon icon-level"></span><span>Dificultad</span></li>
											   <li><span class="icon icon-calories"></span><span>560</span></li>
							   </ul>

							   <p>Un pastel de terciopelo rojo —en inglés: Red velvet cake— es un pastel con un color rojo oscuro, rojo brillante o rojo-marrón.</p>

							   <p class="ingredients"><span>Ingredientes:&nbsp;</span>Leche, harina, huevos, vainilla, colorante, azucar, mantequilla.</p>

			    </article>

</div>

Aquí agregamos adicionalmente la imagen para nuestra receta, que cada uno de ustedes modificará de acuerdo a sus necesidades, veamos que llevará nuestro archivo .css.


Al tener nuestra estructura definida en él .html solo debemos crear nuestros estilos. Para ello nos valdremos de algunas propiedades conocidas como el margin, padding y las posiciones. Además de esto utilizaremos propiedades como gradientes o el box-sizing, veamos:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}

html {
  height: 100%;
}

body {
  background-color: #57abf2;
  background-image: -webkit-linear-gradient(-225deg, #19d3d1 5%, #57abf2);
  background-image: linear-gradient(-45deg,#19d3d1 5%, #57abf2);
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.recipe-card {
  background: #fff;
  margin: 4em auto;
  width: 90%;
  max-width: 496px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

Además de esto vamos a utilizar las propiedades de los hijos de nuestro documento y para los iconos que utilizaremos en nuestra receta vamos a valernos de un .svg para extraer los mismos y colocarlos en nuestro HTML:

.recipe-card .icon {
  display: inline;
  display: inline-block;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg);
  background-repeat: no-repeat;
}
.recipe-card .icon-calories, .recipe-card .icon-calories\:regular {
  background-position: 0 0;
  width: 16px;
  height: 19px;
}
.recipe-card .icon-clock, .recipe-card .icon-clock\:regular {
  background-position: 0 -19px;
  width: 20px;
  height: 20px;
}
.recipe-card .icon-level, .recipe-card .icon-level\:regular {
  background-position: 0 -39px;
  width: 16px;
  height: 19px;
}
.recipe-card .icon-play, .recipe-card .icon-play\:regular {
  background-position: 0 -58px;
  width: 21px;
  height: 26px;
}
.recipe-card .icon-users, .recipe-card .icon-users\:regular {
  background-position: 0 -84px;
  width: 18px;
  height: 18px;
}

Hecho esto veamos el resultado final de cómo se vería nuestra receta.

Como vemos solo recurrimos a HTML5 y CSS3 para construir nuestra receta, ahora solo queda de parte de quien desee utilizar este ejemplo, descargarlo y realizar las modificaciones pertinentes al color, letra y las recetas que se deseen presentar.