Cómo hacer cintas en CSS3

Las hojas de estilo en cascada (CSS), lenguaje de marcas ha ganado en CSS3 muchos nuevos elementos que permiten que su rival en la pantalla de visualización a través de la programación de un sitio web hecho con imágenes. Nuevos elementos de CSS3 incluyen triángulos y esquinas redondeadas, que, antes de esta actualización, eran difíciles de crear. Estas características hacen que sea sencillo para crear un efecto de la cinta, incluso para un novato en el margen de ganancia. Una cinta es esencialmente uno o varios triángulos, caja, y un efecto de sombra. Estos componentes se conectan entre sí para crear una cinta en 3D que se pueden colocar en las cabeceras, banners, o cualquier otro lugar en su página web. 

CINTAS

Cree una etiqueta de cabecera o título. Por ejemplo, si usted quiere que su primera cabecera de la página para decir Cabecera, su margen de ganancia aparecería como: h1 cabecera / h1. Cierre siempre una etiqueta HTML con una barra invertida.

Dele a su etiqueta HTML los estilos CSS que desees. Incluya por lo menos, su posición, tamaño y color. Por ejemplo, haciendo referencia a la etiqueta h1, el CSS margen se vería así:

h1 {position: absolute; anchura: 20%; padding: 10px; background-color: # 999;}

Haga que cada línea de CSS margen de una línea independiente. Comience y termine cada declaración con soportes abiertos y cerrados. Posición: absoluta significa que la posición del elemento es absoluto y no cambia no importa lo que está sucediendo en la página. La anchura se establece en 20 por ciento de la pantalla o la papelera de la etiqueta h1 se establece dentro de, tales como un div o tabla.El acolchado le da la etiqueta h1 un respiro adicional. El color de fondo establece el color alrededor del texto.

Crear un triangular después de pseudo-elemento para añadir a su etiqueta de cabecera. El después de la pseudo-elemento nuevo en CSS3 y le permite colocar un elemento directamente después de otro. Que sea un triángulo mediante el establecimiento de más de una de sus fronteras a transparente. Su margen de beneficio después de su etiqueta h1 podría tener este aspecto:

h1: después {position: absolute; izquierda: 0; superior: 100%; border-width: 10px 10px; border-style:; border-color sólido transparente # 666 # 666 transparente;}

La posición y el estilo de la izquierda establece el triángulo en la parte inferior izquierda del elemento h1. Los mejores estilos y la frontera establecen el tamaño del triángulo. El estilo border-color hace que el bloque aparece como un triángulo y las fronteras que aparecen los colores son más oscuros que el color de la cabecera, creando un efecto 3D, como si el bloque de cabecera está fuertemente doblando hacia atrás como una cinta.

Añadir más efectos con elementos triangulares para terminar la mirada de la cinta de la cabecera. Coloque estos últimos triángulos al inicio de la cabecera y al final, por lo que la cinta tiene un aspecto similar a la bandera. Su CSS mark-up aparece ahora en conjunto como:

h1 {position: absolute; anchura: 20%; padding: 10px; background-color: # 999;}

h1: después {position: absolute; left: 0px; superior: 100%; border-width: 10px 10px; border-style:; border-color sólido transparente # 666 # 666 transparente;}

h1: before {position: absolute; derecha: 0px; top: 0px; border-color: # fff transparente transparente transparente;}

h1: before {position: absolute; izquierda:-30px; top: 12px; border-width: 20px 10px; border-color: # 999 # 999 # 999 transparente;}

El primero: antes de elemento crea una bandera-efecto en el lado derecho de la cabecera. El segundo: antes de elemento crea un estilo de la bandera en el lado izquierdo caído de la cabecera.

Consejos y advertencias

Experimente con diferentes colores y lugares para hacer sus cintas. En lugar de colocar los triángulos y el abandono sombras a los encabezados, probarlos en párrafos, de div y otros elementos de texto.