CSS / página 1 de 3

CSS: z-index funciona sólo cuando se define explícitamente la posición

Hay cosas que nos puede llevar mucho tiempo de hacer correctamente si no conocemos bien su funcionamiento. Y me acaba de pasar intentando superponer una capa HTML sobre otra.

z-index es una propiedad CSS que nos permite establecer el orden en que se muestran las diferentes capas, en caso de que se superpongan. Es muy sencilla de utilizar, a mayor número, mayor “altura”, y por lo tanto la que tenga más altura es la primera en verse, tal y como lo muestra el siguiente esquema.

z-index gráfico

z-index gráfico

Luego de horas de intentar hacerlo funcionar (porque no funcionaba como correspondía), encontré en esta publicación (que de paso recomiendo porque es muy completa), que para que funcione se debe establecer explícitamente la posición (position) como absolute, fixed o relative.

Editores para CSS

Si bien una hoja de estilos en cascada puede ser editada desde el simple y práctico Bloc de Notas de Windows, por ahí es conveniente, para los que editan este tipo de archivos a diario, hacer uso de algún programa desarrollado para tal fin.

Acabo de ver en aNieto2K un pequeño artículo en el que lista algunos editores de CSS, con sus respectivos links a sus sitios para la descarga, sus precios (algunos son gratuitos), y sobre qué plataforma corren.

A continuación el listado ordenado por precio:

Estos programas nos pueden facilitar y hacer más rápidas las cosas. Yo particularmente, por ahora, me conformo con el editor de CSS que trae DreamWeaver; de todas maneras le daré alguna oportunidad a los que mencioné arriba.

CSS de reinicialización

La teoría dice que todos los navegadores deberían renderizar de igual manera todas las páginas. El mundo real no respeta esto ni un poco; es así que los diferentes navegadores que se utilizan en todo el mundo (Firefox, Safari, Opera, Internet Explorer) tienen la capacidad de mostrar, cada uno, las páginas de diferente manera.

Además de molestar de algún modo a los usuarios de los sitios, estas cuestionen les ponen los pelos de punta a aquellos diseñadores que están maqueteando en CSS un sitio web. La mayor parte del tiempo se pierde en intentar que el sitio se vea igual en todos los navegadores (o, al menos, de manera similar en los más utilizados).

Ahora bien, una de las “herramientas” con la que cuentan los diseñadores son las llamadas hojas de estilo de reinicialización; documentos CSS capaces de “reiniciar”, o “resetear” la hoja de estilos definida por los distintos navegadores para que de algún modo “vuelvan a empezar”.

Haciendo uso de estas plantillas las cosas se simplifican bastante. En WebIntenta acabo de conocer a PerishablePress, blog en inglés que publicó un artículo con una colección de CSS de reinicialización.

Esta colección tiene algunos CSS para reseteos básicos, y algunos otros con reseteos más profundos. Además nos explica (repito, en inglés) como usarlo.

El poder del CSS demostrado en 50+ ejemplos

La hojas de estilo en cascada son muy utilizadas hoy en día, más que nada para la maquetación de sitios con contenido semántico (limpieza en el código).

Eso es más que cierto, pero también es cierto que con CSS podemos dar soluciones a problemas mucho más específicos, como por ejemplo el diseño de planillas, formularios, botones, pié de páginas, etc.

En Noupe han publicado una interesante colección con más de 50 ejemplos de aplicaciones de CSS, cada uno con un pequeño tutorial para implementarlo en nuestros sitios.

Para los interesados en el tema, pueden ver estos ejemplos siguiendo este enlace.

Convertir PSD a CSS en un solo paso

La tarea de un diseñador web no termina en un PSD, sino en un XHTML con su respectiva hoja de estilos. Acabo de encontrar en XeroBlog una herramienta online que es capaz de crear a partir de un PSD en un archivo XHTML con un solo click.

La herramienta se llama PSD2CSS, y lo único que debemos hacer es seleccionar de nuestro disco un PSD de menos de 2MB; del resto se encarga PSD2CSS.

Esta herramienta es totalmente gratis, sino no estaría acá, y luego de procesar la imagen tendremos: un archivo HTML, otro CSS y varias imágenes. En conjunto, éstos elementos, arman toda la maquetación de la página.

La verdad que se ve muy bien; pero al probarlo me di cuenta de que no sirve para mucho. La mejor forma de pasar algo en imagen a CSS y XHTML es trabajando. Además, CSS no es algo tan complicado como para buscar salidas alternativas ante un tabajo pendiente; la práctica puede entrenarnos tanto como para lograr maquetear un sitio completo en pocas horas.

Enlace: PSD2CSS

Homero Simpson en CSS

Román Cortés se ha sentado un par de horas frente a la PC y el resultado fue: la cara de Homero Simpson diseñada con sólo CSS, 100%.

Se necesita la fuente Verdana para verse correctamente, y fue probado en Internet Explorer 5.5, 6 y 7, Opera 9, Firefox 2 Safari 3.

A continuación, la obra de arte:

