CSS Archive at Borchani.COM

febrero 19, 2009

Personalizando listas con CSS

CSS:

.mac {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/macosx.gif) bottom left no-repeat;
List-style:none;
}

.clickideas {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/cli.gif) bottom left no-repeat;
List-style:none;
}
.pownce {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/pow.gif) bottom left no-repeat;
List-style:none;
}
.flickr {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/flickr.gif) bottom left no-repeat;
List-style:none;
}
.wordpress {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/wordpress.gif) bottom left no-repeat;
List-style:none;
}
.blog {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/blog.gif) bottom left no-repeat;
List-style:none;
}
.mail {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/mail.gif) bottom left no-repeat;
List-style:none;
}
.tarjeta {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/tarjeta.gif) bottom left no-repeat;
List-style:none;
}
.info {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
background:url(images/info.gif) bottom left no-repeat;
List-style:none;
}

Estructura:

HTML:

<ul>

<li class=”mac”>Usando <a href=”http://www.apple.com”>Macintosh</a></li>
<li class=”wordpress”>Powered by <a href=”http://www.wordpress.org”>WordPress</a></li>
<li class=”clickideas”>Design by <a href=”http://www.clickideas.net”>Clickideas</a></li>
<li class=”pownce”>My <a href=”http://www.pownce.com/nikko”>Pownce</a></li>
<li class=”flickr”>My Photos <a href=”http://www.flickr.com/photos/14412260@N08/”>Flickr</a></li>
<li class=”blog”>My <a href=”http://www.borchani.com/”>blog</a></li>
<li class=”mail”>My <a href=”http://www.borchani.com/index.php/contacto/”>E-mail</a></li>
<li class=”tarjeta”>My <a href=”http://www.borchani.com/index.php/acerca-de/”>vcard</a></li>
<li class=”info”>More <a href=”http://www.borchani.com/index.php/acerca-de/”>Info</a></li>

</ul>

Publicado en CSS,Desarrollo Web,Diseño,Maquetación | Responder

febrero 19, 2009

Simulando Tags con CSS

CSS-Tagcloud Una simple técnica para simular mediante CSS, los tradicionales estilos que solemos ver con nuestros Tags. Algo que será útil, para resaltar ciertos enlaces o categorías por nuestra cuenta, o para aquellos que no necesariamente se encuentren utilizando WordPress y desean dar algún estilo similar en sus web.

Idea Original web-spirit

Estilo 1:

CSS:

#tagcloud{ background: #303030; font-family:Tahoma,Verdana,sans-serif; padding:10px 5px 10px 5px;}

.tag1{ font-size:1em; color:#555555; line-height:1em; }
.tag2{ font-size:1.2em; color:#606060; line-height:1em; }
.tag3{ font-size:1.4em; color:#808080; line-height:1em; }

#tagcloud a{ text-decoration:none; }
#tagcloud a:hover{ text-decoration:underline; }

Estructura:

HTML:

<div id=”tagcloud”>
<a href=”#” class=”tag1″>Almacenamiento</a>
<a href=”#” class=”tag3″>Capturas Web</a>
<a href=”#” class=”tag2″>Color</a>
<a href=”#” class=”tag1″>CSS</a>
<a href=”#” class=”tag2″>diseno</a>
<a href=”#” class=”tag3″>diseno Web</a>
…..etc etc etc
</div>

Estilo 2:

CSS:

#tagcloud2{ background:#000000; font-family:arial,Verdana,sans-serif; width:200px; text-align:center; }

#tagcloud2 .tag1{ font-size:0.6em; color:#505050; }
#tagcloud2 .tag2{ font-size:0.9em; color:#808080; }
#tagcloud2 .tag3{ font-size:1.5em; color:#E0E0E0; }

#tagcloud2 a{ text-decoration:none; }
#tagcloud2 a:hover{ text-decoration:none; background-color:#ffffff; color:#000000; }

Estructura:

HTML:

<div id=”tagcloud2″>
<a href=”#” class=”tag1″>Almacenamiento</a>
<a href=”#” class=”tag3″>Capturas Web</a>
<a href=”#” class=”tag2″>Color</a>
<a href=”#” class=”tag1″>CSS</a>
<a href=”#” class=”tag2″>diseno</a>
<a href=”#” class=”tag3″>diseno Web</a>
…..etc etc etc
</div>

Estilo 3:

CSS:

#tagcloud3{ width:180px; font-family:arial,Verdana,sans-serif; padding:10px; background:#303030; }

#tagcloud3 .tag1{ font-size:0.6em; background-color:#705662; color:#fff; }
#tagcloud3 .tag2{ font-size:0.9em; background-color:#AB5471; color:#fff; }
#tagcloud3 .tag3{ font-size:1.2em; background-color:#f20161; color:#fff; }

#tagcloud3 a{ text-decoration:none; margin:2px; padding:2px 2px 2px 5px; display:block; }
#tagcloud3 a:hover{ text-decoration:none; background-color:#fff; color:#000; }

Estructura:

HTML:

<div id=”tagcloud3″>
<a href=”#” class=”tag1″>Almacenamiento</a>
<a href=”#” class=”tag3″>Capturas Web</a>
<a href=”#” class=”tag2″>Color</a>
<a href=”#” class=”tag1″>CSS</a>
<a href=”#” class=”tag2″>diseno</a>
<a href=”#” class=”tag3″>diseno Web</a>
…..etc etc etc
</div>

Publicado en CSS,Desarrollo Web,Diseño,Maquetación | Comments off

febrero 19, 2009

CSS – Galería Decorativa

CSS Decorative Gallery, servirá básicamente para inspirar o enseñar como decorar completamente nuestras galerías de imágenes o darles un estilo completamente diferentes, se basa en el uso de algunas etiquetas y la superposición de algunas de las imágenes.

Ver Demos – Mas info y descargas CSS Decorative Gallery

Conceptos Basicos:

CSS:

/* ———- gallery styles start here ———————– */
.photo {
margin: 30px;
position: relative;
width: 180px;
height: 130px;
float: left;
}
.photo img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.photo span {
width: 20px;
height: 18px;
display: block;
position: absolute;
top: 12px;
left: 12px;
background: url(images/digg-style.gif) no-repeat;
}

Estructura:

HTML:

Publicado en CSS,Desarrollo Web,Diseño,Galerías,Maquetación | Responder

Borchani.COM – Blog

Personalizando listas con CSS

Simulando Tags con CSS

CSS – Galería Decorativa

Categorías

Comentarios Recientes

Temas Recientes

RSS Feeds

Suscripciones

Novedades