Títulos con efectos usando :after y :before

Esta es otra variante del uso que podemos darle a las propiedades :after y :before que funcionará sin demasiados problemas en cualquier navegador incluyendo IE8.

La idea de css-tricks es generar una especie de flecha o señalador de este estilo:

Pero, como la parte interesante es la forma en que está armada la parte de los títulos, me limitaré a mostrar sólo esa parte aunque el resto puede ser consultado en la página del autor que incluye una descarga con el ejemplo completo.

El HTML es muy sencillo y podría adaptarse perfectamente a los títulos de la sidebar de Blogger pero, ese es otro tema:

<div class="module blue">
  <h2>Título de este módulo <a href="#">Azul</a></h2>
</div>
<div class="module yellow">
  <h2>Otro título <a href="#">Amarillo</a></h2>
</div>
<div class="module green">
  <h2>Lo mismo para el verde <a href="#">Verde</a></h2>
</div>
<div class="module red">
  <h2>Y para cualquier color <a href="#">Rojo</a></h2>
</div>

Son DIVs con dos clases CSS, module es la clase genérica y la otra varía y en este caso tiene el nombre del color; estas últimas son lasque se usarán para diferenciar unos de otros.

Lo básico para este ejemplo,sería esto:

<style>
.module h2 { /* el rectágulo de la izquierda con el título */
  background-color: #BBB;
  border-radius: 20px 0 0 20px;
  color: #FFF;
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 32px;
  margin: 0;
  padding: 0 0 0 20px;
  text-shadow: 2px 1px 1px #222;
}

.module h2 a { /* el rectángulo de la derecha con el subtítulo */
    /* el color del fondo y el borde son iguales al color de fondo de la página */
    border-left: 5px solid #101921;
    color: #101921;
    float: right;
    /* la fuente del texto */
    font-size: 18px;
    text-decoration: none;
    text-shadow: none;
    /* efectos varios incluyendo una transición */
    padding: 0 10px;
    position: relative;
   -moz-transition: padding 0.1s linear;
   -webkit-transition: padding 0.1s linear;
   -ms-transition: padding 0.1s linear;
   -o-transition: padding 0.1s linear;
}
.module h2 a:hover { /* se agranda al poner el cursor encima */
  padding: 0 32px;
}

/* las reglas genéricas de after y before */
.module h2 a:before, .module h2 a:after {
    content: "";
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
}
.module h2 a:before {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #101921; /* el color es igual al fondo de la página */
    border-top: 8px solid transparent;
    left: -12px;
    margin-top: -8px;
}
.module h2 a:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    left: -6px;
    margin-top: -6px;
}

/* y los colores de cada uno de los enlaces */
.module.blue h2 a {background-color: #A2D6EB;}
.module.blue h2 a:hover {background-color: #C5F0FF;}
.module.blue h2 a:after {border-right: 6px solid #A2D6EB;}
.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}

.module.green h2 a {background-color: #9CF1A4;}
.module.green h2 a:hover {background: #BBFFCF;}
.module.green h2 a:after {border-right: 6px solid #9CF1A4;}
.module.green h2 a:hover:after {border-right-color: #BBFFCF;}

.module.red h2 a {background-color: #F0A5B5;}
.module.red h2 a:hover {background-color: #FFC7D2;}
.module.red h2 a:after {border-right: 6px solid #F0A5B5;}
.module.red h2 a:hover:after {border-right-color: #FFC7D2;}

.module.yellow h2 a {background-color: #FCE98D;}
.module.yellow h2 a:hover {background-color: #FFD700;}
.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}
.module.yellow h2 a:hover:after {border-right-color: #FFD700;}
</style>

Título de este módulo Azul

Otro título Amarillo

Lo mismo para el verde Verde

Y para cualquier color Rojo