Subscribe:

Ads 728x90px

10 abr. 2012

¿Cómo crear el efecto de una cinta plegada con CSS?

Todo diseñador de páginas web sabe lo que significa CSS, y si no lo sabes aquí lo sabrás. Si no utilizaramos CSS, tu página web se vería muy simple y quizás desorganizada. Hoy en dia la estructura de una página web esta dada en diferentes secciones, como:
  •  contenedor principal,
  • el encabezado
  • el contenido principal, 
  • columnas laterales 
  • y el pie de página. 
Lo puedes estructurar de diferentes manera, una de tantas sería;

<div id="contenedor">
  <div id="encabezado">[ contenido en el encabezado]</div>
  <div id="contenido">[ contenido principal ]</div>
  <div id="columa">[ contenido en columna ]</div>
  <div id="pie">[ contenido en el pie de la página ]</div>
</div> 



naturalmente, ésta manera de estructurarlo, no es un estandar, sólo una recomendación.

¿Qué es CSS?
  •      CSS significa Cascading Style Sheets (Estilo de Hojas Escalonadas)
  •      CSS define cómo los elementos HTML se van a mostrar
  •      Hojas de estilo externas pueden ahorrar mucho trabajo
  •      Hojas de estilo externas se almacenan en archivos CSS   

 En éste blog no voy hablar extensamente de lo que es CSS, sin embargo te he dado una pequeña introducción de lo que es.

El objetivo del Blog es mostrarte cómo crear el efecto de una cinta plegada con solo utilizar ciertos hacks de CSS. Este mismo resultado lo puedes lograr creando una imagen en Photoshop, sin embargo aquí demostraré que no es necesario recurrir a Photoshop para lograr ese efecto.


 


¿Cómo crear el efecto de una cinta plegada con CSS?

Supongamos que quieres crear éste efecto en la columna izquierda de tu página, y quieres que sea reusable, es decir que lo puedas emplear muchas veces en la misma columna. Para eso necesitas utilizar el selector  class

Utilicemos ahora un simple fragmento de HTML

<div class="cont_columna">
   <h1>Cinta Plegada con CSS</h1>
   <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacinia, sem et vestibulum placerat, leo nibh rutrum tellus, vitae malesuada dui nunc non lorem.
   </p>
   <p>
Duis hendrerit placerat ante, eget faucibus ipsum mattis eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed ligula enim. 
   </p>
   </div>


Es necesario utilizar los márgenes negativos para tirar hacia afuera  el selector h1 para que se extienda sobre el relleno y más allá de los límites del contenedor div(cont_columna).
A éste fragmento de código HTML se le puede dar un estilo usando CSS:

.cont_columna
 {
  width:300px;
  padding:20px;
  margin:20px auto;
  background:#fff;
  border:solid 1px #ccc;
 }

.cont_columna h1
 {
  position:relative;
  padding:10px 30px;
  margin:0 -30px 20px;
  font-size:20px;
  line-height:24px;
  font-weight:bold;
  background:#87A800;
  color:White;
  font-family:Verdana, Arial, Helvetica, sans-serif;
 }


Tendrás que añadir los triángulos pseudo-elementos para crear la "envoltura" o la apariencia asociada con cintas. :before y :after comparten muchos estilos, por lo que puedes simplificar el código, sólo se anulan los estilos que difieren entre los dos. En este caso, el triángulo creado con :after debe aparecer en el lado opuesto del encabezado de la "envoltura", y será una imágen similar al del otro triángulo pero en dirección opuesta. Así que hay que reemplazar los estilos comunes que controlan su posición.

 .cont_columna h1:before,
 .
cont_columna h1:after
 {
  content:"";
  position:absolute;
  top:100%;
  left:0;
  border-width:0 10px 10px 0;
  border-style:solid;
  border-color:transparent #647D01;
 }

 .
cont_columna h1:after
 {
  left:auto;
  right:0;
  border-width:0 0 10px 10px;
 }


Muchos otros hacks y efectos son posibles mediante los pseudo-elementos :before y :after . especialmente cuando se combina con CSS3. Espero que esta pequeña introducción a los pseudo-elementos, te inspire a hacer uso práctico de ellos en tu diseño de páginas web.

Libros recomendados