Cinta realista con CSS | Oloblogger En esta ocasión vamos a ver la forma de hacer con CSS una especie de banderín para un rótulo, pero a...

4 de octubre de 2012

Cinta realista con CSS

Banda vertical realista 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
Copy URL

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

follow us in feedly

11 comentarios :

  1. Muy bueno. A ver el uso que le dan.

    ResponderEliminar
  2. ;_; Soy nueva y torpe, no me sale la bandera, solo me salen los códigos a un lado de mi blog D: Que hago?

    ResponderEliminar
  3. Igual, no soy bueno en esto, pero como inserto ese banderín a mi blog???

    ResponderEliminar
  4. Contesto a ambos, Lamierda y Rafael.

    El primer trozo es HTML y lo normal es que lo añadáis en la barra lateral como gadget tipo HTML/JavaScript.

    La otra parte es CSS y tenéis dos opciones. Una es añadirlo en la plantilla entre las etiquetas SKIN. La otra que es la que os recomiendo, sería ponerlo en ese mismo gadget que cite antes, pero metiendo todo entre etiquetas STYLE de esta manera:
    <style type="text/css">
    AQUÍ IRÍA TODO EL CÓDIGO CSS
    </style>

    ResponderEliminar
  5. Hola oloman.
    Hace días que buscaba algo similar para el blog.
    ¿Cómo debería hacer para poner el banderín encima de cada imagen de las entradas? La temática es de libros y me viene de lujo añadirlo a las imágenes para señalar los leídos...
    El tamaño sabría modificarlo, pero no consigo ponerlo justo encima, se me desplaza la foto hacia abajo...

    Saludos y gracias por tu ayuda :)

    ResponderEliminar
    Respuestas
    1. No entiendo lo que quieres hacer exactamente porque quizás sería más práctico poner una imagen simple como marca...

      Eliminar
  6. Hola Oloman.
    Gracias por responder.
    Al final superpuse un texto a la imagen, que creo que era a lo que te referías, sin nada de CSS (que me trae de cabeza).

    Muchas gracias por todo y aquí seguiré aprendiendo ;-)

    ResponderEliminar
    Respuestas
    1. Más o menos... :D

      El CSS tiene sus utilidades, pero en este caso era más bien una curiosidad que podría ser práctica sólo en muy pocas ocasiones.

      Eliminar
  7. Consulta Amigo...se te ve en internet explorer 8? porque a mi no...

    ResponderEliminar
    Respuestas
    1. No te sabría decir porque yo perdí mi versión 8 de Explorer y ahora me da pereza instalarla de nuevo. Quizás es porque algún estilo de los que tienes en tu CSS interfiere con los de esta "imagen".

      Eliminar