ZoneArtCSS | Desarrollo Web, Diseño de páginas Web, Aplicaciones Móviles, Notas de Tecnología » diseño

Generador de clases CSS

Liz Palacios — Wed, 09 Sep 2009 15:58:28 +0000

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

Estilo CSS para tus tablas

Liz Palacios — Sat, 22 Aug 2009 18:40:53 +0000

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

Menu Tabs Generator no CSS by Maumas

Liz Palacios — Thu, 20 Aug 2009 04:21:52 +0000

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

Plantillas Flash & CSS Gratis

Liz Palacios — Thu, 06 Aug 2009 16:03:15 +0000

Templates y Plantillas Gratis – CSS – Flash – FREE

Hola!!!

Navegando por Ahi me tope con una pagina de Templates Gratis, tanto en Flash como de CSS, esta bastante decente, hay uno que otro que si vale la pena, sobre todo en las de Flash, que tambien puede encontrar galerias para utilizar en tu Sitio Web.

Les dejo los Links!!

Templates Flash
Templates CSS

Beautiful Slide con jQuery

Liz Palacios — Thu, 02 Jul 2009 19:18:00 +0000

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

<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

Foros CSS, Diseño y mas en ZoneArtCSS

miguelortega — Tue, 30 Jun 2009 02:47:41 +0000