Navigation Tab Menu Generator with CSS – Tabs Generator

Navegando por la web me encontre un sitio llamado Tabs Generator que te ayuda a crear de una manera muy sencilla y rapida pestañas para tu web, que bien puedes usar para algun menu o lo que quieras.

Les paso la Liga!!

http://www.tabsgenerator.com/

Granito de Arena de: Maumas

Reseña Alex:
Tabs Generator es una herramienta web que es muy util para los desarrolladores que no tienen tiempo para abrir su photoshop y hacerse con un bonito botonsito, ahorra tiempo es practico, y personabilisable, es decir podemos indicar ancho,alto,borde, fondo, etc… y el resultado final podemos descargarlo en PNG, nuestro boton, aun que no vendria mal que nos arrojara igual XHTML y CSS, pero en esta herrienta aun no lo trae. aun que no deja de ser una buena opcion no esta de mas probarla chao!…

PD: Muchas gracias Maumas

Cargar imágenes con CSS

Hoy en dia es muy comun visitar galerias en internet y nos muestra la tipica imagen de “Cargando” mientras nos muestra la imagen deseada… y se acostumbra el uso de JS… y Ajax para cargar contenidos e imagenes sin necesidad de volver a cargar todo nuestro sitio, pero bueno por que no lo hacemos con CSS? jeje… un truco sencillo y talvez… util para algunos asi que aqui va.

Solo necesitamos un GIF animado o cualquier imagen ligerita que querramos para que se mustre mientras carga nuestra imagen grande.

Codigo HTML para – Cargar imagenes con CSS

<img class="imagen" src="cargando_imagenes_css.jpg" alt="Mostrar &quot;cargando&quot;... en imagenes con CSS" />

Codigo Hoja de Estilos para – Cargar imagenes con CSS

body{text-align:center;background:#000;}
img.imagen{background:#FFF url(load.gif) no-repeat center center;}

Ver demo en linea

Perdon de parte de todos, andamos un pelin liados, y ese es el motivo por el poco movimiento en este blog… pero igual tratamos de dar post nuestros que aprendimos nosotros mismos… y no copiamos y pegamos como otros sitios…

Hola de nuevo!!!
Hoy les voy a mostrar un lightbox que esta muy xido, llamado Sexy LightBox!!!
lo puedes utilizar con jquery o con mootols

Les muestro como!

Lightbox Con Mootols!!

1
2
3

<script type="text/javascript" src="mootools-yui-compressed.js"></script>
<script type="text/javascript" src="sexylightbox.v2.2.mootools.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />

Lightbox Con jQuery!!

1
2
3
4
5

 
<script type="text/javascript" src=jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sexylightbox.v2.2.jquery.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />

Por ultimo, llamamos a nustra Funcion!!!

Funcion del Lightbox Para mootols!!!

1
2
3
4
5

<script type="text/javascript">
  window.addEvent('domready', function(){
    SexyLightbox = new SexyLightBox();
  });
</script>

Funcion del Lightbox Para jQuery

1
2
3
4
5

<script type="text/javascript">
  $(document).ready(function(){
    SexyLightbox.initialize();
  });
</script>

Ahora vamos a aplicarlo en nuestro html

Para usarlo en un link de imagen

1

<a href="imagen.jpg" title="some title" rel="sexylightbox">View image</a>

Para usarlo en una galeria de imagenes!!!!

1
2
3

<a href="senorms.jpg"     rel="sexylightbox[galeria]">Link 1</a>
<a href="imagen.jpg"      rel="sexylightbox[galeria]">Link 2</a>
<a href="cualquiera.jpg"  rel="sexylightbox[galeria]">Link 3</a>

Ahora aplicamos el fondo

Fondo CSS Para mootols!!

1
2
3
4
5
6

SexyLightbox = new SexyLightBox({
  OverlayStyles:{
    'background-color':'#fff',
     'opacity': 0.6
  }
});

Fondo CSS Para Jquery!!!

1
2
3
4
5
6

SexyLightbox.initialize({
  OverlayStyles:{
    'background-color':'#fff',
     'opacity': 0.6
  }
});

Podemos utilizar dos colores para nuestro Sexy LightBox (negro y blanco)

Para aplicarlo!!

Color de Fondo con mootols!!!

1

SexyLightbox = new SexyLightBox({color:'white'});

Color de Fondo con jQuery!!!

1

SexyLightbox.initialize({color:'white'});

Eso fue todo!!!

Les dejo el link de los demos con Mootols y jQuery

Y por ultimo los archivos de descarga!!!!

Hola amigos esta ves navegando me encontre con una nueva galeria en flash muy buena por cierto, me gusto los efectos que hace, y lo mas importante que es facil de implementarla,

La dichosa Galeria se llama TiltViewer (http://www.simpleviewer.net).

Has click aqui para ver el demo
Descarga Aquí o en la web de Autor

Tiltviewer Flash es una aplicación de visualización de imágenes en 3D de estilo. Puede acercar y alejar el zoom, y la tapa las imágenes para ver un texto descriptivo (título), entró en Picasa. La galería es completamente personalizable mediante la edición de los parámetros en el archivo index.html

Con esta galeria en 3d flash puedes controlar tanto con el mouse como con el teclado

Descarga un plantilla tambien para el Picasa

jQuery Cycle plugin proporciona un mecanismo para hacer transiciones animadas de imágenes. El plugin soporta pausas al pasar el ratón por encima de la imágen, paradas automáticas, retrollamadas (callbacks) antes y después, disparadores (triggers) y una gran cantidad de efectos para las trasiciones.

La última versión estable (2.34), publicada en esta misma semana, requiere, como mínimo, la versión 1.2.3 de jQuery.

Es un plugin muy ligero, tan solo ocupa 18 KB en su versión para entornos de producción.

Como casi todo en jQuery, es muy fácil de usar. Aquí pongo un breve ejemplo básico:

HTML

1
2
3
4
5

<div id="s1" class="pics">
    <img src="images/beach1.jpg" width="200" height="200" />
    <img src="images/beach2.jpg" width="200" height="200" />
    <img src="images/beach3.jpg" width="200" height="200" />
</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.pics {
    height:  232px;
    width:   232px;
    padding: 0;
    margin:  0;
} 
 
.pics img {
    padding: 15px;
    border:  1px solid #ccc;
    background-color: #eee;
    width:  200px;
    height: 200px;
    top:  0;
    left: 0
}

JavaScript:

1

$('#s1').cycle('fade');

Puedes acceder a la web oficial para obtener más información, la descarga, ejemplos de códigos fuentes y ejemplos en funcionamiento desde el siguiente enlace:

jQuery Cycle Plugin.