Logo Oxygen Builder How To

6 - Cómo hacer una cinta creativa en Oxygen Builder

Contenido

Estructura

Oxy How To Oxygen Builder
  • La estructura consiste en un DIV con una imagen como background
  • Dentro del DIV anterior otros dos donde vamos a poner las las cintas Izquierda y Derecha
  • En cada DIV un texto 

Codigo CSS

Oxy How To Oxygen Builder

El codigo CSS se pone en la propiedad Advanced - Custom CSS dentro de cada elemento

Para saber como hacerlo visita el siguiente link

Como poner código CSS personalizado dentro de Oxygen Builder

1 - Tarjeta

1.1 - Codigo Tarjeta


align-items: center;
text-align: center;
position:relative;
width:300px;
height:500px;
background-size:cover;
box-shadow:0 25px 50px 10px rgba(0,0,0,0.15); 
border-radius:20px;
justify-content: center;

2 - Cinta Izquierda

2.1 - Codigo Cinta Izquierda


position: absolute;
top:350px;
left: -15px;
width: 230px;
height: 50px;
background-color:rgba(85,169,203,0.40);
border-radius: 30px;
border-bottom-left-radius: 0;
justify-content: center;

2.2 - Codigo Cinta Izquierda :after


position:absolute;
top: 50px;
width:15px;
height:15px;
background-color:rgba(85,169,203,0.40);
z-index:1;

2.3 - Codigo Cinta Izquierda :before


position:absolute;
top: 50px;
width:15px;
height:30px;
background-color:rgba(85,169,203,0.95);
border-top-left-radius:20px;
border-bottom-left-radius:20px;
z-index:2;

Texto Izquierdo

2.4 - Codigo Texto Izquierdo


color:#011f4b;
font-size:20px;
font-weight:700;
padding-left:30px

3 - Cinta Derecha

Textro Izquierdo

3.1 - Codigo Cinta Derecha


position: absolute;
top: 430px;
right: -15px;
width: 230px;
height: 50px;
background-color:rgba(85,169,203,0.40);
border-radius: 30px;
border-top-right-radius: 0;
justify-content: center;

Textro Izquierdo

3.2 - Codigo Cinta Derecha :after


position:absolute;
top:-15px;
right:0px;
width:15px;
height:15px;
background-color:rgba(85,169,203,0.40);
z-index:1;

Textro Izquierdo

3.3 - Codigo Cinta Derecha :before


position:absolute;
top: -30px;
right:0px;
width:15px;
height:30px;
background-color:rgba(85,169,203,0.95);
border-top-right-radius:20px;
border-bottom-right-radius:20px;
z-index:2;

Textro Izquierdo
Texto Derecho

3.4 - Codigo Texto Derecho


color:#011f4b;
font-size:20px;
font-weight:700;
padding-left:60px

Diana Lee
Top Model

Codigo tarjeta final con imagen


align-items: center;
text-align: center;
position:relative;
width:300px;
height:500px;
background-size:cover;
/* Agregamos una imagen de fondo */
background-image: url(https://oxyhowto.com/
wp-content/uploads/2021/10/stock-photo-59190152.jpg);
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
box-shadow:0 25px 50px 10px rgba(0,0,0,0.15); 
border-radius:20px;
justify-content: center;

¿Te gustó?
¡Tómate un segundo para apoyarnos en PayPal o Patreon!

Oxy How To Oxygen Builder
Si tienes alguna sugerencia, háganoslo saber
sugerencias

Puedes compartirlo en:

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram