Morton 6 de marzo de 2013 a las 07.14
   Imprimir artículo
elWebmaster.com

CSS: C贸mo ocultar spoilers en tu sitio en forma impactante


css3wide1A nadie le gustan los spoilers. Ya sea una imagen de una pel铆cula a estrenarse o el resultado del partido que tienes grabado y que a煤n no has visto, hay veces que simplemente no quieres saber. En este art铆culo te ense帽aremos a dar un efecto blur al contenido que quieres marcar como spoiler, tan s贸lo usando CSS.

Ver demostraci贸n >>

Los filtros CSS nos proveen de una manera muy simple de hacerlo:

  1. .spoiler {
  2.     -webkit-filter: blur(20px);
  3.     -webkit-transition-property: -webkit-filter;
  4.     -webkit-transition-duration: .4s;
  5. }
  6. .spoiler:hover, .spoiler:focus {
  7.     -webkit-filter: blur(0px);
  8. }

Notar谩s tambi茅n que al posicionarte con el cursor sobre el contenido oculto, el efecto de blur comenzar谩 a animarse hasta que desaparezca por completo. Lamentablemente los filtros CSS son s贸lo soportados por WebKit en la actualidad, pero no hay dudas de que pronto los veremos funcionando en todos los navegadores. Ten en cuenta la presencia de :focus… s铆 indicas tabIndex=0 en todos los elementos .spoiler 隆Puedes hacerlos compatibles con dispositivos t谩ctiles!

Ver demostraci贸n >>

Fuente original del art铆culo: David Walsh Blog
Traducci贸n realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. GD dice:

    El tabIndex=0 de donde sale?

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder