Haciendo uso de CSS podemos mostrar de una manera practica y sencilla unos mensajes que sirven para manifestarle al usuario sobre alguna información o aviso.

Si necesitas alguno, esta es la entrada ideal, para ello vamos a ver los siguientes ejemplos:

Solo coloca el código CSS antes de ]]></b:skin>(Buscandolo en tu plantilla con Ctrl+F) y el HTML en la entrada o como elemento HTML/Javascript.

---

CSS:

/* Mensaje de información */
.informacion {
background: #BDE5F8 url(Url-de-tu-icono) center no-repeat;
background-position: 15px 50%;
color: #00529B;
font-family: Arial;
font-size: 30px;
text-align: center;
padding: 28px 20px 25px 45px;
border-top: 5px double #00529B;
border-bottom: 5px double #00529B;
}

HTML:

<div class="informacion">
Mensaje de información
</div>

---

CSS:

/* Mensaje de éxito */
.exito {
background: #DFF2BF url(Url-de-tu-icono) center no-repeat;
background-position: 15px 50%;
color: #4F8A10;
font-family: Arial;
font-size: 30px;
text-align: center;
padding: 28px 20px 25px 45px;
border-top: 5px double #4F8A10;
border-bottom: 5px double #4F8A10;
}

HTML:

<div class="exito">
Mensaje de éxito
</div>

---

CSS:

/* Mensaje de alerta */
.alerta {
background: #FEEFB3 url(Url-de-tu-icono) center no-repeat;
background-position: 15px 50%;
color: #9F6000;
font-family: Arial;
font-size: 30px;
text-align: center;
padding: 28px 20px 25px 45px;
border-top: 5px double #9F6000;
border-bottom: 5px double #9F6000;
}

HTML:

<div class="alerta">
Mensaje de alerta
</div>

---

CSS:

/* Mensaje de error */
.error {
background: #FFBABA url(Url-de-tu-icono) center no-repeat;
background-position: 15px 50%;
color: #D8000C;
font-family: Arial;
font-size: 30px;
text-align: center;
padding: 28px 20px 25px 45px;
border-top: 5px double #D8000C;
border-bottom: 5px double #D8000C;
}

HTML:

<div class="error">
Mensaje de error
</div>

---

CSS:

/* Mensaje de ayuda */
.ayuda {
background: #0080FF url(Url-de-tu-icono) center no-repeat;
background-position: 15px 50%;
color: #0080DD;
font-family: Arial;
font-size: 30px;
text-align: center;
padding: 28px 20px 25px 45px;
border-top: 5px double #0080DD;
border-bottom: 5px double #0080DD;
}

HTML:

<div class="ayuda">
Mensaje de ayuda
</div>

Te proporciono los iconos para que los alojes a tu propio servidor:

Espero y te sirvan en algo...saludos!!

Los efectos básicos realizados con CSS no nos dejan de sorprender, en este caso el efecto hover que en una imagen se genera al colocar el puntero del mouse sobre la misma.

2 ejemplos de muestra:


Los códigos son muy sencillos:

Colocas el CSS antes de ]]></b:skin>

.Imagenhover a {
display: block;
width: 100px; /* Ancho de la imagen hover */
height: 100px; /* Alto de la imagen hover */
}
.Imagenhover a:hover, .Imagenhover a:focus, .Imagenhover a:active {
background: transparent url(Url-de-imagen-2) no-repeat;
}
.Imagenhover a:hover img, .Imagenhover a:focus img, .Imagenhover a:active img {
background: transparent;
visibility: hidden;
}

Y el siguiente HTML lo colocas en una entrada

<div class="Imagenhover">
<a href="#">
<img src="Url-de-imagen-1" width="100" height="100" />
</a>
</div>

Ancho y alto de la imagen 1

Cuanto más hemos visto blogs que brindan bastante información y que requieren de dos o varias columnas de texto para mostrarlo dentro de una sola entrada.
Si, ahora en esta entrada veremos como crear de dos hasta cinco columnas de texto.

Puedes ver las demostraciones aquí

Para llevar a cabo los ejemplos sigue los siguientes pasos:

Para obtener cada ejemplo de dos, tres, cuatro o cinco columnas incluye el CSS justo antes de línea ]]></b:skin> y el HTML dentro de una entrada.

---

Dos columnas de texto

CSS:

#columna1 {
position: absolute;
left:1%;
width:48%;
top:50px;
background-color:#DDD;
 }
#columna2 {
position: absolute;
left:51%;
width:48%;
top:50px;
background-color:#DDD;
 }

HTML:

<div id="columna1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

---

Tres columnas de texto

CSS:

#columna1 {
position: absolute;
left:1%;
width:31%;
top:50px;
background-color:#DDD;
 }
#columna2 {
position: absolute;
left:34%;
width:31%;
top:50px;
background-color:#DDD;
 }
#columna3 {
position: absolute;
left:67%;
width:31%;
top:50px;
background-color:#DDD;
 }

HTML:

<div id="columna1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

---

Cuatro columnas de texto

CSS:

