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

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.

Bueno despues de tratar, y utilizar un millon de hacks… eh encontrado una solucion… ok no valida pero sirve… asi k toca joderse otra vez… por culpa de… adivinen…. sip… FUCK IE 6 acertaron… (joer… k cliche de post) pero bueno… eh aqui la luz…

Tenemos nuestro div “cabecera” que tiene el fondo, ancho, alto etc… y le agregamos… position:absolute; esto es para IE6, y el siguiente codigo en JS (No estoy seguro de que sea JS, no se programar mucho tansolo, diseño y css, pero si me equivoco corrijanme) hace el efecto de “estar fijo“, tomando en cuenta el movimiento de nuestro scroll del mouse para darle las cordenadas de arriba e izquierda para simular la posicion fija…

1
2
3

.cabecera{background:#333;height:50px;width:100%;color:#FFF;position:absolute;
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px'); line-height:3em;}

Y ahora hacemos uso de > para que solo nuestros bonitos navegadores interpreten el siguiente codigo… y es todo

1

body > div.cabecera {position:fixed;top:0px;left:0px;}

y nuestro html algo asi

1
2
3

<div class="cabecera">
Posicion fija: &lt;/Alex Aguiar&gt;
</div>

pero yo le agregue un div mas dandole mucha altura para hacer la prueba…

1
2

<div style="width:800px;height:1000px;margin:auto;">
</div>

Ver demo online

Hola!!!

Este tutorial explica cómo crear Hermoso Slide con jQuery,

Paso 1: página HTML:
Descargar los archivos jquery.js, scripts.js,y llamarlos en el HTML dentro de la etiqueta <head>

<script type="text / javascript">
var _siteRoot='index.html',_root='index.html'; //index.html archivo donde incluiremos nuestro slide
</script>
<script src="js/jquery.js" type="'text/javascript'"></script>
<script src="js/scripts.js" type="'text/javascript'"></script>

Paso 2: página HTML:

<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href=""><img id="slide-img-1" src="images/nature-photo.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="images/nature-photo1.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="images/nature-photo2.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-4" src="images/nature-photo3.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-5" src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-6" src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-7" src="images/nature-photo6.png" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"><strong>post: </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
</div>
</div>

Paso 3: codigo CSS:

*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
height:100%;
color:#a4a4a4;
cursor:default;
font-size:11px;
line-height:16px;
text-align:center;
background-color:#000;
background-position:50% 0;
background-repeat:no-repeat;
font-family:Tahoma,sans-serif;
}
a:link,a:visited{
color:#fff;
text-decoration:none;
}
a img{
border:0;
}
div.wrap{
width:993px;
margin:0 auto;
text-align:left;
}
div#top div#nav{
float:left;
clear:both;
width:993px;
height:52px;
margin:22px 0 0;
background:url url(images/nav-bg.png) 0 0 no-repeat;
}
div#top div#nav ul{
float:left;
width:700px;
height:52px;
list-style-type:none;
}
div#nav ul li{
float:left;
height:52px;
}
div#nav ul li a{
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}
div#header{
margin:-1px 0 0;
}
div#video-header{
height:683px;
margin:-1px 0 0;
}
div#header div.wrap{
height:299px;
background:url(images/header-bg.png) 50% 0 no-repeat;
}
div#header div#slide-holder{
z-index:40;
width:993px;
height:299px;
position:absolute;
}
div#header div#slide-holder div#slide-runner{
top:9px;
left:9px;
width:973px;
height:278px;
overflow:hidden;
position:absolute;
}
div#header div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:973px;
height:46px;
display:none;
position:absolute;
background:url(images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(images/silde-nav.png);}
div#nav ul li a{background:url(images/nav.png) no-repeat;}

Por ultimo, guarden y prueben!!!!!!

Les paso el link de los archivos.

Link al DEMO

Bueno este es mi primer post!!! de varios y aqui… pero bueno intentaremos hacer un efecto medio grunge a nuestros titulos o donde querramos comenzemos…

Creando la imagen transparente en Gif…
Si tienes pereza da click aqui para bajar la imagen transparente.
Abrimos nuestro editor favorito (Aqui siempre sera Fireworks jeje). y crearemos un Gif transparente (PNG si gustas ya que el IE6 da problemas).

1. Dejamos el lienzo sin color y dibujamos un rectangulo mmm… nose de 400px X 130px (por ejemplo)  y abajo en la “barra de propiedades” junto al bote de pintura donde pone “Solido” desplegamos la lista y nos ponemos donde dice “Patrón” y seleccionamos “Pintura azul”.

2. Luego mas abajo en la misma “barra de propiedades” donde dice “Textura” seleccionamos “Metal” a un 35%.

3. Ahora aplicamos un filtro “Brillo/Contraste” y le damos a “Brillo” un “30″ y a “Contraste” un “100″, ahora allanamos la capa (Ctrl+Shift+Alt+Z o click derecho “allanar seleccion”).

4.  Que pereza no? tranki vale la pena… ahora seleccionamos la “herramienta varita magica” y le damos una “tolerancia” de 25 seleccionamos cualquier parte blanca y luego borramos…

5. Luego aplicamos el filtro “Matiz/Saturación” y en “Iluminacion” lo dejamos hasta el fondo en “-100″ aceptamos y ya tenemos listo nuestra “Textura” medio “Grunge” ahora presinamos “Ctrl+Shift+X” para abrir la “Presentación Preliminar”, seleccionamos el formato de la imagen en “Gif”, “transparencia alfa” y “Mate” color negro o sin color da igual, y guardamos con el nombre de “grunge.gif” o como querramos.
(Nota: importante debemos elegir el mismo color a nuestra imagen que nuestro fondo donde aplicaremos el efecto… es este caso el fondo es negro y la imagen la hicimos negra para usar un texto que haga contraste “Blanco” por ejemplo)
INFO: Perdon por tanto lio en lo de la imagen pero aki es FIREWORKS y si queremos algo lo hacemos…  sin Brushesitos… ok?… da igual que editor uses pero aqui usaremos en lo personal. es mas tardio pero se siente bien hacer las cosas por uno mismo no? bueno…

Ahora si al lio… daremos estilo CSS a la etiqueta  “H1“.
Le damos una posicion relativa al <h1> para que nuestro <span> que es el que tiene la imagen este absoluto y de el efecto deseado.

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

body{background:#000;}
h1 {
position:relative;
color:#FFF;
font-family: "Times New Roman";
}
 
h1 span{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:url(grunge.gif);
}

y ahora el HTML

1

<h1>ZoneArtCSS - Texto Grunge By Alex Aguiar</h1>

Ver el ejemplo en linea.