Añadir elementos con :after y :before. Bandas decorativas | Oloblogger Desde que inventaron :before y :after , mi vida (y la de muchos otros) es mucho más fácil, hablando...

20 de septiembre de 2012

Añadir elementos con :after y :before. Bandas decorativas

Banda con pliegues CSS
Desde que inventaron :before y :after, mi vida (y la de muchos otros) es mucho más fácil, hablando en sentido figurado claro.

Y lo es por una de las posibilidades más explotadas de estos pseudoelementos, que no es otra que la de poder crear elementos complejos añadiendo cosas delante y detrás a una capa simple.

Lo de delante y detrás es también un decir, porque aunque en un principio estos son sus destinos naturales, la combinación con position hace posible que podamos situar esos elementos añadidos en cualquier parte.

Ahora veremos un ejemplo en el que crearemos una caja con forma de banda plegada por sus dos extremos para mostrar un rótulo en ella. Para los extremos usaremos el truco de la construcción de triángulos con bordes muy grandes de ancho y alto cero, parcialmente transparentes y como no, :before y :after.


Para la parte HTML usaremos esta estructura, que nos permitirá manejar de manera independiente la parte de texto gracias al span insertado. También podremos añadir dos cosas a la clase principal (.cinta) y otras dos a la subclase (.cinta span) para obtener el efecto de la imagen del principio.

<div class="cinta">
<span>TEXTO</span></div>


El resto ya es todo CSS. En primer lugar definimos la clase cinta con un tamaño determinado y un color de fondo al que -sólo por estética- se le ha añadido un degradado y unas rayitas. Esto sería el rectángulo principal y el position nos servirá para poder luego mover dónde nos convenga el resto de elementos:

.cinta {
position:relative;
width:300px;
height:50px;
margin:auto;
text-align:center;
border:1px solid darkblue;
background-color: blue;
background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-size: 4px 4px;
}


Ahora viene la parte izquierda. Añadimos a .cinta un cuadrado hecho con bordes al que le quitamos con un transparent el triángulo izquierdo.

.cinta:before {
content:" ";
position:absolute;
display:block;
width:0px;
height:0px;
top:11px;
left:-51px;
border-color:blue blue blue transparent;
border-style:solid;
border-width:25px;
}


Pero como veis, falta un detallito para conseguir el efecto deseado y ese no es otro que lo que se supone que es el pliegue de la banda. Como ya hemos añadido un elemento con :before, este otro lo añadimos con :after. Sería sólo un rectángulo hecho con bordes en el que la mitad está de un color y la otra mitad de otro. La parte superior más oscura para simular la sombra de profundidad.

.cinta:after {
content:"";
position:absolute;
display:block;
border-color:darkblue darkblue blue blue;
border-style:solid;
border-width:5px 10px 5px 10px;
top:51px;
left:-1px;
}


Por último asignamos propiedades al texto y repetimos el proceso anterior para el lado derecho. En esta parte utilizamos .cinta span como base para poder añadir otros dos elementos nuevos: el extremo y el pliegue...

.cinta span {
text-transform:uppercase;
font-family:arial;
font-size:30px;
font-weight:bold;
line-height:50px;
color: white;
text-shadow: 1px 2px 3px grey;
}
.cinta span:before {
content:" ";
position:absolute;
display:block;
width:0px;
height:0px;
top:11px;
right:-51px;
border-color:blue transparent blue blue;
border-style:solid;
border-width:25px;
}
.cinta span:after {
content:"";
position:absolute;
display:block;
border-color:darkblue blue blue darkblue;
border-style:solid;
border-width:5px 10px 5px 10px;
top:51px;
right:-1px;
}


Este es el resultado final y no mostramos una captura, sino puro CSS:


Cinta plegada


Lo más fácil es cambiar el color, pero evidentemente, cambiando los width, height, anchos de bordes y ajustando posiciones con top y left, podéis personalizar este tipo de bandas cómo queráis, aunque lo mejor es que inventéis otras cosas por vuestra cuenta.

Cinta plegada


Para los gradientes hemos utilizado esta útil herramienta generadora: Colorzilla

Si con el tema de los triángulos os habéis perdido, en una próxima entrega hablaremos más a fondo de ellos.

¿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

1 comentario :