Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Crear una Elegante Cinta Doblada con CSS3 en Cinco Minutos

by
Length:MediumLanguages:

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Tome un linea de marcado, un par de reglas CSS3 (sin imágenes) y usted puede crear por su cuenta un efecto de una cinta elegante doblada en cinco minutos. Vamos a ver cómo...


Paso 1: La Estructura

Empezaremos con documento HTML vacío, solamente la declaración doctype, charset, head, body los aspectos generales. También notará que vamos a enlazar hacia la opción Google Web Fonts API, para que podamos usar la agradable tipografía Montez.

Ahora añadiremos nuestro elemento cinta. Es correcto, un elemento, eso es todo lo que necesitamos. En este caso estamos usando un encabezado h1:


Paso 2: Agregue algunos Estilos

Abra un archivo nuevo CSS, enlace ese archivo en el head de su documento html, luego añada de inmediato algunos estilos.

Hemos empezado agregando estilos al html y al body del documento, pero solamente para propósitos de la demostración (y si, he usado una imagen para el fondo, pero la cinta es 100% una imagen gratis).

Luego, vamos a cambiar nuestra atención a nuestro elemento cinta. Le aplicamos un poco de padding (espacio entre el contenido y el margen) a la izquierda y derecha, pero fuimos muy específicos en cuanto a la altura (en este caso 80px) ya que necesitaremos reproducir eso para la parte que doblada al final. Además especificamos el valor para la propiedad line-height con 80px para que el texto sea centrado verticalmente en la cinta. Después, hicimos flotar el elemento y lo despejamos de la izquierda para que podamos mostrar varios junto al borde de la página si así lo deseamos.

Nota: Si, por cualquier razón, no quiere hacer que su cinta flote, entonces aplique la siguiente propiedad: display: inline-block;. Esto provocará que sea manejando como un elemento en linea (no rellenará a su elemento matriz: parent) aunque el mismo tiempo se comportará como un elemento block-level, lo cual le permitirá definir la anchura, altura, el padding, los márgenes, etc.

basic ribbon
Ya se ve bastante bien, ¿no le parece?

Paso 3: El Dobles

Vamos a añadir el doble al seleccionar el popular pseudo-selector CSS, :after. Aquí está...

add the fold
¿Lo ve?

Pero qué es exactamente esa extraña cosa como lámina que acabamos de hacer y, ¿cómo nos ayudará? Es un borde, de hecho, es el borde del fondo de nuestro pseudo-elemento :after, el cual hicimos con un grosor de 80px para hacerlo coincidir con la altura de nuestra cinta. Hemos cortado el borde en él en un ángulo de 45° al definir el borde adyacente derecho y dándole un deliberado fondo transparente (no es un truco muy común). Le hemos dado una anchura de 40px que determina el fin del rectángulo. El siguiente diagrama lo explicará mejor:

how the fold's made
Cómo está construido nuestro elemento

Paso 4: Voltear las Tablas

Habiendo construido un poco nuestro dobles, ahora necesitamos girarlo en su extremo. Para hacer eso, vamos a emplear las propiedades de transformación CSS3, así que lo rotaremos, de esta manera:

how the fold's rotated
¿Dónde estaría el mundo sin los diagramas?

Por defecto, al aplicar rotación al elemento lo hará girar alrededor de un eje central -necesitamos hacerlo rodar alrededor de su punto inferior derecho, es por eso que lo ubicamos en el fondo inferior de la cinta.

Aquí está la sintaxis actualizada con un montón de reglas especificas para los diferentes distribuidores de navegadores, esto con el fin de garantizar que todos los posibles navegadores se han tomado en cuenta:

Cada propiedad transform:rotate, hace girar nuestro objeto 90°. Cada propiedad transform-origin, declara que éste objeto ha sido rotado alrededor del punto inferior derecho.

¿Cómo luce?

rotated
¡Encantador!

Tenemos un sencilla, aunque efectiva cinta, que felizmente se reproducirá en los siguientes navegadores:

  • Firefox 3.5+
  • Opera 10.5
  • Safari 3.1+
  • Chrome
  • IE9

Cualquier versión inferior a la IE9, definitivamente hará que fracasen aún con las propiedades de transformación que hemos aplicado, aunque hay una solución en la forma de filtros MS. Sin embargo, no voy a profundizar en el tema de los filtros, pero si necesita satisfacer las necesidades para IE4 o mayor que esa versión, entonces revise CSS3 por favor! para ver un estupendo ejemplo de ellos en acción.


Paso 5: Caída de Sombras Oscuras

Para añadir algo de dimensión al efecto, vamos a colocar una sombra debajo de la tapa (aunque aún no sé cómo llamarla).

Podría ser más fácil si utilizáramos el pseudo elemento :before, de nuestra cinta y repetir más o menos lo que hicimos con :after, para crear una versión de color negro de la forma, luego rotar ligeramente el elemento y, asegurar que está colocado debajo del original (usando la propiedad z-index).

Aquí está lo que hemos conseguido:

shadow

Paso 6: Sutil, Verdaderamente Sutil

Probablemente, lo mejor será que disminuyamos el tono del efecto de esa sombra acortándola y jugando con su opacidad.

Hemos intercambiado el color del borde de #000000 por su RGBA equivalente, que es fino (en contraste) para todos los mencionados navegadores modernos, incluyendo IE9. Si usted quiere proveer código para las versiones anteriores de IE, entonces, una vez más, usted necesitará aplicar el efecto usando filtros MS. El siguiente fragmento de código es una muestra de cómo se hace:

Vamos a añadir una sombra paralela parecido a la misma cinta...

...lo cual nos da esto:

subtle shadow

Paso 7: Luz

Hemos elaborado una cinta efectiva y probablemente pueda que quiera usarla tal y como está. Aunque antes de llamarla un trato cerrado, solamente veamos un par de toques adicionales.

Aquí tenemos un sutil relleno de degradado sobre la cinta, completa con varios prefijos para los distribuidores de navegadores, y también la segunda opción background-color para los navegadores que no tienen soporte (es decir, versiones inferiores a IE10). También hemos añadido un destello de luz al fondo de la cinta con un borde claro.

Habiendo añadido un borde, hemos hecho efectivamente la cinta 1px más alto, así que necesitamos ajustar la cosa plegable tan solo un poco.

highlight

Paso 8: Mejoras Finales

Si quiere volverse realmente loco, ¿por qué no afinar el dobles? Es muy fácil hacerlo con una esquina redonda irregular y un poco de ajuste de posición.

Esa es la esquina con redondeada.

Y eso es todo para el plegable, además de la sombra, mejorarlo ligeramente hasta contar con la alteración.

rounded
Un sutil, aunque efectiva curva en la cinta.

Conclusión

¡Eso es todo! Ya no hay nada más que decir. Solamente pruebelo y permitame saber lo que piensa al respecto. Como siempre, ¡gracias por seguir!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.