#columna1 {
position: absolute;
left:1%;
width:23%;
top:50px;
background-color:#DDD;
 }
#columna2 {
position: absolute;
left:26%;
width:23%;
top:50px;
background-color:#DDD;
 }
#columna3 {
position: absolute;
left:51%;
width:23%;
top:50px;
background-color:#DDD;
 }
#columna4 {
position: absolute;
left:76%;
width:23%;
top:50px;
background-color:#DDD;
 }

HTML:

<div id="columna1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

---

Cinco columnas de texto

CSS:

#columna1 {
position: absolute;
left:1%;
width:18%;
top:50px;
background-color:#DDD;
 }
#columna2 {
position: absolute;
left:21%;
width:18%;
top:50px;
background-color:#DDD;
 }
#columna3 {
position: absolute;
left:41%;
width:18%;
top:50px;
background-color:#DDD;
 }
#columna4 {
position: absolute;
left:61%;
width:18%;
top:50px;
background-color:#DDD;
 } 
#columna5 {
position: absolute;
left:81%;
width:18%;
top:50px;
background-color:#DDD;
 }

HTML:

<div id="columna1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<div id="columna5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

Para aumentar o reducir el ancho de cada una de las columnas varia las cifras
También podrás acercarlas o alejarlas de distancia
Además de cambiarle el color de fondo

#columna1 {
position: absolute;
left:1%;
width:48%;
top:50px;
background-color:#DDD;
 }
#columna2 {
position: absolute;
left:51%;
width:48%;
top:50px;
background-color:#DDD;
 }

Una forma de crear acordeones sencillos es por medio de código CSS.
Se trata de dos acordeones, uno de forma horizontal y uno vertical así que para colocarlos en tu blog lleva a cabo los siguientes pasos:

Ejemplo de un acordeón horizontal:

Incluye el CSS justo arriba de ]]></b:skin>

/* Acordeón en general */
#acordeonhorizontal {
 font: small/1.2 Arial, Helvetica, sans-serif;
 width: 500px;
 margin: 10px auto; }
#acordeonhorizontal div {
 float: left;
 width:25%;
 height: 298px;
 overflow: hidden; }
#acordeonhorizontal:hover div {
 width: 20px; }
#acordeonhorizontal:hover div:hover {
 width: 440px;
 overflow: auto; }

/* Colores de fondo */
#titulo1 {
 background-color: #EEE; }
#titulo2 {
 background-color: #DDD; }
#titulo3 {
 background-color: #CCC; }
#titulo4 {
 background-color: #BBB; }

/* Títulos */
h2 {
 font-size: 150%;
 margin: 10px 10px .2em 25px; }

/* Párrafos */
p {
 margin: 1em 25px; }

Ahora el HTML incluyelo en una entrada o como elemento HTML/Javascript

<div id='acordeonhorizontal'>
<div id='titulo1'>
<h2>Titulo 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id='titulo2'>
<h2>Titulo 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id='titulo3'>
<h2>Titulo 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id='titulo4'>
<h2>Titulo 4</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div style='float: none; clear: both; height: 0;'></div>
</div>

Ejemplo de un acordeón vertical:





De igual manera incluye el CSS justo arriba de ]]></b:skin>

/* Acordeón en general */
#acordeonvertical {
 font: small/1.2 Arial, Helvetica, sans-serif;
 width: 500px;
 height: 318px;
 margin: 10px auto; }
#acordeonvertical div {
 height:25%;
 overflow: hidden;}
#acordeonvertical:hover div {
 height: 20px; }
#acordeonvertical:hover div:hover{
 height: 340px;
 overflow: auto; }

/* Colores de fondo */
#titulo1 {
 background-color: #EEE; }
#titulo2 {
 background-color: #DDD; }
#titulo3 {
 background-color: #CCC; }
#titulo4 {
 background-color: #BBB; }

/* Títulos */
h2 {
 font-size: 150%;
 margin: 10px 10px .2em 25px; }

/* Párrafos */
p {
 margin: 1em 25px; }

Y también el HTML incluyelo en una entrada o como elemento HTML/Javascript

<div id='acordeonvertical'>
<div id='titulo1'>
<h2>Titulo 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id='titulo2'>
<h2>Titulo 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id='titulo3'>
<h2>Titulo 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div id='titulo4'>
<h2>Titulo 4</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div style='float: none; clear: both; height: 0;'></div>
</div>

Por ultimo agrega más filas o columnas ya sea para el acordeon vertical u horizontal y también agrégale los párrafos que desees.

<div id='titulo1'>
<h2>Titulo 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id='titulo2'>
<h2>Titulo 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id='titulo3'>
<h2>Titulo 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id='titulo4'>
<h2>Titulo 4</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id='titulo5'>
<h2>Titulo 5</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>

Se trata de un tutorial realizado por Catalin Rosu en donde ha creado un menú horizontal desplegable con CSS3, sin ningún tipo de código Javascript ni tampoco imágenes.

Ejemplo real:

