Noticias Diseño – Tutorial Photoshop

Un sistema de pestañas sencillo de implementar en JQuery, incluye animaciones que alegran el resultado final.

Tutorial: Ver Contenido‘
Demo: Ver Contenido‘

Esta galería hace uso de JQuery para hacer un efecto muy resultón. Amplia la imagen y añade un subtítulo.

¿Quién necesita Flash?

Demo: Ver Contenido‘
Tutorial: Ver Contenido‘

Este tooltip se desliza de manera horizontal por los diferentes botones de un menú.

Tutorial: Ver Contenido‘

Demo: Ver Contenido‘

Un interesante menú en Jquery. Podéis extraer el código desde el mismo source de la página.

Ver demo: Ver Contenido‘

Esto se parece cada vez más a Flash, pero con CSS y Javascript. Se pueden hacer maravillas la verdad.

Botonera Jquery Ver Contenido‘

Por desgracia no sé donde andará el tutorial pero el código de la página os servirá seguro.

Un scroll del tipo arrastrar con JQuery.
Podéis ver una Demo Ver Contenido‘ y si os gusta descargar el adjunto.

Tip: En la demo tenéis el Slider abajo, sale con Fade y casi no se ve, podéis arrastrarlo o pulsar sobre cualquier parte de la barra para mover la capa de contenido.

- Archivo Adjunto: slider_jq.zip

Habré probado decenas de códigos para customizar el aspecto de un listbox pero la verdad que no me ha convencido ninguno particularmente.

Este parece tener mejor pinta.

· Demo Ver Contenido‘

- Archivo Adjunto: selectBox.zip

Un tutorial muy interesante donde se muestra cómo programar un mini-chat. Necesitarás crear una base de datos y conocimientos sobre PHP y Ajax.

Bueno, el tutorial lo explica todo al detalle!

· Demo Ver Contenido‘
· Tutorial Ver Contenido‘

Podéis descargarlo del archivo adjunto.

- Archivo Adjunto: shoutbox.zip

Aquí os dejo un buen listado de galerías gratuitas para vuestros portfolios o presentaciones de fotografía, diseño, etc.:

· FlashFlickr PhotoGallery Ver Contenido‘
· Flashmo 3d Grid Ver Contenido‘
· PhotoDiary 1.0 Ver Contenido‘
· Tony Photo Album Ver Contenido‘
· FlashMo Stack Photo Gallery Ver Contenido‘
· 3D Album Ver Contenido‘
· Slideroll Gallery AV Ver Contenido‘
· WS-Slideshow Ver Contenido‘
· Imagin Flash Photo Gallery Ver Contenido‘
· FlashMo Circle Gallery Ver Contenido‘
· Art Flash Gallery Ver Contenido‘
· Zen Flash Gallery Ver Contenido‘
· Flash Mo Grid Gallery Ver Contenido‘
· AutoViewer Ver Contenido‘
· Flash Gallery Ver Contenido‘
· PostcardViewer Ver Contenido‘
· FlashMo Photo Gallery Ver Contenido‘
· InventMedia FlashGallery Ver Contenido‘
· dfGallery 2.0 Ver Contenido‘
· Polaroid Gallery Ver Contenido‘
· Flash Image Gallery Ver Contenido‘
· Free Flash Gallery Ver Contenido‘
· Andrew Bergs Flash Ver Contenido‘
· flShow Carousel Ver Contenido‘
· Simple Viewer Ver Contenido‘
· Veppa Photo Album Ver Contenido‘
· XML Photo Album Ver Contenido‘

Una vez me dio problemas una Web donde necesitaba precisamente esto.

Si necesitáis poner totalmente centrada una capa en el navegador, aquí tenéis el código. Eso si, debe ser una capa de tamaño fijo…

div {
position: absolute;
top: 50%; /* Buscamos el centro horizontal (relativo) del navegador */
left: 50%; /* Buscamos el centro vertical (relativo) del navegador */
width: 600 px; /* Definimos el ancho del objeto a centrar */
height: 400px; /* Definimos el alto del objeto a centrar */
margin-top: -200px; /* Restamos la mitad de la altura del objeto con un margin-top */
margin-left: -300px; /* Restamos la mitad de la anchura del objeto con un margin-left */
}

¡Podéis ver el artículo completo en la Web Ateneupopular.com (Tenéis enlace en la columna derecha también) si necesitáis más detalles!

Tutorial completo Ver Contenido‘