o
o
o
o
(
O
O
O
\
L
(
O
O
O
O
O
\
L
(
O
|
|
\
\
|
|
\
\
\
\
(
(
8
o
o
o
(
(
8
o
o
o
o
)
)
b
o
O
o
o
o
o
o
o
)
b
o
O
o
o
o
o
o
o
o
o
o
/
/
/
_
_
_
C
C
O
(

Zapping de sitios con excelentes diseños web

Cuando necesitamos algo de distracción, nos sentamos frente al televisor y hacemos un rato de zapping. Entonces, ¿Por qué cuando necesitamos inspiración no hacemos un poco de zapping en sitios web?

Con CSS Rand lo podemos hacer de manera muy fácil. Para ello vamos al sitio, y de entrada tendremos el primer sitio pre-seleccionado para visualizar. Luego, podremos ir haciendo clic en el logo de CSS Rand para ir viendo los otros sitios cargados en el directorio; sin dudas, un lugar que nos puede llenar de inspiración.

css-rand.jpg

La barra en donde está el logo tiene otros link como:
Gellary, About, Blog, Advertise y Feed. Además, si nos molesta un poco cuando estamos viendo alguna web podremos “draguearla” (moverla) con el mouse sin problemas.

Enlace: CSS Rand
Vía: Kabytes

Librería para crear gráficos de barra con CSS

Pure Css Data Chart es una librería que no necesita valerse ni de JavaScript para plasmar en pantalla gráficos de barra mediante valores que nosotros designaremos.

La apariencia de los gráficos es muy linda, con colores bastante dinámicos y las barras tienen un sencillo efecto de foco que lo hace no-plano. A continuación una captura, pero si quieren ver una demo funcionando en vivo, pueden hacerlo aquí.

grafico-barras-css.png

Para la realización del gráfico simplemente debemos seguir algunas reglas, bien explicadas en el sitio de la librería; pero les puedo adelantar algo como para que vean que no es nada de otro mundo:

<dl id="csschart">
<dt>Day 1</dt>
<dd class="first">
<span class="p36">
<em>36</em>
</span></dd

La gran ventaja de una librería que sólo utilice CSS para funcionar es que no necesita nada adicional instalado en la máquina del cliente: no Flash, ni tampoco ningún agregado.

Enlace: Pure Css Data Chart

Google detrás de las letras

Esto no tiene trucos, no es más que algunas propiedades y atributos de CSS aplicados. Lo que si, es curioso y llamativo, más para los que no entienden mucho de CSS y seguramente se preguntarán cómo lo logran.

Imagino que más de uno se estará preguntando ¿de que estoy hablando? Si tenemos un texto, mediante CSS podemos definirle el color al que queremos que se transforme cuando sea seleccionado (con selection). Entonces, si tenemos una tarde muy aburrida, y no hay nada pero nada que hacer, podemos escribir un párrafo, y ponernos a “dibujar” “detrás” de él.

Miren lo que se logró aquí:

google-detras-texto.png

Se “dibujó” el logo de Google detrás del texto, CSS puro. Entonces, a medida que vamos seleccionando el mismo, el logo irá apareciendo.

Como siempre, el problema latente: no funciona en Internet Explorer. De hecho, la página en dóndo han plasmado esto dice arriba de todo: “Safari and Firefox, select the text below.“.

Enlace: Fun with highlights

Resetear CSS: Cómo (Tripoli) y Para qué

Antes que nada, ¿qué es una hoja de estilos en cascada (CSS)? Un concepto, supongo, rápido y acertado sería: un documento de texto, con un formato determinado, que especifica el modo en que se mostrará cada uno de los elementos de una página web. De esto se podría desprender “desde el archivo CSS podríamos modificar el modo en que se ve toda nuestra página”; y de hecho, esto és asi.

Las sorpresas que nos llevamos al utilizar CSS

Seguramente si han trabajado con CSS, o al menos escucharon a alguien que trabajó con esto, saben que es algo complejo y complicado lograr que la página se vea igual en todos los navegadores. Algo que muchos no saben es el motivo de ésto, idea que intentaré explicar a continuación.

Cada navegador trae por defecto una hoja de estilos CSS. Como difieren entre una y otra -son diferentes- “saltan” los problemas. Si no usásemos ninguna hoja de estilos, y por ejemplo, hacemos un documento HTML sin formato, y abrimos este documento en varios navegadores; notaremos que se ven diferentes en cada uno. ¡Imagínense lo dificil que se pone la situación cuando hablamos de algo más complejo!

¿Cómo solucionar ésto?

Se han intentado varias cosas, pero una de las que mas me gusta -y que mejores funciona- es la de resetear los estilos que trae el navegador por defecto. De ese modo dejaríamos de partir de la base del navegador, es como que eliminamos la hoja que trae, y comenzamos “de cero” con nuestra hoja. Claro está, deberemos ser más detallistas en ésta última.

Para dejar de hablar tan abstractamente, veremos algunos ejemplos:

  • Estilo predeterminado: como se dijo, las hojas de estilo predeterminadas de los navegadores son distintas entre uno y otro. Para comprobarlo, invito a abrir ésta URL en diferentes navegadores; que no tiene hoja de estilos aplicada, solo la predeterminada del navegador.
  • Ahora, aplicando una hoja de estilo extra a la misma página, se produce el reseteo CSS, miren como se ve: link.
  • Por último, ya logrando que la página se vea igual en todos los navegadores, aplicamos una segunda hoja de estilos: link.

Como ya deducieron, la última página que les pasé tiene 3+ hojas de estilo en juego:

  1. La del navegador.
  2. La encargada de “eliminar” la anterior (la que hace el reset).
  3. Y por último, las que definen nuestros estilos; que pueden ser 1 o más.

Ahora adentrándonos a la puesta en práctica de esto, existen muchos reseteadores de CSS, pero en este apartado les dejaré los links de Tripoli, una buena solución para este tema. A continuación, las hojas de estilos que nos competen:

Vía: Carlos Leopoldo