• Titulo 1
• Titulo 2
  • Subtitulo 1
  • Subtitulo 2
  • Subtitulo 3
  • Subtitulo 4
• Titulo 3
• Titulo 4

Para hacer este bonito menú te transladas a edición de plantilla y buscas con Ctrl+F la etiqueta ]]></b:skin> y justo encima colocas el CSS:

/* Menú en general */
#menu
{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;
    background: #111;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 50px;
    border-radius: 50px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
}

#menu li
{
    float: left;
    padding: 0 0 10px 0;
    position: relative;
}

#menu a
{
    float: left;
    height: 25px;
    padding: 0 25px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#menu li:hover > a
{
    color: #fafafa;
}

*html #menu li a:hover 
{
    color: #fafafa;
}

#menu li:hover > ul
{
    display: block;
}

/* Submenús */

#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child
{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu ul a
{
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a 
{
    height: 10px;
    width: 150px;
}

*:first-child+html #menu ul a 
{
    height: 10px;
    width: 150px;
}

#menu ul a:hover
{
    background: #0186ba;
    background: -moz-linear-gradient(#04acec,  #0186ba);
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background: -webkit-linear-gradient(#04acec,  #0186ba);
    background: -o-linear-gradient(#04acec,  #0186ba);
    background: -ms-linear-gradient(#04acec,  #0186ba);
    background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec;
}

#menu ul li:last-child a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Borrar elementos flotantes */
#menu:after
{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html #menu { zoom: 1; } 
*:first-child+html #menu { zoom: 1; }

Ahora colocas este HTML como elemento HTML/Javascript y listo:

<ul id="menu">
        <li><a href="#">Titulo 1</a></li>
        <li><a href="#">Titulo 2</a>
                <ul>
                      <li><a href="#">Subtitulo 1</a></li>
                      <li><a href="#">Subtitulo 2</a></li>
                      <li><a href="#">Subtitulo 3</a></li>
                      <li><a href="#">Subtitulo 4</a>
                </ul>
        </li>
        <li><a href="#">Titulo 3</a></li>
        <li><a href="#">Titulo 4</a></li>
</ul>

Puedes ir agregando las listas de los títulos y subtítulos de esta forma:

<li><a href="#">Titulo 3</a>
         <ul>
               <li><a href="#">Subtitulo 1</a></li>
               <li><a href="#">Subtitulo 2</a></li>
               <li><a href="#">Subtitulo 3</a></li>
               <li><a href="#">Subtitulo 4</a></li>
         </ul>
</li>
<li><a href="#">Titulo 4</a></li>

Como se puede ver, la estructura del HTML es muy fácil de entender. Espero y lo puedas aplicar en tu blog.

En un pots anterior había mostrado los diferentes tipos de tablas que se pueden obtener con HTML, ahora te quiero mostrar esas mismas tablas pero incluyendo un poco de CSS para obtener un efecto tipo 3D.

Demostración

El CSS colócalo arriba de ]]></b:skin>

/* Tabla en general */ 
table{
background-color: #BBB; /* Color de fondo */
color: #FFFFFF; /* Color de texto */
font-family: Helvetica; /* Tipo de letra */
font-size: 16px; /* Tamaño de letra */
width: 800px;/* Ancho */
height: 500px;/* Alto */
padding: 20px; /* Expansión */ 
border-top:8px solid #F4F4F4; /* Borde de arriba */
border-left:8px solid #F4F4F4; /* Borde de izquierda */
border-right:8px solid #CCC; /* Borde de derecha */
border-bottom:8px solid #CCC; /* Borde de abajo */
}
th{
border-top:20px solid #CCC; /* Borde de arriba */
border-left:20px solid #CCC; /* Borde de izquierda */
border-right:20px solid #F4F4F4; /* Borde de derecha */
border-bottom:20px solid #F4F4F4;/* Borde de abajo */
}
th:hover{
border-top:20px solid #F4F4F4; /* Borde de arriba */
border-left:20px solid #F4F4F4; /* Borde de izquierda */
border-right:20px solid #CCC; /* Borde de derecha */
border-bottom:20px solid #CCC;/* Borde de abajo */
}

/* Un enlace */
a{
font-size: 10px; /* Tamaño de letra */
text-decoration: underline;/* Texto subrayado */
}
a:hover{
text-decoration: none; /* Texto sin subrayado */
}

Y el HTML colócalo en una entrada o como Elemento HTML/Javascript

<!— Tabla 1 -->
<div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;">
<table>
<tr align="center"><th>Titulo</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">Leer mas</a></th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</th></tr>
</table>
</div>

<!— Tabla 2 -->
<div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;">
<table>
<tr align="center"><th>Titulo 1</th><th>Titulo 2</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Leer mas</a></th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
</table>
</div>

<!— Tabla 3 -->
<div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;">
<table>
<tr align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Leer mas</a></th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
</table>
</div>

<!— Tabla 4 -->
<div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;">
<table>
<tr align="center"><th colspan="3">Titulo</th></tr>
<tr align="center"><th>Subtitulo 1</th><th>Subtitulo 2</th><th>Subtitulo 3</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Leer mas</a></th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
</table>
</div>

<!— Tabla 5-->

<div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;">
<table>
<tr align="center"><th rowspan="5">Mensaje</th></tr>
<tr align="center"><th>Titulo 1</th><th>Titulo 2</th><th>Titulo 3</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Leer mas</a></th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
</table>
</div>

<!— Tabla 6 -->
<div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;">
<table>
<tr align="center"><th rowspan="5">Mensaje</th><th colspan="4">Titulo</th></tr>
<tr align="center"><th>Subtitulo 1</th><th>Subtitulo 2</th><th>Subtitulo 3</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Leer mas</a></th></tr>
</table>
</div>

<!— Tabla 7 -->
<div style="border-top:10px solid #CCC; border-left:10px solid #CCC; border-right:10px solid #F4F4F4; border-bottom:10px solid #F4F4F4; width: 800px;">
<table>
<tr align="center"><th rowspan="2">Mensaje</th><th colspan="3">Titulo</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Leer mas</a></th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
<tr align="left"><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th><th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</th></tr>
</table>
</div>

Blizaga, ha creado un tutorial sobre como hacer un tooltip brillante sin ningun efecto de hover.
El ejemplo tiene algunas características interesantes, tales como bordes redondeados, un icono y una especie de punta de flecha.

Imagen:


Ejemplo real:




Para llevarlo a cabo, vas a tu plantilla y con Ctrl+F buscas ]]></b:skin> y justo encima colocas el CSS:

/* Burbuja en general */
.box {
    position: relative; /* Permitir que los elementos situados dentro de la burbuja */
    width: 280px; /* Ancho */
    height: 100px; /* Alto */
    padding: 10px; /* Expansión */
    background: #bfdcff; /* Color de fondo */
    border: 3px solid #76b3ff; /* Borde */
    -moz-border-radius: 10px; /* Redondeados para navegadores mozilla */
    -webkit-border-radius: 10px; /* Redondeados para navegadores WebKit */
    border-radius: 10px; /* Redondeada */
}

/* Burbuja mitad hacia arriba*/
.box .highlight {
    position: absolute; /* Posición absoluta con respecto a la caja */
    width: 100%; /* Anchura 100% de la caja */
    padding: 3px; /* Agrega 3px de la anchura (100% + 3px)*/
    height: 60px;
    top: -3px; /* Posición sobre el borde izquierdo de la caja */
    left: -3px; /* Posición sobre el borde superior de la caja */
    background: white;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20); /* Opacidad para IE */
    opacity: .2; /* Opacidad para otros navegadores */
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px; /* Borde izquierdo redondeado */
    border-top-right-radius: 10px; /* Borde derecho redondeado */
}

/* Mensaje dentro de la burbuja */
.box h2 {
    position: relative; /* Lugar por encima de los otros elementos */
    margin: 0 0 0 62px; /* Margen */
    color: #555555; /* Color */
    font: bold 20px arial; /* Tipo de letra */
}

/* Párrafo */
.box p {
    margin-top: 50px; /* Margen hacia abajo */
    font: 15px "Arial"; /* Tipo de letra */
}

/* Signo de interrogación */
.box .icon {
    float: left; /* Alineado en general a la izquierda */
    border: 1px solid #76b3ff; /* Borde */
    height: 50px; /* Alto */
    width: 50px; /* Ancho */
    background: white; /* Color de fondo */ 
    text-align: center; /* Signo alineado */
    color: #555555; /* Color */
    font: bold 40px/40px "times new roman"; /* Tipo de letra*/
    -moz-border-radius: 30px; /* Redondeados para navegadores mozilla */
    -webkit-border-radius: 30px; /* Redondeados para navegadores WebKit */
    border-radius: 30px; /* Redondeada */
}

/* Triángulo */
.box .arrow, .box .arrow_overlay {
    position: absolute; /* Posición absoluta con respecto al triángulo */
    width: 0px; /* Ancho */
    height: 0px; /* Alto */
    bottom: -15px; /* 15px posición por debajo del fondo de la caja*/
    right: 40px; /* Posición 40px por la derecha de la caja */
    border-top: 15px solid #76b3ff; /* El triángulo */
    border-right: 15px solid transparent; /* Ancho de la derecha */
    border-left: 15px solid transparent; /* Ancho de la izquierda */
}
.box .arrow_overlay {
    top: -15px; /* Posición en relación con la flecha */
    left: -10px; /* Posición en relación con la flecha */
    border-top: 10px solid #bfdcff; /* Más pequeño triángulo */
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}

Ya que colocaste el CSS, ahora vas elementos HTML/Javascript o en una entrada para colocar el HTML y listo:

<div class="box"> 
<div class="icon">?</div> 
<div class="highlight"></div> 
<div class="arrow"><div class="arrow_overlay"></div></div> 
<h2>Dentro de esta burbuja va incluido el mensaje deseado.</h2><p>Y este es un ejemplo de un párrafo normal.</p></div>

Usability post explica como implementar un efecto apretado a un botón en los enlaces personalizados usando solo CSS3.

Ejemplo:

B o t ó n

Para ponerlo en tu blog te diriges a tu plantilla y con Ctrl+F buscas ]]></b:skin> y justo encima colocas el CSS:

/* Botón en general */
.button-link {
    font-size: 18px; /* tamaño de letra */
    width: 150px; /* ancho */
    text-align: center; /* alineación del texto */
    padding: 10px 15px; /* expansión */
    background: #4479ba; /* color de fondo */
    color: #fff; /* color de texto */
    -webkit-border-radius: 4px; /* borde redondeado para webkit */
    -moz-border-radius: 4px; /* borde redondeado para mozilla */
    border-radius: 4px; /* borde redondeado */
    border: solid 1px #20538d; /* borde */
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); /* texto con sombra */
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); /* caja con sombra para webkit */
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); /* caja con sombra para mozilla */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); /* caja con sombra */
    -webkit-transition-duration: 0.2s; /* duración de transición para webkit */
    -moz-transition-duration: 0.2s; /* duración de transición para mozilla */
    transition-duration: 0.2s; /* duración de transición */
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

