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

Flechas al estilo Adobe con CSS3 y HTML

CSS, adobe, html, CSS3, flechas, arrows, headers, pseudo-elements

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:

PLAIN TEXT
  1. <div class="module">
  2.   <h2>Community <a href="#">Blue</a></h2>
  3. </div>

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:

PLAIN TEXT
  1. .module h2 {
  2.         background: #ccc;
  3.         padding: 0 0 0 10px;
  4.         font-size: 16px;
  5.  
  6.         line-height: 2;
  7. }
  8. .module h2 a {
  9.         float: right;
  10.         position: relative;
  11.         text-decoration: none;
  12.         color: #333;
  13.         padding: 0 10px;
  14.         border-left: 5px solid white;
  15. }

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

PLAIN TEXT
  1. .module h2 a:before,
  2. .module h2 a:after {
  3.         content: "";
  4.         position: absolute;
  5.         top: 50%;
  6.         width: 0;
  7.         height: 0;
  8. }
  9. .module h2 a:before {
  10.         left: -12px;
  11.         border-top: 8px solid transparent;
  12.         border-bottom: 8px solid transparent;
  13.         border-right: 8px solid white;
  14.         margin-top: -8px;
  15. }
  16. .module h2 a:after {
  17.         left: -5px;
  18.         border-top: 6px solid transparent;
  19.         border-bottom: 6px solid transparent;
  20.         border-right: 6px solid #a2d6eb;
  21.         margin-top: -6px;
  22. }

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

Artículos relacionados

Deja tu opinión

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