Darle estilo 2.0 a tu blog con CSS

Una parte condición primordial que debe cumplir un sitio para ser considerado 2.0 es su diseño. Además de presentarse agradable para el visitante se han generado algunas tendencias que se han expandido rápidamente entre todos los sitios. A continuación nombramos las más importantes y como llevarlas a cabo modificando nuestro CSS.

Transparencias

Para lograr que un div tenga un grado de transparencia, es decir, que pueda verse un poco lo que está de fondo, debemos aplicarle la siguiente propiedad:

filter: alpha(opacity=50);
opacity: .5 ;

Así se muestra una transparencia del 50%.

Podemos aplicar esto también a imágenes o formularios. Podríamos aplicarsela a una imágen en miniatura (thumbnail) con enlace , y cuando el usuario se posicione para sobre ella para ampliarla, que la misme tome tona su tonalidad. Eso lo logramos así:

img a{
filter: alpha(opacity=50);
opacity: .5 ;
}

img a:hover{
filter: alpha(opacity=100);
opacity: 1 ;
}

Colores de campos de formulario

Para cambiar el color de fondo del campo de formulario (cuadro o área de texto) en el que el usuario se encuentra realizamos lo siguiente:

Para cuadro de texto:

input:focus{
background: #fffeec;
}
Para área de texto:

textarea:focus{
background: #fffeec;
}

No sería mala idea aplicarle un borde más delicado con un color más suave, por ejemplo border: 1px solid #ccc;. Un poco de padding y una tipografía clara (Verdana por ejemplo) le dará un aspecto más agradable.

Barras de navegación horizontales

Para crear una barra de navegación horizontal, ideal para situarla debajo del header del sitio debemos crear una lista no numerada la página y luego darle las propiedades en el archivo CSS. Creamos lo siguiente:

<div >
<ul>
<li>Enlace 1
<li>Enlace 2
<li>Enlace 3
</ul>
</div>

En la hoja de estilos le damos las siguiente propiedad:

.navbar ul li{
dislpay: inline;
list-style-type: none;
}

Con esto logramos que los elementos de la lista se muestren uno al lado del otro y que no tengan el boton al inicio. También podemos darle algo de padding horizontal para separalos.

Sombra a un bloque

Para aplicarle sombra a un div debemos crear dos, uno que sirva como primer plano y otro que será la sombra. Realizamos lo siguiente:

Luego le aplicamos las propiedades. Correremos el div de fondo hacia abajo y hacia la derecha para que aparezca como sombra.

.sombra{
background: #ccc;
padding: 1.5em;
margin: 3em 0 3em 5em;
}

.frente {
border: 1px solid #333;
background: #fff;
margin: -3em 0 0 -3em
}

Listo. Obviamente podemos cambiarle los colores a las sombras y al div de frente.