/* Botón hover */
.button-link:hover {
    background: #356094; /* Color de fondo */
    border: solid 1px #2a4e77; /* Borde */
    text-decoration: none; /* Decoración de texto */
}

/* Botón activado */
.button-link:active {
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); /* Caja con sombra para webkit */
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); /* Caja con sombra para mozilla */
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); /* Caja con sombra */
    background: #2e5481; /* Color de fondo */
    border: solid 1px #203e5f; /* Borde */
}

Ahora te diriges a elementos HTML/Javascript o en una entrada y colocas el HTML:

<p class="button-link"><b>B o t ó n</b></p>

Los textos generados con CSS3 son simplemente espectaculares y uno de ellos es el de efecto 3D como los que ha creado Josh Johnson en Design shack.

Son 10 ejemplos de texto 3D usando solo CSS3.


Aquí los ejemplos:

1.Texto 3D CSS3

2.Texto 3D CSS3

3.Texto 3D CSS3

4.Texto 3D CSS3

5.Texto 3D CSS3

6.Texto 3D CSS3

7.Texto 3D CSS3

8.Texto 3D CSS3

9.Texto 3D CSS3

10.Texto 3D CSS3

Recuerda que al utilizar sombras, los ejemplos solo serán compatibles con: IE9, Chrome, Firefox y safari.

