Morton 29 de julio de 2011 a las 09.06
   Imprimir artículo
elWebmaster.com

CSS3: Cómo crear líneas diagonales


css3wide1Tan sencilla como realmente pr√°ctica, una l√≠nea obl√≠cua conseguida a trav√©s del lenguaje web es siempre un desaf√≠o. En este casos te ense√Īamos a obtenerla utilizando CSS3.

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

Empezaremos con algo de código:

  1. <!DOCTYPE html>  
  2.      
  3.     <html lang="en">  
  4.     <head>  
  5.        <meta charset="utf-8">  
  6.        <title>Demo</title>  
  7.     </head>  
  8.     <body>  
  9.         <a href="#">New Music</a>  
  10.         <div>  
  11.             <h3> Hello, Everyone! </h3>  
  12.             <p>  
  13.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
  14.             </p>  
  15.         </div>  
  16.     </body>  
  17.     </html>

Ahora, para la parte del dise√Īo, aplicaremos un color de fondo y un poco de espaciado al elemento body.

  1. body {  
  2.         background: #e3e3e3;  
  3.         font-family: sans-serif;  
  4.         width: 400px;  
  5.         margin: 100px auto;  
  6.     }

Le daremos estilo al tag anchor: aplicaremos un nuevo color, algunos bordes, etc.

  1. a {  
  2.         padding: 10px;  
  3.         text-decoration: none;  
  4.         color: white;  
  5.         font-weight: bold;  
  6.         display: block;  
  7.      
  8.         border-right: 30px solid red;  
  9.         border-bottom: 30px solid #4c4c4c;  
  10.     }

Nota como, cuando configuras extensos anchos de borde, al punto de que ambos se intersectan, crea una línea diagonal. Probaremos reducir la altura a cero.

  1. a {  
  2.         padding: 10px;  
  3.         text-decoration: none;  
  4.         color: white;  
  5.         font-weight: bold;  
  6.         display: block;  
  7.      
  8.         border-right: 30px solid red;  
  9.         border-bottom: 30px solid #4c4c4c;  
  10.      
  11.        height: 0;  
  12.     }

Aquí ajustaremos el line-height del tag anchor, logrando que el texto quepa en la caja.

  1. a {  
  2.         padding: 10px;  
  3.         text-decoration: none;  
  4.         color: white;  
  5.         font-weight: bold;  
  6.         display: block;  
  7.      
  8.         border-right: 30px solid red;  
  9.         border-bottom: 30px solid #4c4c4c;  
  10.      
  11.         height: 0;  
  12.         line-height: 50px;  
  13.     }

Ahora, ajustamos unos detalles finales tanto en los bordes como en el campo display…

  1. a {  
  2.         padding: 10px;  
  3.         text-decoration: none;  
  4.         color: white;  
  5.         font-weight: bold;  
  6.         display: inline-block;  
  7.      
  8.         border-right: 30px solid transparent;  
  9.         border-bottom: 30px solid #4c4c4c;  
  10.      
  11.         height: 0;  
  12.         line-height: 50px;  
  13.     }

Ahora tocar√° el turno de dar estilo al div:

  1. div {  
  2.          border: 1px solid #4c4c4c;  
  3.          border-top: 3px solid #4c4c4c;  
  4.          padding: 20px;  
  5.     }

Por √ļltimo, a√Īadimos un peque√Īo hack para asegurnarnos compatibilidad en navegadores con webkit (como Google Chrome o Safari):

  1. @media screen and (-webkit-animation) {  
  2.         a {  
  3.             margin-bottom: -4px;  
  4.         }  
  5.     }

¡Y listo! Eso fue todo por este artículo. ¡Hasta la próxima!

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

Fuente original del artículo: Net Tuts +
Traducción realizada por
elWebmaster.com


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

Comentarios (4)

  1. Ezkielnet dice:

    Gracias por la entrada. Antes tenia que hacerlos con im√°genes, aunque seguramente alg√ļn navegador no lo mostrara bien.

  2. elizabeth dice:

    muy buen post ya lo probe y esta muy facil y lo mejor de todo es que funciona en todos los exploradores gracias..

  3. Freddy Vargas dice:

    bueno, le he hecho seguimiento al codigo, haciendo lo siguiente:
    creé dos archivos:linea_oblicua.css y linea oblicua.html
    en el html adicione la siguiente linea

    Demo


    y el resto de codigo que parece en los plain text, los copie en el archivo css.

    encontre lo siguiente: que solamente los plain text (en orden que parecen en la web) 1, 5 y 6 hacen exactamente lo que muestra el demo..
    la pregunta es que hace los dem√°s plain text???.

  4. Edwin Rios dice:

    La demostracion no funciona

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