¿Tienes curiosidad por aprender a realizar logotipos en CSS como el de Internet Explorer u Opera, entre otros? En este artículo explicaré como crear un logotipo con CSS, teniendo como fuente de inspiración el logotipo que asocio a la entrada. Se resumen en varios pasos, bastante sencillos, que dan como resultado un logotipo muy interesante realizado en CSS.

Código HTML

Empezaremos con esta estructura:

<div id="logo">
<h1>
<span id="css">CSS</span>
<span id="img"><a href="#" title="Long description of the image">D</a></span>
<span id="day">Day</span>
</h1>
<h2>Until the quirks stop</h2>
</div>

Ver ejemplo.

Estilos generales

Los estilos generales son muy sencillos:

#logo {

background: #fff;

color: #000;

font: 100%/1 Arial, Helvetica, sans-serif;

}

Hemos definido el tipo y el tamaño de la fuente del logotipo además del color del texto y el color del fondo.

Ver el ejemplo.

Posicionamientos y dimensiones

Ahora indicaremos la posición y dimensiones de los elementos:

#logo {

padding: 1em;

}

#logo h1, #logo h2 {

margin: 0;

}

#logo h1 {

height: 150px;

}

#logo h1 span {

float: left;

height: 100%;

}

Ver ejemplo.

Para posicionar el elemento hijo del encabezado h1, usaremos la propiedad float. La altura de este encabezado equivale a la altura de la imagen de fondo que vamos a insertar. El hijo del encabezado h1 (span) tendrá la misma altura que su padre.

Insertando la imagen de fondo

La imagen de fondo se incluirá de esta forma:

#logo h1 #img {

width: 80px;

height: 150px;

background: transparent url("../img/csslogo.png") no-repeat top left;

text-indent: -1000em;

}

Ver ejemplo.

Las dimensiones de el elemento #img equivalen a las dimensiones de la imagen de fondo.

Definiendo el tamaño de la fuente y el color

Ahora podremos escribir el tamaño y el color del elemento hijo del encabezado h1.

#logo h1 #css, #logo h1 #day {

font-size: 150px;

text-transform: uppercase;

}

#logo h1 #css {

color: #c00;

}

Ver el ejemplo.

Hemos usado píxeles para tener un control más preciso sobre el tamaño. En estos tamaños podemos usar píxeles mejor en vez de ems (?).

El subtítulo

El subtítulo (elemento h2) tiene el siguiente estilo:

#logo h2 {

text-transform: uppercase;

font-size: 55px;

display: inline;

background: #000;

color: #fff;

position: relative;

top: 10px;

}

Ver el ejemplo.

Como la imagen de fondo debe cubrir únicamente el área de texto y no todo el bloque contenedor, convertiremos el elemento a un elemento en línea. Después crearemos un espacio vertical usando la propiedad position con un desplazamiento vertical de 10 px.

Finalmente alinearemos verticalmente el texto del elemento h1 con la línea de la imagen de fondo. Para ello deberemos insertar lo siguiente:

#logo h1 #css, #logo h1 #day {

position: relative;

top: 15px;

}

Hemos usado la posición relativa pero ahora con un desplazamiento vertical de 15 píxeles. Puede ser interesante también que veas estos dos ejemplos: Ejemplo 1. Ejemplo 2.

Vía | Zibaldone.