Este es el CSS que por defecto va arriba de ]]></b:skin>

/* Estilos por defecto */
{
 padding: 0;
 margin: 0;
}

h3 {
  text-transform: uppercase;
  font: bold 125px/1 Helvetica, Verdana, sans-serif;
  margin: 20px 50px;
  float: left;
}

/* Fuentes personalizadas */
.alfa {
 font-family: 'Alfa Slab One', cursive;
 text-transform: none;
 font-weight: 400;
}

.sansita {
 font-family: 'Sansita One', cursive;
 text-transform: none;
 font-weight: 400;
}

.medula {
 font-family: 'Medula One', cursive;
 text-transform: none;
 font-weight: 400;
}

.limelight {
 font-family: 'Limelight', cursive;
 text-transform: none;
 font-weight: 400;
}

/* Sombras de colores 3D */
.green {
  color: #d4daa8;
  text-shadow: 
    0 2px 0 #bcc678,
    0 4px 0 #b0bc60,
    0 6px 0 #a3b04a,
    0 8px 0 #8d9840,
    3px 8px 15px rgba(0,0,0,0.1),
    3px 8px 5px rgba(0,0,0,0.3);
}

.blue {
  color: #c8d2da;
  text-shadow: 
    0 2px 0 #b4c1cd,
    0 4px 0 #a0b1bf,
    0 6px 0 #8ca0b2,
    0 8px 0 #778fa4,
    3px 8px 15px rgba(0,0,0,0.1),
    3px 8px 5px rgba(0,0,0,0.3);
}

.red {
  color: #d93a36;
  text-shadow: 
    0 2px 0 #aa2421,
    0 4px 0 #8e1e1b,
    0 6px 0 #711816,
    0 8px 0 #551210,
    3px 8px 15px rgba(0,0,0,0.1),
    3px 8px 5px rgba(0,0,0,0.3);
}

.darkblue {
  color: #6d879d;
  text-shadow: 
    0 2px 0 #5d768a,
    0 4px 0 #4f6576,
    0 6px 0 #425362,
    0 8px 0 #34424d,
    3px 8px 15px rgba(0,0,0,0.1),
    3px 8px 5px rgba(0,0,0,0.3);
}

.black {
  color: #4c4c4c;
  text-shadow: 
    0 2px 0 #3b3b3b,
    0 4px 0 #2a2a2a,
    0 6px 0 #191919,
    0 8px 0 #080808,
    3px 8px 15px rgba(0,0,0,0.1),
    3px 8px 5px rgba(0,0,0,0.3);
}

