Vamos a mejorar un pequeño detalle de la interfaz de pestañas CSS creada en un artículo anterior, para colocar una línea debajo de las pestañas y mostrar cuál es la que está abierta.

En un artículo anterior creamos un sistema de pestañas maquetado completamente con CSS a partir de listas y con una técnica llamada "puertas deslizantes". En el mencionado artículo explicamos cómo definir estilos a la lista y a los enlaces para que tuvieran el aspecto de pestañas o tabs. Entonces creamos dos tipos de pestañas, una para cuando la pestaña está activa o seleccionada y otra para cuando no está activa.

Lo que nos faltó comentar es cómo crear una línea o algo similar debajo de las pestañas para conseguir el efecto de que la pestaña activa parezca que está abierta y las otras pestañas, no activas, que parezcan cerradas. Para ver lo que queremos explicar, lo mejor es ver un ejemplo en una página aparte.

Fondo para la capa donde están las pestañas
Vamos a tener que crear un fondo de imagen para la capa donde están las pestañas. El fondo podrá ser como nosotros queramos, pero la imagen deberá tener en la parte de abajo una línea que sirva para cerrar las pestañas en la base de éstas.

En nuestro ejemplo esta capa le pusimos id="pestanas", así que para especificar el fondo de este elemento tenemos que alterar el CSS de la siguiente manera:

Mostrar, o no, la línea que cierra las pestañas
Ahora tenemos que definir un padding en la base (bottom) de los enlaces para dejar ver, o no, la línea que cierra las pestañas. La pestaña activa no debe dejar verse el fondo con la línea que cierra las pestañas, para que parezca que está abierta.

Esto es bastante sencillo de hacer, aunque quizás un poco más difícil de explicar. Simplemente vamos a definir dos padding-bottom distintos, para los enlaces de las pestañas en general y para el enlace de la pestaña activa en particular. El padding-bottom de la pestaña activa deberá ser tantos píxeles mayor como sea la altura de la línea que cierra las pestañas (que hemos definido en el fondo, en nuestro caso 1 píxel). Así conseguiremos que el enlace de la pestaña activa llegue hasta abajo del todo de la capa donde están las pestañas (id="pestanas"), sobreponiéndose a la línea del fondo y sin permitir que se vea. Las pestañas desactivadas tendrán menos padding-bottom, con lo que no llegarán al fondo de la capa donde están las pestañas y dejarán entrever la línea del fondo que las cierra.

Y estas son las únicas modificaciones que habría que hacer para que la interfaz de pestañas tenga una línea para delimitar las tabs no activas.

Contenedor para la pestaña activa
Sin embargo, para que se viese bien el efecto de pestaña activa, he colocado debajo de las pestañas una nueva capa que serviría como contenedor del contenido de la pestaña seleccionada. Este contenedor, insisto, no haría falta para nuestro ejemplo de pestañas y cada uno lo puede definir como le parezca mejor, pero nos vendrá bien colocarlo para mostrar con más claridad el efecto explicado en este artículo.

El contenedor es una simple capa DIV con un texto, a la que tendremos que asignar unos estilos CSS, que podemos ver a continuación:

Aquí se mostraría el contenido de la pestaña activa...

Entre los estilos colocados hay dos que serían importantes. Primero el fondo del contenedor, que lo he colocado con el mismo color de la pestaña activa, para que se continúe el color desde ésta hacia el contenedor y parezca que formen parte de un mismo bloque. Luego necesitaba también un estilo clear:both, puesto que los elementos de la lista estaban con un "float" y esta nueva capa id="contenedorpestanas" queremos que aparezca justo debajo.

Todavía no tires el monitor contra la pared. Aquí los principales trucos CSS para hacer frente a los típicos problemas que se enfrentan los diseñadores web cuando maquetan con CSS. Podrán existir discrepancias entre los lectores, pero aclaro que estas son técnicas que a mi personalmente me han dado resultado, después de muchas pruebas e intentos aprendí esto...

Usa un contenedor global para todas las cajas (cuando las cosas se disparan)
De esta forma estas prefijando globalmente el orden de todas las demás cajas. En referencia a este contenedor ordena el resto de las cosas interiores. Es como si haces una cerca o valla para que nada es escape. Obviamente estamos hablando de sitios “fijos” no elásticos.
A veces es bueno usar un contenedor hasta el cuerpo del sitio, luego dejar el pié afuera.

