Tag Archives: CSS & CSS3

Sombras CSS en múltiples navegadores

Un problema muy simple con una solución complicada, mayormente porque IE ignora la propiedad box-shadow de CSS3. En vez de eso progid:DXImageTransform.Microsoft.Shadow está logrando el truco y un equivalente puede ser hallado.

box-shadow: 4px 4px 8px #000;

para la sombra blanca es similar a

progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=90,strength=8)

porque box-shadow tiene los parámetros;

  • horizontal-offset
  • vertical-offset
  • blur-radius
  • color

y progid:DXImageTransform.Microsoft.Shadow:

  • color
  • direction (90 de la parte inferior derecha, también puede ser 0,45,135,225,270 y 315)
  • strength (la distancia, en píxeles en que se extiende el efecto del filtro, parecido a la combinación de 4px 4px en el box-shadow)

Lo que no tiene es un radio de desenfoque, aunque progid:DXImageTransform.Microsoft.Blur existe, desenfocará el contenido de la casilla también haciendo el texto ilegible.

Las esquinas

El resultado es bastante similar, con algunas diferencias en cómo IE muestra las esquinas. Tal como puede ver en la esquina superior derecha y la inferior derecha son un desastre (la inferior izquierda no se ve muy bien tampoco), pero demos gracias por que existen.

crossbrowser dropshadows in mozilla and internet explorer

Pueden ver el demo si quieren usar otros navegadores.

El código CSS

El código CSS completo para todos los navegadores es:

.black-shadow{ -moz-box-shadow: 4px 4px 8px #000;-webkit-box-shadow: 4px 4px 8px #000;box-shadow: 4px 4px 8px #000;
filter:
        progid:DXImageTransform.Microsoft.Shadow
(color=#000000,direction=90,strength=8)
        progid:DXImageTransform.Microsoft.Shadow
(color=#000000,direction=180,strength=8)}

Una tercera manera de escribir y validar formularios – HTML5

Despues de escribir un formulario accesible en XHTML y validarlo con scripts PHP desde el lado del servidor & luego con scripts desde el cliente en Mootools, escribo hoy acerca de una tercera manera de aproximarse al tema – usando el próximo en venir HTML5 (habiendo dicho eso, en realidad espero ser capaz de usarlo muuuucho antes de 2011).

La belleza consiste en tener toda la validación mencionada con anterioridad dentro del código HTML: tendremos

  • input type=”email” para la dirección de correo electrónico
  • type=”url” para urls
  • type=”date” y “datetime” para campos de fecha (usualmente hechos con JS calendars hasta ahora) o “month”, “week”, “time”
  • type=”number”  para números
  • deslizadores de acceso, con type=”range”
  • datalists
  • la habilidad de añadir condiciones de validación extra, luego de escribir la marca como: required, read-only,disabled, autofocus, un valor mínimo, un valor máximo aceptado / tamaño

El código para nuestro formulario de contacto:

<form action="index.php" method="post" name="contactform"
id="contact">
 
<label for="name">Name <span>(required)</span></label>
<input  tabindex="1" type="text" name="name" id="name" required />
 
<label for="mail">Email <span>(required)</span></label>
<input  tabindex="2" type="email" name="mail" id="mail" required />
 
<label for="phone">Telephone</label>
<input tabindex="3" type="text" name="phone" id="phone" />
 
<label for="message">Message</label>
<textarea tabindex="4" cols="30" rows="10" name="message"
id="message"></textarea>
 
<button tabindex="5" type="submit" name="submit" id="send">
Submit</button>
 
</form>

El resultado será una manera mucho mas fácil de escribir y validar formularios de una manera accesible, sin añadir código cargado adicional con PHP/JS script. Todo lo que tienes que hacer es colocar “required” a todos los campos obligatorios y usar el anteriormente mencionado valor mínimo y máximo, etc para controlar la entrada de datos del usuario.

La lista completa de los tipos y tablas útiles con los métodos que apliquen a cada estado pueden ser localizados en el sitio W3C

El problema ahora es la incapacidad de los navegadores de trabajar con muchas características HTML5. Y el futuro no luce prometedor. Hasta ahora el único navegador que soporta los nuevos formularios es Opera 9.5+. Internet Explorer 8 e inferiores no son compatibles y probablemente IE9 no lo será tampoco (estamos hablando del 2010). Chrome 2+, Safari 4+ soportarán parcialmente algunas características mientras que Mozilla no lo hará ni en su versión 4.0 (programada para ser lanzada en 2010).

Ahora, el mismo formulario de contacto que usamos para jugar con él, pero escrito en HTML5, se ve de la misma manera pero se comportará mejor (el código también es mas ligero). Nos ahorra bastante tiempo y dolores de cabeza y es mucho mas amigable al usuario.

Juega con el ejemplo – en Opera 9.5+- y deja un comentario si consideras que el tema es suficientemente interesante ara volver con mas ejemplos de código.

Si te interesa aprender más sobre HTML5 y las novedades sobre formularios TopicosWeb tiene 2 artículos muy útiles:
Introducción a HTML5
Placeholder para los elementos de un formulario con HTML5