.gray {
  color: #d4d4d4;
  text-shadow: 
    0 2px 0 #a1a1a1,
    0 4px 0 #909090,
    0 6px 0 #7f7f7f,
    0 8px 0 #6e6e6e,
    3px 8px 15px rgba(0,0,0,0.1),
    3px 8px 5px rgba(0,0,0,0.3);
}

Y este es el HTML que por defecto va en una entrada o como elemento HTML/Javascript

<h3 class="green">1.Texto 3D CSS3</h3>
<h3 class="blue">2.Texto 3D CSS3</h3>
<h3 class="red">3.Texto 3D CSS3</h3>
<h3 class="darkblue">4.Texto 3D CSS3</h3>
<h3 class="black">5.Texto 3D CSS3</h3>
<h3 class="gray">6.Texto 3D CSS3</h3>

<!-- Fuentes personalizadas -->
<h3 class="green alfa">7.Texto 3D CSS3</h3>
<h3 class="blue sansita">8.Texto 3D CSS3</h3>
<h3 class="red medula">9.Texto 3D CSS3</h3>
<h3 class="darkblue limelight">10.Texto 3D CSS3</h3>

Hoy te quiero compartir 1kbgrid, un generador de marcos con CSS.
Su utilizacion es tan simple que para hacerlo solo configuras el tamaño de cada uno de los marcos, lo descargas en un archivo zip y listo:



Aquí una muestra original:

Colocas el CSS antes de ]]></b:skin>

p {
    font:60px/100px Helvetica;
    color: #000;
    text-align: center;
    border: 1px solid #000;
    margin: 0 0 20px 0;
}
.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }

.column {
 margin: 0 10px;
 overflow: hidden;
 float: left;
 display: inline;
}
.row {
 width: 960px;
 margin: 0 auto;
 overflow: hidden;
}
.row .row {
 margin: 0 -10px;
 width: auto;
 display: inline-block;
}

Colocas el HTML en una entrada o como elemento HTML/Javascript

<div class="row">
<div class="column grid_6"><p>12</p></div>
</div>
<div class="row">
<div class="column grid_4"><p>8</p>
<div class="row">
<div class="column grid_2"><p>4</p></div>
<div class="column grid_2"><p>4</p></div>
</div>
</div>
<div class="column grid_2"><p style="line-height: 222px;">4</p></div>
</div>

Y aquí una muestra personalizada:


Colocas el CSS antes de ]]></b:skin>

.Marcos {
    background-color: #EEE;
    font:40px/100px Helvetica;
    color: #BBB;
    text-align: center;
    border-left: 6px solid #AAA;
    border-top: 6px double #BBB;
    border-right: 10px double #BBB;
    border-bottom: 10px solid #AAA;
    margin: 0 0 6px 0;
}
.linea_1 { width:60px; }
.linea_2 { width:140px; }
.linea_3 { width:220px; }
.linea_4 { width:300px; }
.linea_5 { width:380px; }
.linea_6 { width:460px; }
.linea_7 { width:540px; }
.linea_8 { width:620px; }
.linea_9 { width:700px; }
.linea_10 { width:780px; }
.linea_11 { width:860px; }
.linea_12 { width:940px; }

.columna {
              margin: 0 10px;
 overflow: hidden;
 float: left;
 display: inline;
}
.direccion {
 width: 960px;
 margin: 0 auto;
 overflow: hidden;
}
.direccion .direccion {
 margin: 0 -10px;
 width: auto;
 display: inline-block;
}

Colocas el HTML en una entrada o como elemento HTML/Javascript

<div class="direccion">
<div class="columna linea_6"><div class="Marcos">Marco 1</div></div>
</div>
<div class="direccion">
<div class="columna linea_4"><div class="Marcos">Marco 2</div>
<div class="direccion">
<div class="columna linea_2"><div class="Marcos">Marco 3</div></div>
<div class="columna linea_2"><div class="Marcos">Marco 4</div></div>
</div>
</div>
<div class="columna linea_2"><div class="Marcos" style="line-height: 161px;">Marco 5</div></div>
</div>

Se trata de 3 menús horizontales muy sencillos creados con puro CSS utilizando los bordes.
Que los disfrutes!

Demostración

Menú color verde:
HTML (como elemento HTML/Javascript o en una entrada):

<ul id="menuhorizontal1"> 
<li><a href="#">Enlace 1</a></li> 
<li><a href="#">Enlace 2</a></li> 
<li><a href="#">Enlace 3</a></li> 
<li><a href="#">Enlace 4</a></li> 
<li><a href="#">Enlace 5</a></li> 
<li><a href="#">Enlace 6</a></li> 
<li><a href="#">Enlace 7</a></li> 
<li><a href="#">Enlace 8</a></li> 
</ul>

CSS (arriba de ]]></b:skin>):