Ejemplo para un contenedor de 900px centrado:

Que flote a la izquierda (cuando las cajas se superponen)
Esta es una muy buena forma de evitar incompatibilidades entre navegadores. El uso de hacks de CSS se debía en gran parte porque se trabajaba “centrando” las cajas. Si por ejemplo precisas poner tres cajas de 300px en un contenedor de 900px puedes hacer lo siguiente.

Ejemplo:

Calcular bien los paddings o rellenos (cuando las cajas se van abajo)
Casi todos los dolores de cabeza y maldiciones hechadas sobre el CSS se deben al mal uso o a la mala interpretación que se hace del padding. Pero es más simple de lo que parece.

¿Para que sirven los paddings o rellenos? Bueno, lo que hace es generar un “relleno” de determinada medida para dar por ejemplo como un margen a los elementos, pero lo hace sobre el ancho en píxeles que esté prefijado. Por ejemplo: si tenemos una caja de 300px y le aplicamos un padding de 10px en la izquierda, ahora tendremos una caja de 310px. Esto hará desbordar al resto de las cajas y las desplazarán para abajo. Ahí es cuando el diseñador principiante se vuelve loco. El tema es que si hay una diferencia de hasta un 1px se producirán estos desbordes, sino fíjate cuando le incluyes bordes a tu caja, se producirán diferencias.

Lo que se debe hacer es simple, calcular bien y recordar cada ajuste que se haga de los rellenos. Ahora tendremos que hacer una caja de 290px con paddings de 10px a la izquierda.

Ejemplo:

El pié de página con ancho fijo (cuando el pié de página enloquece):
Para entender mejor como funciona el uso de cajas en CSS se puede pensar en un grupo de objetos de diferentes formas que luchan por adaptarse y ocupar el espacio que se ha prefijado. Sucede muchas veces que los pié de página son los más problemas traen cuando se maqueta un sitio. O se va para arriba, se alinea a la izquierda, o se desborda, etc. Muchos resolvíamos este tema prefijando valores fijos a las alturas de cajas, pero no tiene sentido. Lo que se debe hacer es de nuevo establecer un valor de ancho fijo. De esta forma el pié se va a hacer su lugar del resto e irá a parar donde tiene que ir.

Ejemplo:

No todo es 1+1=2 en CSS (cuando los anchos no cierran)
Un problema común en css es pensar que todos los anchos entre cajas cierran perfectamente. A veces es necesario jugar con los valores de los contenedores, a veces contrario a la lógica hay que añadir algunos px a los contenedores.

OTROS TRUCOS RÁPIDOS:

Trucos sencillos, de los que no hace falta explicar mucho pero que son muy prácticos y te harán más fácil el trabajo y evitarán posibles errores.

• Usa colores diferentes para distinguir las cajas
• Pon una palabra descriptiva en cada caja
• Comenta el código fuente y señala los finales de los contenedores grandes
• No mezquines espacios entre los divs
• No seas un fundamentalista y no quieras escribir tu CSS con dos o tres líneas. Si no quieres errores escribe lo necesario.
• Cuidado con el tamaño de las imágenes que insertas, estas cambian el ancho de los contenedores.
• Elige bien los nombres de cada div y trata de ser ordenado en el código.
• Si vas a trabajar con varias cajas, trata de agruparlas de a grupo, esto es muy importante. Por ejemplo un contenedor que agrupe tres o cuatro cajas.

CONCLUSIÓN:
Todas estos párrafos son simplemente algunas sugerencias o comentarios de lo que me ha dado resultado a mi. Existen otras muchas “ataduras” de este tipo, si tienes alguna no dudes en comentarlas en este mismo artículo.

Que pasa cuando no puedes resolver un problema con CSS o similar? A mi me ha dado resultado levantarme un rato, hacer cualquier otra cosa y luego volver e intentar de nuevo.

Dejar de renegar y no enloquecer con CSS dependerá de la cantidad de tiempo, trabajo y esfuerzo que le metas a tu trabajo. No lo dudes.

Podemos personalizar nuestros select menu asignádoles clases a las opciones del menú, como prueba añadiremos distintos colores de fondo en el desplegable.

Para darte una idea mejor de lo que busca este articulo por favor observa el resultado antes de seguir leyendo.

