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