#menuhorizontal1 li { 
display: inline; /* Enlaces alineados */
} 
#menuhorizontal1 li a { 
font-family: Arial; /* Tipo de letra */
font-size:11px; /* Tamaño de letra mostrado */
text-decoration: none; /* Enlaces no subrayados */
float:left; /* Alineación de todo el menú */
padding: 10px; /* Menú expandido */
background-color: #006600; /* Color de fondo mostrado */
border-left: 10px solid #009900; /* Tipo, color y tamaño de borde izquierdo mostrado */
border-top: 4px solid #009900; /* Tipo, color y tamaño de borde arriba mostrado */
border-right: 4px solid #009900; /* Tipo, color y tamaño de borde derecho mostrado */
border-bottom: 10px solid #009900; /* Tipo, color y tamaño de borde abajo mostrado */
color: #FFFFFF; /* Color de letra */
} 
#menuhorizontal1 li a:hover { 
background-color: #009900; /* Color de fondo hover */
border-left: 7px inset #006600; /* Tipo, color y tamaño de borde izquierdo hover */
border-top: 20px inset #006600; /* Tipo, color y tamaño de borde arriba hover */
border-right: 7px inset #006600; /* Tipo, color y tamaño de borde derecho hovero */
border-bottom: 20px inset #006600; /* Tipo, color y tamaño de borde abajo hover */
font-size:13px; /* Tamaño de letra hover */
}

Menú color azul:
HTML (como elemento HTML/Javascript o en una entrada):

<ul id="menuhorizontal2"> 
<li><a href="#">Enlace 1</a></li> 
<li><a href="#">Enlace 2</a></li> 
<li><a href="#">Enlace 3</a></li> 
<li><a href="#">Enlace 4</a></li> 
<li><a href="#">Enlace 5</a></li> 
<li><a href="#">Enlace 6</a></li> 
<li><a href="#">Enlace 7</a></li> 
<li><a href="#">Enlace 8</a></li> 
</ul>

CSS (arriba de ]]></b:skin>):

#menuhorizontal2 li { 
display: inline; 
} 
#menuhorizontal2 li a { 
font-family: Arial; 
font-size:11px; 
text-decoration: none; 
float:left; 
padding: 10px; 
background-color: #0000FF; 
border: 10px solid #007FFF;
color: #FFFFFF; 
} 
#menuhorizontal2 li a:hover { 
background-color: #007FFF;
border: 10px inset #007FFF;
font-size:13px; 
}

Menú color naranja:
HTML (como elemento HTML/Javascript o en una entrada):

<ul id="menuhorizontal3"> 
<li><a href="#">Enlace 1</a></li> 
<li><a href="#">Enlace 2</a></li> 
<li><a href="#">Enlace 3</a></li> 
<li><a href="#">Enlace 4</a></li> 
<li><a href="#">Enlace 5</a></li> 
<li><a href="#">Enlace 6</a></li> 
<li><a href="#">Enlace 7</a></li> 
<li><a href="#">Enlace 8</a></li> 
</ul>

CSS (arriba de ]]></b:skin>):

#menuhorizontal3 li { 
display: inline; 
} 
#menuhorizontal3 li a { 
font-family: Arial; 
font-size:11px; 
text-decoration: none; 
float:left; 
padding: 15px; 
background-color: #FF4000; 
border-top: 8px inset #FF8000;
color: #FFFFFF; 
} 
#menuhorizontal3 li a:hover { 
background-color: #FF8000;
border: 4px inset #FF8000;
border-top: 15px double #FF4000; 
border-bottom: 4px solid #FF4000;
font-size:13px; 
}

Si bien existen muchas soluciones innovadoras usando CSS y una de ellas es la que ha realizado Alex Dawson en Six revisions con unos sexis tooltips muy elegantes.


Estos son los ejemplos que pudo realizar:
ClásicoLorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu., CriticoCriticoLorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu., AyudaAyudaLorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu., InformaciónInformaciónLorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu. y AlertaAlertaLorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu.

Este es el HTML (entrada o como HTML/Javascript):

<!-- Clásico -->
<a class="tooltip" href="#">Clásico<span class="clasico">Lorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu.</span></a>

<!-- Critico -->
<a class="tooltip" href="#">Critico<span class="cos critico"><img src="Url-de-icono-critico" height="48" width="48" /><em>Critico</em>Lorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu.</span></a>

<!-- Ayuda -->
<a class="tooltip" href="#">Ayuda<span class="cos ayuda"><img src="Url-de-icono-ayuda" height="48" width="48" /><em>Ayuda</em>Lorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu.</span></a>

<!-- Información -->
<a class="tooltip" href="#">Información<span class="cos informacion"><img src="Url-de-icono-informacion" height="48" width="48" /><em>Información</em>Lorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu.</span></a>

<!-- Alerta -->
<a class="tooltip" href="#">Alerta<span class="cos alerta"><img src="Url-de-icono-alerta" height="48" width="48" /><em>Alerta</em>Lorem ipsum dolor sit amet, at omnis bonorum eam, ea quis inermis sea. Pri in fabellas consequuntur, atqui tempor eu nec, est omnis numquam cu.</span></a>

Y este es el CSS (antes de ]]></b:skin>):

.tooltip {
        border-bottom: 1px dotted #000000; 
        color: #000000; outline: none;
        cursor: help; 
        text-decoration: none;
        position: relative;
  }
