Cinta realista con CSS

En esta ocasión vamos a ver la forma de hacer con CSS una especie de banderín para un rótulo, pero añadiendo efectos de degradados y algunas sombras con el fin de que el resultado tenga algo más de realismo que otras que construimos anteriormente.

Como no podía ser de otra manera, vamos a usar :after y :before para poder ir añadiéndole cosas y así conseguir los detalles que nos ofrecerán el resultado que veis a la derecha.


El HTML sería este: una clase para el cuerpo principal, otra para la barra y un contenedor de todo el conjunto.

<div class="contcinta">
<div class="barra"></div>
<div class="cintaver"></div>
</div>

Comenzamos por formar el cuerpo principal con las medidas deseadas y un degradado con varios puntos de cambio que darán la sensación de que la cinta está algo ondulada.

Para esto último me vino bien tener a mano Ultimate CSS Gradient Generator, utilidad que además nos permite incorporar compatibilidad para casi todos los navegadores. Aquí por no ser muy extenso sólo incluí el estándar, pero en el fuente podéis ver que usé más prefijos para la demo del final.

.cintaver {
position:relative;
width:150px;
height:150px;
background: #9a0808;
background: linear-gradient(to bottom, #9e0b0b 0%,#bf3624 3%,#9a0808 13%,#9a0808 18%,#c43b29 60%,#bc2e1e 74%,#9a0808 100%,#9a0808 100%);
}

---

Para añadir la capa correspondiente a la parte inferior, usamos :before y damos estilo para generar cuatro triángulos juntos, tres opacos y uno transparente. Esto se explicó con más detalle en un post anterior sobre cómo hacer triángulos CSS. Ahora sólo hacemos transparente el inferior y los demás serán del color del extremo de la caja principal.

.cintaver:before {
position:relative;
top:150px;
display:block;
width:0;
height:0;
border-width: 75px;
border-style:solid;
border-color:#9A0808 #9A0808 transparent #9A0808;
content:"";
}

Como veis, con top lo desplazamos bajo su contenedor padre (cintaver) tanto como mida el alto de este. El ancho de los bordes que generan los triángulos será la mitad del ancho total que necesitamos.

---

Ahora con un :after y posicionando absolutamente, añadimos otra parte más que es la que pinta los pespuntes laterales y el texto. En el content irá el texto que queremos mostrar y las puntadas de hilo los simulamos con bordes discontinuos a derecha e izquierda (dashed).

La altura total de estos elementos será la suma de la caja principal y la del extremo (los triángulos añadidos con :before). El ancho será un poco menor para que estos elementos queden dentro de la cinta y no lleguen a los bordes, desplazándolos con un pequeño left para situarlos centrados.

.cintaver:after {
position:absolute;
top: 0;
left: 8px;
padding: 40px 0 0 0;
width: 130px;
height:250px;  
border-right: 2px dashed #cc3D29;
border-left: 2px dashed #cc3D29;  
color:#880000;         
content: "OLO BLOGGER";  
text-align:center;
text-shadow: 1px 0px  #cc3d29;
font:normal bold 24px/26px arial, serif;
}

---

Ya casi estamos. Lo que hacemos ahora es dar propiedades al contenedor general con el ancho y alto del conjunto, centrando e incorporando un margen inferior para salvar el tamaño de la punta de la cinta que sacamos del flujo normal.

.contcinta {
position:relative;
margin:0 auto;
margin-bottom: 70px;
width:150px;
height:250px;
}

Y a continuación una sombra que arranque tras la barra que pondremos al final y que una vez más añadimos con :before. Si no ponemos barra habrá que corregir el top y la altura para que ocupen todo el alto.

.contcinta::before {
position: absolute;
top:60px;
left: 147px;
display: block;
width: 3px;
height: 228px;
box-shadow: 1px 5px 10px 3px black;
content: "";
}

---

Ahora sí. Creamos una barra con una caja simple con bordes redondeados y un degradado. El position:absolute; nos sirve para colocarlo exactamente dónde queremos.

.barra {
position: absolute;
top: 1px;
left: -125px;
display: block;
margin: 0 auto;
width: 400px;
height: 70px;
border-radius:30px;
background: #1d262b;
background: linear-gradient(to bottom, #1d262b 0%,#565d60 57%,#757a7f 74%,#28343b 100%);
box-shadow: 5px 1px 5px #333;
}

Ya está listo el asunto. Poniendo junto en vuestra hoja de estilo todo lo anterior, uno a continuación de otro, sólo tendréis que añadir el HTML dónde gustéis poner el banderín:

Variantes de estilo y usos, los que queráis.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter