Morton 15 de enero de 2012 a las 07.14
   Imprimir artículo
elWebmaster.com

Flechas al estilo Adobe con CSS3 y HTML


adobeheaders-wideDe seguro conocer√°s las tradicionales flechas de Adobe, esas tan elegantes, que est√°n en todos sus dise√Īos y que son la envidia de todo sitio web. En este art√≠culo, veremos c√≥mo hacer unas flechas del mismo estilo usando tan s√≥lo un poco de HTML y otro poco de CSS.

Haz clic aquí para ver una demostración >>

¬ŅQuieres saber c√≥mo lo hace Adobe? La barra de header est√° dividida entre las secciones izquierda y derecha. La izquierda suele ser el t√≠tulo explicativo, y la derecha, un enlace relacionado. Para lograr esto, ellos usan una imagen que no est√° dentro de un sprite. Esto implicar√≠a una solicitud HTML s√≥lo para las barras de header. Adem√°s, el efecto¬† :hover es una imagen completamente distinta (sin hacer uso de sprites), por lo que requerir√≠amos de otra solicitud HTML¬†y un flash de negro mientras la segunda imagen se carga en su primer :hover.

Pero he aqu√≠ el truco… ¬°Nosotros podemos hacer todo esto sin utilizar im√°genes!

Para comenzar, primero requeriremos del HTML. Aquí realizaremos la barra de header:
[HTML]

Community Blue

[/HTML]

Con CSS, realizaremos la configuración básica de la barra de header, con el link a la derecha y un poco de colorido incluyendo la linea blanca que es generada a través de un borde:

[CSS]
.module h2 {
background: #ccc;
padding: 0 0 0 10px;
font-size: 16px;

line-height: 2;
}
.module h2 a {
float: right;
position: relative;
text-decoration: none;
color: #333;
padding: 0 10px;
border-left: 5px solid white;
}
[/CSS]

Ahora, el truco es obtener la flecha junto con la linea usando triángulos CSS aplicados a través de los pseudo-elementos:

[CSS]
.module h2 a:before,
.module h2 a:after {
content: “”;
position: absolute;
top: 50%;
width: 0;
height: 0;
}
.module h2 a:before {
left: -12px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
margin-top: -8px;
}
.module h2 a:after {
left: -5px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #a2d6eb;
margin-top: -6px;
}
[/CSS]

Una diferencia significativa con la flecha que tratamos de imitar, es que ellos tienen un gradiente que va hacia la derecha a través del triángulo. Esto no es posible en nuestra flecha ya que no es práctico aplicar gradientes teniendo la técnica de los triángulos CSS.

Haz clic aquí para ver una demostración >>

¡Esperamos que haya sido de utilidad! Hasta el próximo artículo.

Fuente original del artículo: Css-Tricks
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. Esteban Schierenbeck dice:

    Esta muy lindo el efecto, pero como hacemos que todos los navegadores lo reconozcan de la misma manera lo he probado dentro de una tabla.
    Firefox sale barbaro, sin movimiento como en el ejemplo pero OK
    Explorer en dos renglones y sin el triangulo
    Chrome Sale bien pero no respeta los limites de la tabla.

    AYUDA!!!!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder