0

Estoy tratando de hacer algo similar a esto en CSS. ¿Alguna sugerencia de como podría hacer esos bordes y ese sombreado?

Gracias de antemano

introducir la descripción de la imagen aquí

2
  • 1
    border-radius y box-shadow son tus amigos
    – josanangel
    Commented el 7 dic. 2020 a las 16:51
  • La idea es ayudarte a aclarar las dudas que tengas con tu código, no hacerte el trabajo, muestra lo que has logrado para ver que te hace falta
    – Elboy
    Commented el 7 dic. 2020 a las 17:10

3 respuestas 3

2

Puedes hacer esto, usar la propiedad de css box-shadow offset-x | offset-y | color con estos parámetros puedes indicar la dirección de la sombra y el color, hay mas opciones las cuales las puedes revisar en enlace

<!DOCTYPE html>
<html>
<head>
<style> 
body {
  background-color: #a6d6d65e;
}

#example2 {
  background-color: white;
  border: 1px;
  padding: 10px;
  box-shadow: 0px 10px #88888859;
  border-radius: 5px;
}

</style>
</head>
<body>

<button id="example2">
  Hojas de Ruta
</button>


</body>
</html>

0
1

Paso a explicarte, La idea principal de los bordes es que no exista el mismo, sino por medio de box-shadow este adquiere su propio borde, para poder redondearlo vas a necesitar un border-radius a la caja con la cual estas trabajando en este caso

border-radius:0px 0px 8px 8px;

Para el box-shadow podrías utilizar solamente la distribución x - y , Igual nunca queda mal añadirle su profundidad y su grado de degrades, te recomendaría utilizar algo como box-shadow: 1px 3px 5px 13px rgba(0, 0, 0, 0.3);. Si observas que la cantidad de sobra no es suficiente podes ir modificando el Alfa desde 0.3 a 0.7!.

0

Puedes utilizar las propiedades -webkit-box-shadow y box-shadow para realizar la sombra y el difuminado del color. Te comparto un pequeño ejemplo.

<!DOCTYPE html>
<html>
    <head>
        <style> 
            body {
                background-color: #e7eff2;
            }
            #caja {
                width: 30%;
                text-align: left;
                font-size:20px;
                background-color: white;
                padding: 15px;
                -webkit-box-shadow: 0px 8px 4px 0px rgba(197,210,213,0.59); 
                box-shadow: 0px 8px 4px 0px rgba(197,210,213,0.59);
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <div id='caja'>
            Hojas de Ruta
        </div>
    </body>
</html>

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.