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
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>
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!.
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>
border-radius
ybox-shadow
son tus amigos