#20 – 6 Junio 2007 Envía tu sitio construído en HTML+CSS

CSS significa Hojas de Estilo en Cascada. Con cascada, nos referimos que el browser lee esta hoja de estilos en orden descendente (haciendo analogía, una cascada cae de arriba hacia abajo). Así, en el caso de tener dos estilos similares definidos, el que venga en último lugar, o más abajo (orden descendente) tendrá más relevancia. O sea: h1 { font-size: 22px; }<br / h1 { font-size: 48px; } Ver ejemplo{.verejemplo}

Con este artículo les mostraré una manera de cómo CSS realmente potencia la presentación de un sitio, aportando más hacia la accesibilidad y usabilidad que a los muchos argumentos que hemos entregado hasta ahora. CSS2 nos permite aplicar estilos a elementos basándose en los atributos definidos en las etiquetas HTML, incluso a los valores contenidos en esos atributos. Primero que nada, veamos cómo se declara estos selectores avanzados:

Uno de los pocos detalles que le he visto a Firefox, responde a un tema con los links. En realidad, aparece siempre que el foco está sobre un elemento (formularios, enlaces) para llamar la atención y destacarlo por sobre otros. Se dibuja una línea punteada alrededor de nuestro elemento, y lo he notado muy claramente en Firefox, ya que Safari (browser que uso por defecto) no lo despliega si no lo explicito. Otro dato sobre este contorno, o outline: a pesar de que despliega un borde alrededor, no responde al modelo de caja, o sea, no ocupa espacio interior o exterior. O sea, que no debemos de considerarlo al diagramar con cajas, ya que no modifica nuestros anchos o altos. Pues con todo esto, a lo que voy es que lo podemos controlar a través de CSS, mediante la propiedad outline. Se declara tal como un borde:

Sigo jugando con este gran framework que ha demostrado ser mootools. En esta ocasión, y fusionando lo que se vió recientemente para Absolutamente sí, una vez más reciclaré ese layout para integrarle un efecto de moo, el que me permite crear ventanas arrastrables fácilmente (en el fondo, esa es la idea). Lo único diferente del HTML anterior, será sacar esa imagen con que jugamos el position (no la necesito ahora), cambiar el id=“contenido” por una class=“container” y agregarle una class al para que a través de éste searrastre nuestra ventana.      Arrástrame desde aquí      Lorem ipsum dolor sit amet, consectetuer…      Curabitur at sem. Vestibulum vel diam. Proin quis sapien ut leo faucibus eleifend… Además, debemos agregar el llamado a mootools.js y un script que ejecuta el efecto de arrastrado, además de un fade que lo hace más atractivo:

Una propiedad muy importante de CSS es position. Con ella, podemos estructurar nuestro sitio web, aunque según mi perspectiva prefiero utilizar float y display para lograr lo mismo. Enfin, cosa de gustos. Algunas veces eso sí se me ha hecho necesario utilizar position para manejar la posición de un elemento por sobre otro, o respecto a mi ventana. La propiedad position ubica un elemento en varios estados: static, relative, absolute o fixed. Detallemos:

Una de las cosas más difíciles que me toca al armar un sitio, son los formularios. Hacer que queden alineados correctamente, y en todos los browsers, es algo que a ratos me complica. Al terminarlos, está un pequeño botón que gatilla el envío del mismo. Este simple botón también suele ser un dolor de cabeza, ya que darle un estilo al no es correctamente interpretado por todos los browsers. Me topé con este problema hace un tiempo, y encontré la siguiente solución. Por supuesto, la comparto por si más de alguien tiene el mismo inconveniente.

Pido disculpas por un título tan simple esta vez. No se me ocurrió nada mejor. Enfin, lo que vale es lo que sigue. Siguiendo con el desarrollo del nuevo Be Studios, creé un método donde al posar el mouse sobre una imagen, se desplegara un texto alternativo (no, no es alt) y que fuera auxiliar a la imagen. Esto lo había visto antes, sólo que no recuerdo ningún link en este momento. Entonces, recreé la situación, y la explico a continuación. Antes sí, vean el ejemplo para que sepan de qué hablo. Primero el código HTML. En este caso, es sólo una imagen simple y silvestre. Ella está contenida dentro de un , el cual me entrega más control sobre el manejo de profundidades a través de z-index. Mi texto alternativo se posa sobre un luego después del , el cual a través del CSS se verá dentro, y con un fondo y con transparencia.

Existen 2 maneras para centrar elementos HTML, ambas muy conocidas y difundidas. Con CSS, centrar un elemento depende de sí mismo: Elementos lineales Estos elementos son los que no son en formato bloque, como e imágenes . Para centrarlos, se utiliza la propiedad text-align dentro del contenedor que lo alberga:

En estos días he estado diseñando y contruyendo el nuevo sitio web para mi proyecto-empresa Be Studios. Es la tercera versión ya, y esta vez no utilizaré ni una pizca de Flash; me aburrió. Así que está siendo construído enteramente sobre XHTML (trataré de que sea estricto y que valide en todo) y he jugado bastante con diferentes efectos javascript. Durante su construcción, me he topado con varios inconvenientes, los que a través de unas técnicas interesantes he podido sobrepasar.