21/03/2024

 

Utilizando las sombras CSS lograremos el efecto de biselado en botones, mensajes, contenedores.

Veremos 2 formas de aplicar este efecto, una utilizando bordes y otra implementando la propiedad box-shadow.

Con los bordes, encontraremos una forma más tradicional que nos permite que los bordes inferior y lateral derecho sean más oscuros simulando relieve.

HTML

<div class="biselado-outset">Texto</div>

.biselado-outset {

background: #2323ff; /*Fondo, debe ser más claro que el borde */

border: 5px outset #4444ff; /* Grosor del Borde */ /* Color del Borde */

color: white; /* Color del texto */

text-align: center; /* Alineación del texto */

text-shadow: -1px -1px rgba(0,0,0,.2);

}

O podemos lograr el efecto contrario, reemplazando la palabra outset que se encuentra antes del color del borde por inset.

Veamos ahora una manera más efectva de simular el biselado que se logra utilizando sombras (box-shadow).

<div class="biselado-shadow-outset">Soy un cuadro con biselado.</div>

.biselado-shadow-outset {

border: 1px solid #00cc00; /* Color del borde, debe ser más oscuro que fondo */

background: #00f400; /* Fondo */

border-radius: 6px; /* Bordes redondos */

box-shadow: inset 3px 3px 3px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.1), 2px 2px 10px rgba(0,0,0,.1);

text-shadow: 1px 1px 1px rgba(255,255,255,.9); /* Sombra del texto */

text-align: center; /* Alineación del texto */

}

<div class="biselado-shadow-inset">Soy un cuadro con biselado.</div>

.biselado-shadow-inset { border: 1px solid #00cc00; /*

Color del borde, debe ser más claro que fondo */

background:#00d800; /* Fondo */ color: #fff; /* Color del texto */

border-radius: 6px; /* Bordes redondos */

box-shadow:inset 2px 2px 4px rgba(120, 120, 120, .4), inset -3px -3px 3px rgba(255,255,255,.4);

text-shadow: 1px 1px rgba(0,0,0,.3); /* Sombra del texto */

text-align: center; /* Alineación del texto */ }

}

Este efecto no vendría nada mal para los botones...

 

 

.button-biselado-malva {
box-shadow:inset 3px 3px 3px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.1), 2px 2px 10px rgba(0,0,0,.1);
margin:10px auto;
padding:10px 0;
width:90px;
border:1px solid #9b9bff;
background:#7777ff;
font-size:18px;
text-align:center;
cursor:pointer;
text-shadow: -1px -1px rgba(0,0,0,.2);
border-radius:5px;
color:white;
}
.button-biselado:active {
text-shadow: 1px 1px rgba(0,0,0,.3);
background:#3d3dff;
box-shadow:inset 4px 4px 4px rgba(0,0,0,.3), inset -3px -3px 3px rgba(255,255,255,.2);
}

Así como usamos el biselado para mensajes y botones, puedes seguir experimentando para encontrarle más usos a este efecto. 

Vea también

• Botón biselado con CSS

 

Referencias

• Efecto biselado con CSS