Primero

Creamos una página nueva HTML.

Segundo

Dentro de las etiquetas HEAD definimos el CSS.

Tercero

Dentro del Body, creamos nuestro formulario, asignando a cada option la clase que le corresponda.

Cuarto

Guardar y Probar.

Este mismo procedimiento, es suficiente para añadir imágenes en cada option, sólo modificando las clases CSS, de tal manera de poder dejar muy bien personalizado nuestro menú de selección.

Una primera aproximación visual
Tarde o temprano, todo libro o taller práctico de CSS queda bajo la influencia del Modelo de Caja.
Es uno de los elementos básicos de las Hojas de Estilo en Cascada y por lo tanto su correcta interpretación resulta fundamental a la hora de lograr los resultados deseados en un diseño, por más simple que éste resulte.
Para entrar en tema, vamos a construir un sencillo ejemplo utilizando un único elemento <div> al que aplicaremos un estilo. El resultado producido será analizado con la ayuda de una figura en la que hemos modelado el orden de apilado de los elementos del <div> en una disposición tridimensional que nos ayudará a comprenderlo.
Supongamos el siguiente código (lo mostramos fuera de su contexto, restringiéndonos a lo significativo para el ejemplo):

El elemento <div>

El estilo div

El código anterior generará una caja como la que muestra la figura siguiente, en la que adicionalmente se ha dado color a los elementos transparentes (margen y relleno) solo para hacerlos visibles.
Un detalle interesante que puede apreciarse en la representación tridimensional en que la capa superior del apilamiento no es el borde, como podría suponerse intuitivamente.
La capa situada encima de todas las demás es la de Contenido.
Aunque el caso específico sea materia de otro artículo, comentaremos que esta disposición fue utilizada por el diseñador Douglas Bowman de Stopdesign para el rediseño del sitio de Blogger, logrando las armoniosas líneas curvas de sus páginas mediante CSS, ubicando imágenes en la capa de Contenidos de modo que oculten el borde anguloso de las cajas.

Áreas y propiedades
Cada caja posee, además de su área de Contenido, otras tres áreas opcionales:

Esta técnica describe cómo montar formularios basándose en una retícula usando CSS en lugar de tablas. No es la técnica definitiva pero, por ahora, es la mejor conclusión a la que he llegado.

La idea es definir la anchura de los campos del formulario basándonos en la etiqueta <label>. Esta etiqueta se utiliza para mostrar el nombre de cada campo y puede codificarse de dos maneras:

Una de ellas es aplicándole el parámetro for para relacionar cada label con el input/select/textarea que le corresponda.

La otra manera, que es la que utilizaremos aquí, es englobar el input/select/textarea dentro de una etiqueta <label>, de modo que ya no es encesario emplear el parámetro for para establecer la relación:

La maqueta basada en retícula supone, antes de nada, establecer la retícula. Para el ejemplo usaré pixels, aunque puede hacerse también con porcentajes o con ems.

Vamos a maquetar un formulario de 300px de ancho basado en una retícula de 3 columnas, así que cada columna tendrá 90pixels de ancho y 10px de margen derecho.

Sobre esta retícula, podemos tener campos que ocupen 1, 2 ó 3 columnas, resultados campos de:
• ancho1 (100) = 90px + 10px de margen
• ancho2 (200)= 190 +10px de margen
• ancho3 (300)= 290 +10px de margen

Bueno, ya tenemos las premisas para empezar a construir nuestro CSS.

Primero, al formulario le daremos el ancho de la retícula que nos hemos propuesto: 300px, aunque puede tener más si nos conviene para la estética, añadir padding..: realmente el formulario no influirá en la retícula, lo ponemos así por un cuestión formal.

Ahora, pondremos los labels a flotar para que se vayan apilando uno a continuación del otro. Les daremos un margen derecho de, por ejemplo, 10px para separar las columnas de la retícula del formulario. Además de esto, para que el apilamiento funcione bien, forzaremos la altura de los labels ya que los select y los inputs no pintan igual en IE, de modo que los bloques de labels, al tener distinta altura, no se apilarían bien. Le damos un poco más de lo que pensamos que tendrá de altura un label (un em para el texto, otro em para el input/select y otro em para que exista margen vertical entre cada renglón de campos).

