Webmaster Libre

Por defecto, los navegadores no nos permiten definir el estilo de los campos de subida de ficheros o inputs de tipo file (input type="file").

En general no suele suponer más que una molestia sin más pero, por la dificultad de hacerlo con CSS, solemos dejarlo así sin más.

Ahora que vivimos una nueva era de interfaces web en las que se da una importancia capital al diseño es como una espinita clavada en el corazón del diseñador que, seguro, tiene en mente una forma más bonita de representar el campo o más bien el botón.

Una vez más, jQuery al rescate con un plugin que nos permitirá cambiar el botón sin demasiados quebraderos de cabeza.

Para ello, simplemente tendremos que incluir en nuestros sitios la librería jQuery y el plugin jQuery File Style.

<script src="jquery.js" type="text/javascript"> </script>
<script src="jquery.filestyle.js" type="text/javascript"></script>

Y añadir un código tal que el siguiente, donde definiremos la imagen que hará las veces de botón así como el tamaño del input.

$("input[type=file]").filestyle({
     image: "choose-file.gif",
     imageheight : 22,
     imagewidth : 82,
     width : 250
});

Los inputs modificados con este plugin mantienen la clase del input originario por lo que podremos seguir dándole estilo adicional mediante CSS.

File Style Plugin: http://www.appelsiini.net/projects/filestyle

Vía Intenta

El menú desplegable es uno de esos recursos casi me atrevería a decir indispensables, sobre todo cuando queremos mostrar mucho contenido en poco espacio (lo mismo que sucede, por ejemplo, con los sistemas de pestañas).

La búsqueda de un menú desplegable accesible y compatible con todos los navegadores nos ha llevado a ir probando diversas soluciones, incluso a desarrollar cada uno la suya.

Pop! es una solución más que agregar a nuestra caja de herramientas, con ella podremos crear desplegables que degradarán perfectamente para usuarios sin javascript y en los que podremos colocar cualquier tipo de contenido ya sea texto, enlaces, videos, fotos…

Pop! requiere el uso de jQuery y crear nuestros menús es tan fácil como incluir el javascript y la hoja de estilo (que podremos adaptar a nuestras preferencias)

<link href="/pop/stylesheets/pop.css" media="all" rel="stylesheet" type="text/css"/>

<script language="javascript" src="/pop/javascripts/jquery.js" type="text/javascript"></script>
<script language="javascript" src="/pop/javascripts/jquery.pop.js" type="text/javascript"></script>

Inicializar Pop!

<script type='text/javascript'>
   $(document).ready(function(){
     $.pop();
   });
</script>

Y envolver el contenido que queramos convertir en desplegable con un div con la clase “pop” (o la que hayamos definido al inicializar el script).

Pop! está bajo licencia MIT.

Pop!: http://pop.seaofclouds.com/

Vía Web Resources Depot

Cuando hablamos de diseño web, sobre todo en la fase propiamente de diseño en programas de edición de gráficos, es relativamente frecuente observar un efecto conocido como “page curl” o pliegue de página.

Para entendernos todos, es el efecto que observamos cuando pasamos las páginas de un libro por ejemplo.

Si quieres agregar un toque curioso a tu sitio web y agregar una esquina que se doble para mostrar el contenido de debajo te vendrá bien este plugin libre para jQuery creado por Elliott Kember.

Para hacerlo funcionar sólo necesitarás usar jQuery y jQuery UI (preferiblemente la versión 1.5) con el módulo resizable. Luego con un par de líneas de código y creando un elemento con id “target, que contendrá lo que quieras que se vea tras la página, estarás listo.

The Sexy Curls jQuery plugin: http://www.elliottkember.com/sexy_curls.html

Vía Ajaxian