{"id":7688,"date":"2022-04-04T10:12:46","date_gmt":"2022-04-04T10:12:46","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7688"},"modified":"2022-04-04T10:45:44","modified_gmt":"2022-04-04T10:45:44","slug":"como-aplicar-sombras-a-un-contenedor-o-div-con-css","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/como-aplicar-sombras-a-un-contenedor-o-div-con-css\/","title":{"rendered":"C\u00f3mo aplicar sombras a un contenedor o div con CSS"},"content":{"rendered":"

En este art\u00edculo vas a descubrir como\u00a0aplicar sombras a un contenedor, caja o div <\/strong>utilizando la nueva propiedad\u00a0box-shadow<\/strong>\u00a0de\u00a0CSS3<\/strong>.<\/p>\n

A las cajas o contenedores se les puede dar una sombra exterior o interior para darle un efecto flotante o pulsado.<\/p>\n

Sombra exterior<\/h2>\n

Empezar\u00e9 con la sombra exterior que, popularmente, es la m\u00e1s utilizada.<\/p>\n

Es un tipo de sombra que hace qua las cajas o contenedores de tu sitio Web pareciera que estuvieran flotando o d\u00e1ndoles el sol desde un costado.<\/p>\n

En el ejemplo en funcionamiento te he creado un <div> con una clases \u00absombra\u00bb:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"sombra"<\/span>><\/span>Sombra Interior<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Para darle los siguientes estilos con el objetivo de aplicar una sombra exterior:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
.sombra<\/span> {<\/span>\n    box-shadow:<\/span> 5px<\/span> 5px<\/span> 15px<\/span> gray<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Resultado:<\/p>\n
\"Sombra<\/p>\n
Lo que quiero darte a conocer en este art\u00edculo es la propiedad \u00abbox-shadow\u00bb que justamente permite a\u00f1adir una sombra a tu div, caja o contenedor.<\/p>\n
A la propiedad \u00abbox-shadow\u00bb le puedas dar 4 valores.<\/p>\n
En orden tienen el siguiente significado:<\/p>\n