.tooltip span {
        margin-left: -999em;
        position: absolute;
  }
.tooltip:hover span {
        border-radius: 5px 5px; 
        -moz-border-radius: 5px; 
        -webkit-border-radius: 5px; 
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); 
        -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); 
        -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
        font-family: Calibri, Tahoma, Geneva, sans-serif;
        position: absolute; left: 1em; top: 2em; z-index: 99;
        margin-left: 0; width: 250px;
  }
.tooltip:hover img {
        border: 0; 
        margin: -10px 0 0 -55px;
        float: left; 
        position: absolute;
  }
.tooltip:hover em {
        font-family: Candara, Tahoma, Geneva, sans-serif; 
        font-size: 1.2em; 
        font-weight: bold;
        display: block; padding: 0.2em 0 0.6em 0;
  }
.clasico { padding: 0.8em 1em; }
.cos { padding: 0.5em 0.8em 0.8em 2em; }
 a:hover { background: transparent; }
.clasico { background: #FFFFAA; border: 1px solid #FFAD33; }
.critico { background: #FFCCAA; border: 1px solid #FF3334; }
.ayuda { background: #9FDAEE; border: 1px solid #2BB0D7; }
.informacion { background: #9FDAEE; border: 1px solid #2BB0D7;}
.alerta { background: #FFFFAA; border: 1px solid #FFAD33; }

Muy bonitos no!, si te gustaron no dudes en ser creativo y crear tus propios tooltips.

Bastante son los trucos que se pueden descubrir con CSS. Y algunos de ellos son una muestra de como descubrir sencillamente imagenes colocando el puntero del mouse sobre ellas como en los siguientes ejemplos:

Ejemplo 1:


CSS:

a.imagen {
display:block;
cursor:default;
width:400px; /* Ancho de la imagen que se ve */
height:265px; /* Alto de la imagen que se ve */
background:url(Url-de-tu-imagen) top left; /* Direccion de la imagen */
} 
a.imagen:hover {
background-position:bottom left;
width:500px; /* Ancho de la imagen al colocar el mouse */
height:400px; /* Alto de la imagen al colocar el mouse */
}

HTML:

<a href="#" class="imagen"></a>

Ejemplo 2:


Solo elimina:
width:500px; /* Ancho de la imagen al colocar el mouse */

Ejemplo 3:


Solo eliminas:
width:500px; /* Ancho de la imagen al colocar el mouse */
height:400px; /* Alto de la imagen al colocar el mouse */

Recuerda que el CSS va incluido antes de ]]></b:skin> y el HTML en una entrada o como elemento HTML/Javascript

La imagen corresponde a Shane gorski

Experimentando con CSS realice 3 sencillos menús.

Espero y te sean de utilidad.
Ejemplo 1.
CSS:

<style type="text/css">
#menuvertical
{
width: 12em; /* Ancho del menú */
font-family: Verdana; /* Tipo de letra */
text-align: center; /* Alineación de títulos */
}
#menuvertical ul
{
margin: 0;
padding: 0;
}
#menuvertical li
{
border-bottom: 2px inset #FFFFFF; /* Borde entre los enlaces */
}
#menuvertical li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #FF0000; /* Borde izquierdo del menú */
background-color: #008000; /* Color del menu */
color: #FFFFFF; /* Color de títulos */
text-decoration: none;
width: 100%;
}
#menuvertical li a:hover
{
border-left: 20px double #FF0000; /* Borde izquierdo hover del menú */
background-color: #009900; /* Color hover del menu */
color: #FFFFFF; /* Color hover de títulos */
}
</style>

HTML:

<div id="menuvertical">
<ul id="menuvertical">
<li><a href="#">Enlace 0</a></li>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
</ul>
</div>

Ejemplo 2.
CSS:

<style type="text/css">
#menuvertical
{
width: 12em;
font-family: Verdana;
text-align: center;
}
#menuvertical ul
{
margin: 0;
padding: 0;
}
#menuvertical li
{
border-bottom: 1px inset #FFFFFF;
}
#menuvertical li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #FF8000;
border-right: 10px solid #FF8000;
border-bottom: 1px inset #FF8000;
background-color: #008000;
color: #FFFFFF;
text-decoration: none;
width: 100%;
}
#menuvertical li a:hover
{
border-left: 20px solid #FF8000;
border-right: 20px solid #FF8000;
background-color: #009900;
color: #FFFFFF;
}
</style>

Ejemplo 3.
CSS:

<style type="text/css">
#menuvertical
{
width: 12em;
font-family: Verdana;
text-align: center;
}
#menuvertical ul
{
margin: 0;
padding: 0;
}
#menuvertical li
{
border-bottom: 0px inset #FFFFFF;
}
#menuvertical li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #FFCC00;
border-top: 10px double #FFCC00;
background-color: #008000;
color: #FFFFFF;
text-decoration: none;
width: 100%;
}
#menuvertical li a:hover
{
border-left: 20px double #FFCC00;
background-color: #009900;
color: #FFFFFF;
}
</style>