Crear cintas [ribbons] con CSS

Ayer os comentaba un excelente tutorial de Read Team design sobre como crear un menu con CSS3.

Hoy os traigo otro tutorial sobre la creación de Ribbons.

Si, seguramente ahora mismo os esteis preguntando que es un Ribbon.
La traducción de Ribbon es cinta, pero puede que aún así no nos hagamos a la idea de que son… así que, como siempre, una imagen vale más que mil palabras.

cinta de ejemplo

Porque necesito usar Ribbons?

La primera pregunta que se nos puede pasar es, porque puedo necesitar Ribbons?
La verdad es que la primera vez que los ves, no parecen la gran cosa… esa opinión quizás cambie cuando veais la demo ;)

Mis respuestas son:

  • No hay imagenes, no hay peticiones http extra!
  • Flexibilidad, podemos crear una estructura base y a partir de ella crear diferentes ribbons
  • Facil de actualizar, colores, tamaños, etc
  • Añadele CSS3 a los Ribbons y te encantarán :)

Estructuras de los ribbons

Voy a usar las imágenes del post original por falta de tiempo para crear unas propias…

Lo primero que vamos a necesitar es dar un espacio entre nuestra caja contenedor y el margen, porque? simplemente porque los ribbons sobresalen nuestras cajas y por ello necesitamos dejar un margen extra… digamos, 20px.

muestra del espacio

Ahora tenemos que decidir que elemento vamos a usar para el Ribbon, en este caso un h1.. pero puede ser cualquier otro.

como se ve el heading...

Ahora que tenemos la estructura nos falta hacer que la cinta sobresalga de nuestra caja.
Hace un momento hablamos de los 20px del padding.
Bien, ahora tenemos que contrarrestar esos 20px, lo que nos dejará en la linea de la caja y agregarle 10px más para provocar la salida.

h1
{
  margin: 0 -30px; /* top:0, right:-30px, bottom:0, left:-30px */
}

Ahora que tenemos la cinta salida, volvemos a acudir a los triangulos en css que usamos en el tutorial anterior.

h1{
        text-align: center;
        position: relative;
        color: #fff;
        margin: 0 -30px 30px -30px;
        padding: 10px 0;
        text-shadow: 0 1px rgba(0,0,0,.8);
        background: #5c5c5c;
        background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image:  linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        -moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
        -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
        box-shadow: 0 2px 0 rgba(0,0,0,.3);
    }

    h1:before, h1:after
    {
        content: '';
        position: absolute;
        border-style: solid;
        border-color: transparent;
        bottom: -10px;
    }

    h1:before
    {
        border-width: 0 10px 10px 0;
        border-right-color: #222;
        left: 0;
    }

    h1:after
    {
        border-width: 0 0 10px 10px;
        border-left-color: #222;
        right: 0;
    }

Con estos pasos ya tenemos un resultado decente:

el resultado final del ribbon

Ahora solo nos queda darle el formato que nosotros queramos. Podeis ver en la demo diferentes formatos que hemos usado y también revisar los códigos descargando el ejemplo


Demo OnlineClic para ver la demo! Archivos EjemploDescargate el ejemplo!

Soporte de navegadores

Como es normal en esta area, no todos los navegadores están preparados para soportar las características de CSS3.

IE6 e IE7 no soportan los pseudo-elementos pero, si los necesitamos se puede remplazar :before y :after con los elementos span de html.

IE8, IE9, IE10, Firefox, Opera, Chrome y Safari muestran bien los ribbons. Hay algunas diferencias menores entre ellos, pero por el soporte incompleto de algunos navegadores.

Articulo original de read-team-design.com

Así nos han encontrado!

  • ribbon css3
  • como hacer ribbons
  • css3 ribbon
  • css ribbons
  • ribbons css 3
  • css3 ribbons
  • ribbon css

One Response to Crear cintas [ribbons] con CSS

  1. […] Demo                Ribbons […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">