Un efecto llamativo que se suele hacer con Flash es realizar una transición entre dos imágenes cuando se posiciona sobre ella.
El efecto es sencillo, disponemos de una cabecera (H1) en el que hay un elemento con posicionamiento absoluto y que contiene la imagen final, y un enlace (el que se suele usar para ir al home) que tiene la imagen original mediante estilos.
El proceso es el siguiente: cuando se posiciona el ratón sobre el enlace se crea efecto fadeout y cuando se sale se crea el efecto fadein. Ambos efectos se hacen con tiempo de retardo para dar continuidad.
Todo el código en el post original. Creating a fading header
Vía / CSS Globe
vegUI es un gestor de ventanas realizado en Javascript, a parte de una colección de widgets, un sistema de interfaz de usuario, un framework para aplicaciones dinámicas y una librerÃa para operaciones con Ajax, vamos, de todo.
Admite los siguientes navegadores: Mozilla, Internet Explorer 6 y 7 y Opera. Entre las funcionalidades que he encontrado admite minimizar, maximizar, recuperar y cerrar ventanas, moverlas por el escritorio que se puede crear, control de z-index para las ventanas, transparencias.
La verdad es que me ha impresionado del todo, entre otras cosas porque me he peleado alguna vez con lo de crear ventanas mediante Javascript y siempre hay algo que me vuelve loco. vegUI
VÃa / dzone
Modernizr es una librería que permite detectar las nuevas características de HTML5, CSS3, Canvas, … que admite el navegador. Tan sólo habrá que acceder a propiedades para saber si admite o no una característica en particular:
if (Modernizr.geolocation) {
// Admite geolocalización
}
if (Modernizr.csstransitions) {
// Transacciones CSS
}
if (Modernizr.rgba) {
// RGBA
}
Esto puede dar mucho juego, pero tan solo funciona en Firefox 3.6+, por lo que no podemos depender de este script en nuestras aplicaciones. A partir de la versión 3.6, Firefox permite realizar drag&drop de ficheros en nuestra web y mediante Javascript poder obtener los ficheros o textos que se arrastren contra un elemento específico.
Su uso es muy sencillo:
dropzone.addEventListener("drop", function(event) {
event.preventDefault();
// Ready to do something with the dropped object
var allTheFiles = event.dataTransfer.files;
alert("You've just dropped " + allTheFiles.length + " files");
}, true);
Y dispone de una API tanto para el drag&drop como para los ficheros.
Recomiendo ver el código fuente de este ejemplo para tener una librería que te hace todo el trabajo.
No todo el mundo conoce las hojas de estilo, incluso gente que trabaja a diario con ellas, suele pasarles que solo saben cambiar lo que necesitan y poco más. Para aquellos que se encuentran en esas circustancias o simplemente son unos vagos, aquà tres recursos para ayudarnos a crear tablas, definir el formato del texto y seleccionar colores.
La primera de las utilidades nos permite darle estilos a una tabla, pudiendo jugar con los colores, grosores y demás de las tablas, filas y celdas.
La siguiente utilidad nos ayuda con el texto: la fuente, negrita, itálica, tamaño, separación de letras, alineamiento, …
In this tutorial, we’ll learn how to create a slick email signup form. This form will harness the full power of AJAX, meaning that we will submit data to the server, validate it, and receive a response – all without a single page refresh! Along the way, you should pick up some useful tips related to PHP and JavaScript, as well as general programming …