CSS3, box-shadow vs filter: drop-shadow

Ambas son propiedades de Css. Y pese a que la sintaxis es la misma, hay grandes diferencias en el resultado obtenido.

En un anterior articulo ya habíamos destacado las propiedades de box-shadow

Que no vaya a confundir el parecido en la sintaxis de ambas propiedades.  La gran ventaja del filtro drop-shadow es que recorre el contorno y la transparencia que tiene un elemento, una imagen con transparencia PNG, por ejemplo.

.drop-shadow {
-webkit-filter: drop-shadow(rgba(0,0,0,.5) 0px 0px 10px);
-moz-filter: drop-shadow(rgba(0,0,0,.5) 0px 0px 10px);
-ms-filter: drop-shadow(rgba(0,0,0,.5) 0px 0px 10px);
-o-filter: drop-shadow(rgba(0,0,0,.5) 0px 0px 10px);
filter: drop-shadow(rgba(0,0,0,.5) 0px 0px 10px);
}
.box-shadow {
box-shadow: rgba(0,0,0,.5) 0px 0px 10px 5px
}

Entre las diferencias encontramos:

  • En sintaxis, Drop-shadow no admite el valor “inside”
  • Drop-shadow supone una carga mayor para el navegador
  • El resultado del efecto aunque similar difiere notablemente con box-shadow la sombra se aplica a la caja del elemento. Sin embargo el filtro Css drop-shadow lo hace sobre el elemento generado y visible
  • El soporte de los navegadores: prácticamente total para box-shadow y según caniuse para drop-shadow sólo algunas versiones de webkit lo soportan (y con prefijo).

Sí bien, es una propiedad experimental, y sí, sólo es compatible con los navegadores WebKit por ahora. Pero de acuerdo con caniuse.com ya hay 32,51% de los usuarios de Internet que lo podrían interpretar. En general, es un tipo de decoración de mejora considerablemente la estética de la pagina. O incluso se la puede utilizar como un box-shadow normal en navegadores que no soportan este filtros todavía.

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s