Sólo falta decirle a los inputs y selects que ocupen todo el ancho de su contenedor, ya que son realmente los labels los que están fijando la anchura de cada campo.

Si decoramos los campos con un borde por CSS, debemos reducir un poco el ancho ya que IE sumará al 100% los pixeles del border desbaratándolo todo.

Ahora sólo nos falta el botón de enviar. Para que haga juego con nuestros labels apilados, lo flotamos a la izquierda y le damos margen superior de 1em para compensar que el botón no lleva el texto de un <label> por encima.

Total, nos quedaría algo así:

CSS

XHTML

Y este sería el resultado (añádase algún detalle CSS para dejarlo curioso):

Al diseñar un sitio web es algo fundamental tener en cuenta las fotografías del mismo y es casi completamente necesario añadirles algún efecto para que las mismas luzcan elegantes y originales.

Desde la web The Art of Hand Coding nos traen cinco sencillas técnicas CSS para darles sabor a nuestras imágenes sin la necesidad de utilizar ningún programa de edición de imágenes como el Photoshop.

Efecto de sombra:
Nos permite añadirle a la imagen el efecto de sombreado utilizando sencillamente una imagen de fondo un poco suavizada.

El HTML debería ser:

Y el CSS:

Efecto de borde doble:
Este es uno de los efectos más utilizados y luce verdaderamente muy bien.

El HTML sería:

Y el CSS:

Efecto de imagen encuadrada
Básicamente se coloca una imagen transparente en el frente para lograr el efecto.

El HTML luciría así:

Y el código CSS:

Efecto de marca de agua
Se puede lograr bajando la opacidad de la imagen principal y permitiendo que la imagen de fondo se destaque.

El HTML se vería así:

Y el CSS:

Imagen con titulo:
Se puede añadir un titulo simplemente utilizando posicionamiento absoluto y transparencia.

Este sería el código HTML:

Y este el CSS:

Tengo desde hace ya tiempo ganas de comentarles cómo evitar los hacks que no validan en su CSS para Internet Explorer (que es el que prácticamente abarca todos los hacks que conocemos).

La idea y razón es sencilla: menos código y siguiendo los estándares web.

El problema
Como muchos sabemos, Internet Explorer sigue sus propias reglas al momento de leer una página web. Esto nos ocaciona muchos dolores de cabeza y nos obliga a buscar maneras alternativas de lograr que este navegador funcione como queremos. Muchas de estas maneras son logradas por medio de hacks que, por algúna razón, sólo ese navegador lee. El hack más conocido para IE es el famosisimo star-html hack:

Claro que este hack no sería nada sin el Mac-hack, que esconde el CSS de IE5 para Mac. Este funciona utilizando comentarios en CSS:

Por alguna extraña razón, la diagonal antes del asterisco de cierre del primer comentario evita que IE5-Mac cierre el comentario y piensa que este sigue abierto, así que todo lo que esté dentro de ese comentario y hasta el siguiente cierre de comentarios será ignorado por IE5-Mac.

En fin, hay millares de hacks para IE y todos son bastante usados hoy en día. Todo es bueno y bello, pero a veces estos hacks son demasiado largos (y esto, en ciertos casos, es inaceptable) o complicados o simplemente queremos tener un código limpio y sin errores de validación.

Las alternativas
Siempre hay alternativas a estos casos. Pondré algunos ejemplos y les iré mostrando cómo evitar los hacks y lograr que Internet Explorer se comporte como debe. Primero me voy contra el star-html hack, que es el más usado y el que ocaciona más errores de validación. Pondré como ejemplo el Holly Hack. Este hack consiste en aplicar un height: 1% a una caja con problemas (tiene que ver mucho con floats, echenle una leída al artículo del hack ;)). La cosa está en que solamente Internet Explorer debe tener aplicada esta altura, pues en otros navegadores podría causarles problema (aunque en la mayoría, las cajas se expanden automaticamente… pero en fin). Ahora bien, el código que proponen en la página del hack es el siguiente:

Como ven, esconden el hack para IE5-mac y ponen el hack solo para Internet Explorer (el resto de los navegadores ignora el * html). Claro está, no valida (el star-html hack no es válido). ¿Cómo arreglamos esto? Les presento a !important. Esta pequeña palabrita hace maravillas si es usada correctamente. El siguiente código es equivalente al código anterior:

