Niquelao

Estilando el curso de CSS Avanzado 8 de Noviembre de 2009, por Rumoroso

Hace unos días estuve en Zaragoza impartiendo un curso sobre CSS avanzado (incluido en el catálogo de cursos de CTIC). Como es lógico, y especialmente por tratarse de un curso sobre hojas de estilo y técnicas avanzadas, preparé la presentación en rumoslide (como el 95% de los usuarios lo llaman así, al final se quedará con ese nombre).

La cuestión es que lo extenso del temario (o lo ajustado del tiempo) hizo que me quedase con las ganas de comentar algún detalle sobre los estilos que empleé en la presentación. Precisamente para ello me he puesto a escribir este artículo (bueno, y para retomar la costumbre de escribir periódicamente en el blog).

Como es lógico, el comienzo es el comienzo, con lo que hoy le toca a la portada:

De la portada lo que quiero comentar es lo que hice con el título de la presentación. Mi idea era destacar ambas palabras (CSS y avanzado), tratando de hacerlo con suficiente énfasis individual para cada una, pero cuidando que no perdiesen su unión. Para ello, entre otras cosas, jugué con el tamaño y color de las fuentes (grande y claro vs menor y oscuro) y con su posición (superposición parcial).

Lo primero, el código HTML que utilicé:

<h1>
	CSS
	<span>Avanzado</span>
	<span></span>
</h1>

Y a continuación la CSS y su explicación:

h1  {
	font-size: 7em;
	color: #ffc8a3;
	line-height: .8;
	font-style: italic;
	margin: .5em 0 .2em 20%;
	border-bottom: 3px solid;
	position: relative;
	overflow: hidden;
}

La idea ha sido estilar primero las letras CSS del encabezado. Como el resto del texto se incluye en un span, se puede aplicar un estilo genérico para el h1 para luego compensar el efecto sobre este. Así pues, declaré un tamaño de fuente suficientemente vistoso (7em), un color que combinase de forma adecuada con el resto de los estilos empleados y que no fuese demasiado intenso, el alto de línea y el estilo cursiva. Además le apliqué unos márgenes, teniendo en cuenta que quería separarlo de la izquierda un 20% del ancho total. Finalmente le puse una línea inferior de 3px (el color lo hereda de la tipografía).

Junto con estos estilos, como la superposición de palabras la conseguí con posicionamiento absoluto (más adelante lo comento), recurrí a inicializar las coordenadas de los descendientes del encabezado posicionándolo en relativo. El control sobre lo que desborda (overflow: hidden) lo añadí a posteriori (porque vi que el resultado quedaba elegante) tras estilar el resto del encabezado. Con esto se consigue que la parte inferior de la palabra avanzado oculte al sobresalir sobre los límites del h1.

A continuación estile la palabra avanzado:

h1 :first-child {
	font-size: .5em;
	font-style: normal;
	color: #222;
	position: absolute;
	top: 60%;
	left: 15%;
	opacity: 0.75;
	-moz-opacity: 0.75;
	-ms-filter: alpha(opacity=75);
}

Para evitar el marcado adicional jugué con los selectores. El término avanzado está en el primer elemento descendiente del h1, con lo que la selección se realiza mediante la pseudoclase :first-child. Lo primero, cambiar las propiedades de la fuente (reducir tamaño, cambiar color y eliminar la cursiva). La superposición la hice mediante posicionamiento absoluto (las coordenadas se toman respecto a la posición del h1 al haberle declarado posicionamiento relativo a este). Finalmente le di un toque extra jugando con su opacidad (recurrí a las propiedades con prefijos específicos que permiten que se vea correctamente en las versiones más actuales de los navegadores).

Y ahora la pregunta ¿cómo conseguí el efecto del degradado blanco?. La respuesta es sencilla y se basa en el siguiente código:

h1 span + span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
 	background: transparent url(img/degrada.png) left bottom repeat-x;
}

El span vacío que añadí (y que seguro que a alguno ya le sonaba raro) es el que se encarga de este efecto. En realidad la idea es simple. Se puede conseguir el efecto poniendo sobre el texto una imagen png con un degradado de color que vaya de blanco a transparente (el blanco es por el fondo de la página). Para ello seleccioné el span mediante un selector contextual (es el span que va detrás de otro span, con lo que span + span), lo posicioné en absoluto e hice que ocupase el 100% del ancho y alto del encabezado (al posicionar el span, pasa a admitir dimensiones). Luego le añadí la imagen del degradado como fondo alineado en la parte inferior (como es una imagen estrecha, hice que se repitiese sobre el eje x). Y listo…

El resto de estilos aplicados a la portada (pié y logo) se mantienen constantes a lo largo de las diapositivas de la presentación. En general son bastante sencillos, por lo que los comentaré rápidamente (quizás lo detalle cuando mencione los estilos de otras secciones en artículos posteriores). Decir que el pié es un contendedor genérico que incluye una lista (a la que le he quitado los bullets). Le puse un color de fondo intenso próximo al naranja CTIC y una imagen (también de fondo) colocada a la derecha. Además lo posicioné fixed en la parte inferior de la pantalla porque no quería que se desplazase con el scroll vertical (esto me sirvió de ejemplo durante el curso).

Respecto al logo, es un svg incluido en el elemento object. Lo que hice fue posicionarlo en absoluto ahí arriba y mantenerlo así durante toda la presentación.

En brevé comentaré algunos otros ejemplos de estilo que apliqué a lo largo de la presentación, como por ejemplo, la forma en que conseguí el fondo bicolor con las letras CSS, etc.

Estilando el curso de CSS Avanzado

Categoría: CSS

Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0. También puedes enviar un trackback desde tu sitio.

• Artículo anterior: The best… made with CSS
• Artículo siguiente: Otro toque de estilo en el Curso de CSS