JMiur [E]

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

14 comentarios:

Carluís  

Muy bueno Jmiur, buena utilidad y con un aspecto elegante, tomaré en cuenta su implementación.

Saludos.

Responder
CristJian  

gracias :)

Responder
GARABATO  

Me encantó. Hacía tiempo que no encontraba nada que me despabilara... :)
Me lo llevé. Me lo apliqué y me lo quedé ;)
Gracias, JMiur

Responder
Graciela  

Guau genial :P

Responder
Beben Koben  

so artful... ;)

Responder
Adrián J. Messina  

¿Títulos en diferentes colores? ¡A ver que sale! ¡Que llamativo!

Responder
chesaudade  

Se viene la Navidad y el nuevo año y nacen los buenos deseos y las nuevas promesas casi siempre inconclusas. Durante el 2012 los mayas serán los más recordados, posiblemente. Pero, sería bueno recordar a Baudelaire cuando decía en uno de sus versos: "tenéis que embriagaros sin tregua. Pero de qué?. De vino, de poesía o de virtud, de lo que queráis. Pero embriagaos".
Mis respetos y lo mejor para ti y los tuyos.

Responder
JMiur  

Es para jugar un poco y ver que sale :-)

Gracias por los buenos deseos, chesaudade. Te deseo lo mismo. Un abrazo :-D

Responder
Héctor Hernández  

Gracias Jmiur por ofrecernos tan grandioso codigo, pero tengo una duda en cuanto a la implementación de caulquier elemento ya se un gadget, sidebar, etc. la parte el cual dice: .module { ¿ya es una propiedad en si, que crea los cuadros con una flecha? o se puede cambiar para cualquier otro elemento como por ejemplo: #label1 { o .post-title {? no se si me entiendes?

Responder
JMiur  

module no es una propiedad sino una clase CSS que es la que define la base de todos los ejemplos; se puede aplicar a cualquier cosa pero claro, habria que ver el ejemplo concreto..

Responder
Dann  

¡Hola! Primero que nada, debo agradecer porque el efecto se me hace genial y he logrado implementarlo luego de pelear un rato con el código. No obstante, quisiera saber cómo hacer para que la altura del «a» (en este caso; la parte donde aparece el nombre del color) se adapte en el caso de que, en vez de una sola línea, hubiesen dos, por ejemplo.

Dann

JMiur  

No sé si eso sea posible, habría que ver un ejemplo pero me parece que sería engorroso calcularlo y que funcione con una línea o varias.

Responder
tonyman arce  

bastante interesante todo esto

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

Hola:Ya puse un listado con todas las entidades y sus enlaces pero todo seguido y muy simple.Quería hacerlo mas vistoso,cambiar los títulos por estos,ponerlo en columnas etc pero es que me parece todo dificilísimo...Esto por ej. ¿dónde se pone?No entiendo nada.Seguiré leyendo,para ponerme al nivel de la gente que hace comentarios, tenéis todos un tecnicísmo.
Es que tengo miedo estropear todo lo que voy haciendo.
Un saludo

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR