2011-05-29 14 views
6

Esta forma tiene un efecto impresionante cuando usted se centra en uno de sus campos:¿Cómo puedo codificar este asombroso efecto borde brillante con CSS y JavaScript?

http://labs.dragoninteractive.com/panel/demo/

Alguna pista sobre cómo puedo recrear esto? Estas son algunas de mis observaciones:

  • veo que tienen una imagen colorida un gigante aquí: http://labs.dragoninteractive.com/panel/demo/lib/img/form/map/rmap.jpg
  • Cuando se enfoca en la forma el color parece desvanecerse en (y se desvanece en la falta de definición)
  • no sé cómo se están recibiendo el borde suave (brillo) utilizando la imagen de origen que tienen
  • no sé cómo están desplazar la imagen, colorido través de la frontera infinitamente
  • el marcado parece bastante desordenado ; Idealmente me gustaría una solución más simple que lo que tienen
  • This one es un clon hecho todos con CSS3, pero no me gusta la forma en que el resplandor exterior no se mantiene uniforme se produce la acción de cambiar
+4

Efectos interesantes pero: '* Descargo de responsabilidad: Esto se entiende como una demostración técnica de CSS3, no como un tutorial de mejores prácticas. – Ibu

+0

@Ibu: ¿existe ya una mejor práctica para animar el borde de un formulario con arco iris? No se mostrará sin la compatibilidad adecuada del navegador, que es la degradación del navegador normal y estándar. ¿Qué significa exactamente "no mejor práctica" en esta situación? Más importante aún, ¿a quién le importa? No me refiero a que esto sea negativo, realmente estoy teniendo problemas para entender de dónde vienes. – Jordan

+0

comer muchos recursos de proceso no es la mejor práctica @Jordan, no ser negativo, pero de ahí viene de – Ibu

Respuesta

8

El color como la posición de rmap.jpg (la imagen colorida muy grande) está animada. Hay un .png con transparencias alfa que actúa como mate sobre rmap.jpg, creando una bonita transición de color suave. La animación se maneja usando jQuery.

Peter Schmalfeldt creó un demo que también es downloadable.

4

El borde suave que ve es en realidad una imagen transparente llamada content-gradient.png dentro de una etiqueta <img/>.

Por lo tanto, la gran imagen colorida viene debajo de este PNG y crea una ilusión de bordes suaves y brillantes.

Si tiene Google Chrome o Firefox con Firebug, puede "inspeccionar" el DOM para ver cómo funciona. Notarás que la posición de fondo de la imagen colorida se cambia en el tiempo de ejecución, lo que se puede hacer usando un bucle con jQuery u otra biblioteca de Javascript.

El recurso js.php?page=login es probablemente lo que está solucionando la lógica.

+4

PHP es del lado del servidor: no puede ejecutar un bucle en el cliente. Además, jQuery no es un lenguaje: es una biblioteca. –

+1

@passcode - gracias por corregir y mejorar mi respuesta ... – nav

Cuestiones relacionadas