Como ven, eliminé el star-html hack, mantuve el hack para IE5-Mac (que no tiene problemas de validación) y agregué un height: auto !important. ¿Cómo funciona? Bueno, como saben, las hojas de estilo en cascada, como su nombre lo indica, leen la información en cascada. Esto quiere decir que si ponemos dos atributos iguales para el mismo elemento, el segundo tomará el lugar del primero. Un ejemplo:

Sin el !important, todos los navegadores mostrarían el color verde en lugar del rojo, simplemente porque así está el orden. Los navegadores modernos (Firefox, Opera, etc.), al leer el !important le dan más importancia a este elemento, sin importar su posición en la hoja de estilos (claro está, si tienes varios !important a saber qué pasa). Internet Explorer 6 y menores ignoran completamente el !important, por lo que el color verde toma el lugar del rojo. Esta es la forma de eliminar el 80% de nuestros hacks en nuestras hojas de estilos.

Otra forma de aplicar estilo a IE6 o menor es el uso de combinadores. Al que me refiero específicamente es a >. Un ejemplo:

Todo lo que esté dentro de ese código será ignorado por IE6 o menor. Llega a ser bastante útil. Ahora bien, qué tal que necesitas esconder la información de IE5, pero IE6 debe verla (raro, pero si me ha llegado a pasar). Bueno, par eso tenemos la hermosa línea diagonal invertida:

De nuevo, usamos la propiedad de las hojas de estilo en cascada. Todos los navegadores (incluido IE6) usaran el valor de 710px para el ancho; pero IE5 y el IE5.5 lo ignorarán completamente. La diagonal invertida hace que estos dos navegadores “borren” la t que está despues de ella y por lo tanto, tienen un atributo widh que no existe y, por lo tanto, ignoran. Este hack también valida.

¿Y si necesitas aplicar CSS sólo a IE-Mac? Bueno, para eso tenemos un juego de comentarios en CSS:

Esta regla será aplicada solamente para IE-mac.

La última solución:
Y bueno, siempre habrá veces en que estas alternativas no sean suficientes (aunque con los hacks arriba mencionados la gran mayoría de las veces debería irles bien). Para esos casos, tenemos los hermosos comentarios condicionales. Aunque la información y los comentarios de estos son bastos en la web, veo que aún son muy poco usados, y no le veo razón. Es genial contar con ellos. Su estructura es un comentario de HTML vil y simple que todos los navegadores ignoran… menos IE. IE leera todo lo que esté dentro de estos comentarios, y eso significa que podemos crear un archivo css separado para IE solamente. ¡Genial! Les pongo un ejemplo. Supongamos que tenemos esto en nuestro css global:

¿Pero qué tal que queremos que sea verde en IE? Creamos un archivo llamado ie.css y lo agregamos a nuestro header de nuestro archivo .html de la siguiente manera:

Y cuando veamos la web en IE, veremos cómo el fondo de nuestra web es verde. Ojo, que el comentario condicional con la nueva hoja de estilos para IE está DESPUÉS de la principal. Esto es importante para que funcione (de nuevo, se leen en cascada). Pero esto no es todo lo que los comentarios condicionales nos ofrecen. También podemos elegir una versión de IE solamente:

Si miran el código fuente, verán el código de arriba en mi head. Dentro de estos archivos css puedo meter las reglas que quiera aplicar sin necesidad de usar hacks y se aplicaran a las versiones menores a IE6 (para hacks generales, mas que nada bugs que IE tiene) y para versiones menores a IE5 (para arreglar el horrible modelo de caja de IE5…). Esta es la forma más limpia y ordenada de manejar las diferencias entre navegadores, y en verdad que se me hace muy importante que sea más utilizada, ya que con la entrada del IE7, muchos de los hacks que usábamos han quedado inutilizados, pero IE7 se sigue comportando como IE6.

Si bien, quieren crear un estilo que sea visto por todos los navegadores menos Internet Explorer, puedes usar el siguiente código:

La cosa está en que IE no soporta las reglas del @import, por lo que ignorará esta inclusión, mientras que los navegadores modernos la incluirán sin problemas.

Claro está que estos métodos no son la panacea universal y seguro que en algún momento deberán usar por fuerza algún hack, sea para IE o para cualquier otro navegador; pero definitivamente si siguen estos consejos podrán conseguir hojas de estilos válidas y funcionales en el 99% de los casos.