Generador de clases CSS

Hola, q onda!!

Navegando por ahi me encontre una pagina que pude ser util para aquellos que apenas tan aprendiendo a usar las hojas de estilo CSS.

En esta pagina tu escoges, tipo de letra, color de fondo, etc… Y te genera el codigo en CSS.

Espero que a alguien le sirva!!!

Chao!!

Les dejo el LINK

Dando estilos CSS a nuestras tablas

Hola!!!
Navegando por ahi me encontre una pagina muy chida, CSS Table Gallery ya que te genera estilos CSS para tus tablas. Hay varios que valen la pena.

Y es muy util ya que al momento de descargar te dan listo en codigo, tu solo lo aplicas en tu sitio!!!

Les paso la liga. CSS Table Gallery

1.-Manera Rapida: Para hacer Letras Estilo Grunge en Fireworks 8

Ya se tiene pesima calidad, si gustan bajenlo:
Duracion: 01:00 min
Peso: 4.3MB
Contraseña: www.zoneartcss.com
AVI/Rapidshare
http://rapidshare.com/files/262367879/grunge1_zacss.com.rar

2.-Otra Alternativa: Para hacer Letras Estilo Grunge en Fireworks 8

Ya se tiene pesima calidad, si gustan bajenlo:
Duracion: 03:34 min
Peso: 3.64MB
Contraseña: www.zoneartcss.com
AVI/Rapidshare
http://rapidshare.com/files/262369348/grunge2-zacss.com.rar

Estoy encontra a todos los video-tutoriales de internet por que todos son de “Photoshop” ok muy buenos, pero hay gente que esta con Fireworks, pero bueno aqui trataremos de hacer las cosas lo mas posible desde 0, sin recursos, tansolo aprovechando lo que este magnifico software nos brinda y que no se mal interprete “Los mejores del mundo usan Photoshop” y son dioses en diseño, y se les respeta que programa sea su preferido, asi que respeten que en esta seccion del blog “MIA”, aqui “I HATE PHOTOSHOP”… asi que sino tienes nada bueno que comentar mejor ni lo hagas, o hazlo igual no sera publicado, esta zona es solo para “FIREWORKS LOVERS“

Hola les mostrare como crear el efecto de paginacion en tu Web. La mayoria de las veces esto lo crean con flash, pero les voy a mostrar una manera mas rapida y sencilla de hacerlo.
Les muestro como:

1ro vamos a crear el contenedor de nuestra esquina paginada.

1
2
3
4
5
6

<div id="pageflip">
	<a href="#">
		<img src="page_flip.png" alt="" />
		<span class="msg_block">Subscribe via RSS</span>
	</a>
</div>

Ahora creamos nuestro style css, establecemos nuestra imagen de la esquina a un tamaño pequeño (50px por 50px) por defecto y establecemos el posicionamiento absoluto de nuestro span en la esquina superior derecha.

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

#pageflip {
	position: relative;
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	position: absolute;
	z-index: 50;
	right: 0; top: 0;
	background: url(subscribe.png) no-repeat right top; /* Imagen oculta a mostrar */
	text-indent: -9999px;
}

Y por ultimo nuestro codigo js, antes debemos llamar a nuestro archivo jQuery.

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

$("#pageflip").hover(function() { //On hover...
	$("#pageflip img , .msg_block").stop()
		.animate({ // Animacion de nuestro div (Width + height)
			width: '307px',
			height: '319px'
		}, 500);
	} , function() {
	$("#pageflip img").stop() //Al estar fuera volvemos a nuestro tamaño original 50x52
		.animate({
			width: '50px',
			height: '52px'
		}, 220);
	$(".msg_block").stop() //Al estar fuera volvemos a nuestro tamaño original 50x52
		.animate({
			width: '50px',
			height: '50px'
		}, 200);

Les dejo el link de la DEMO EL LINEA

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!!!!

Eh creado un Theme para el CMS recien liberado el Dedalus, disfrutenlo
Click para descargar este theme

Se me olvidaba jeje aki les dejo unas capturas
Captura del portal dedalus
Captura del foro dedalus