CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

Bien, has creado un restaurante, tienes todo listo, la comida, los cubiertos, pero te falta el menú. No sabes cómo hacerlo así que te lo inventas en CSS. Eso es lo que os vamos a enseñar en esta entrada, como crear un menú de restaurante a base de CSS:

La estructura HTML:

Una de las posibles maneras de crear el menú es utilizar <dl> alrededor de cada ración, incluyendo su precio y descripción:

<h2>Antipasti</h2>
<dl>
<dt>Bruschetta</dt>
<dd class="price">5 Euro</dd>
<dd class="ingredients">Sliced and roasted bread with tomatoes, extra virgin oil, garlic and basil.</dd>
</dl>

<dl>
<dt>Caprese</dt>
<dd class="price">6 Euro</dd>
<dd class="ingredients">Mozzarella with fresh sliced tomatoes, extra virgin oil and oregano.</dd>
</dl>
<dl>
<dt>Prosciutto e melone</dt>
<dd class="price">8 Euro</dd>
<dd class="ingredients">Sweet Parma Prosciutto with melon slices.</dd>
</dl>

El código CSS:

Ahora vamos a estilizar el menú. Si nos damos cuenta, usamos una imagen de fondo en forma de puntos (dot.gif) , que se repiten con el eje Y constante, y el eje X, variable:

body {background: #FFF;text-align:center}
p {text-align: center;color: #50A7FF}
a {color: #0055EA}

div#menu {width:550px;margin: 0 auto;
font: 90% "Trebuchet MS",Arial,sans-serif;text-align:left}
h2 {margin: 1em auto 0.3em;color: #008C00;
font-size: 250%;text-align:center}

dl {width: 100%;overflow: auto;margin: 0 0 1em;
background: url(dot.gif) repeat-x 0 1.2em}
dt,dd.price {background: #FFF;font-size: 130%;font-weight: bold}
dt {float: left;padding-right: 3px;color: #F70000}
dd {margin:0}
dd.price {float: right; padding-left: 3px; color: #AAA}
dd.ingredients {float: left; width: 100%;padding: 3px 0;
font: italic 100% Georgia,Times,sans-serif;color: #555}

Estandarización

HTML 4.01 Strict válido

CSS 2.1 Válido

Ejemplo final

Para terminar, ofrecemos un ejemplo de su funcionamiento.

Vía | Web-graphics