En Manos de Nadie » CSS

CSS esquinas redondeadas

Diego — Fri, 23 Jul 2010 16:34:52 +0000

Después de un tiempito sin postear, les traigo algo muy útil (para el bolsillo del diseñador y la cartera de la diseñadora), se trata de un sitio que nos genera código CSS para darle esquinas redondeadas a DIVs y formularios.

http://a.deveria.com/roundgen/

Para los que quieren una solución más rápida, simplemente agreguen estos estilos al elemento a redondear:

background-color: #AAF;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(data:image/svg+xml;charset=utf-8;
base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My
5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9IiNGRkY
iIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48c
mVjdCBmaWxsPSIjQUFGIiByeD0iMTAiIHdpZHRoPSI
xMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4=);

Templates CSS

Diego — Mon, 21 Sep 2009 01:34:18 +0000

Set de templates CSS predefinidos. Los posteo porque me parecen muy útiles en estos dos casos, si estas aprendiendo CSS podés ver como están hechos, que estilos se utilizan para la maquetación, etc. Si estas comenzando un proyecto web, te pueden servir para ahorrarte tiempo o como disparador para darle un nuevo formato al diseño del sitio.

Podés verlos y bajarlos acá.

Menús usando html + css

Diego — Mon, 03 Aug 2009 02:49:14 +0000

Encontré este sitio muy bueno que enseña como hacer menús html+css y además ofrece el código de ejemplo de cientos de menús.

Todo usando listas html y estilos css.

Un ejemplo de como sería un menú de este tipo:

Primero la estructura del menú

esto sería el archivo HTML

Item one

Item two

Item three

Item four

Item five

y luego los estilos para darle la forma que queremos:

esto iría en la hoja de estilos CSS

#navcontainer
{
width: 12em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #90bade;
color: #333;
}

#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#navcontainer li
{
border-bottom: 1px solid #90bade;
margin: 0;
}

#navcontainer li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #navcontainer li a { width: auto; }

#navcontainer li a:hover
{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

El resultado sería así:

CSS: Maquetado y pie

Diego — Tue, 09 Jun 2009 18:05:45 +0000

A pedido de un colega va este requete-mini-tuto de como hacer que el DIV de pie de página quede en donde debe (al fondo del contenedor).

Supongamos una estructura semántica como la siguiente:

Contenido de la página

Copyleft 2009

Bueno, los estilos para cada parte quedarían así:

html, body {
margin: 0;
padding: 0;
height: 100%;
overflow:hidden;
}
#contenedor {
width: 100%;
height: 100%;
background: #DDD;
position: relative;
}
#encabezado {
width: 100%;
background: #CCC;
position: absolute;
top:0;
height:130px;
}
#contenido {
width: 100%;
overflow: auto;
position: absolute;
top: 130px;
bottom: 40px;
}
#pie {
width: 100%;
background: #CCC;
position: absolute;
bottom: 0;
height: 40px;
}

CSS: centrar un DIV

Diego — Wed, 27 May 2009 19:01:21 +0000

Con esta técnica podremos centrar un DIV de tamaño fijo tanto vertical como horizontalmente, y que se vea bien como mínimo en Firefox e IE7.

#div_a_centrar {

position: absolute;

left: 50%;

top: 50%;

height: 200px;

margin-top: -100px; // la mitad del height

width: 300px;

margin-left: -150px; // la mitad del width

}

Para entender mejor como funciona esto, podemos ver en el siguiente
cuadro explicativo: