E
eic2010
Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
M
mxra8
Gamma
Verificado por Whatsapp
Un contenedor arriba de la imagen y un box shadow interno
jsfiddle.net
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
jsfiddle.net
M
Musking2020
Curioso
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Me uno a la pregunta
E
eic2010
Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Un contenedor arriba de la imagen y un box shadow interno
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
Desde ya gracias por responder pero esa sombra esta detras de la imagen y la que quiero hacer parece que tiene que estar delante de la imagen
M
mxra8
Gamma
Verificado por Whatsapp
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
jsfiddle.net
Es lo mismo pero diferente 😛
EricK Bueno
Ómicron
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
Hay varios themes que tienen la opción de sombra, o lo que puedes es agregar los CSS, uno de esos themes es NewsPaper de TagDiv, es más puedes usar los post con un degradado o una capa de colores
E
eic2010
Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
Es lo mismo pero diferente 😛
me parece mas acertado!!! gracias!!! ahora tengo que ver como lo hago desde wordpress quiero darle ese efecto a las imagenes destacada.
M
mxra8
Gamma
Verificado por Whatsapp
Si me das apertura yo te lo hago gratis 😉
E
eic2010
Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde ya muchas gracias con tu ayuda lo pude conseguir!!!
les dejo para si alguien lo necesita en wordpress
agregue dentro de <div class='post-thumb'>
</div>
<div id="shadow">
</div>
y luego en
css adicional
.post-thumb {
position: relative;
box-sizing: border-box;
background: transparent linear-gradient(180deg,#00000000 0%,#000000 100%) 0% 0% no-repeat padding-box;
height: 100%;
}
#shadow {
position: absolute;
bottom: 0;
left: 0;
background: transparent linear-gradient(180deg,#00000000 0%,#000000 100%) 0% 0% no-repeat padding-box;
width: 100%;
height: 150px;
}
.post-thumb img {
width: 100%;
}
les dejo para si alguien lo necesita en wordpress
agregue dentro de <div class='post-thumb'>
</div>
<div id="shadow">
</div>
y luego en
css adicional
.post-thumb {
position: relative;
box-sizing: border-box;
background: transparent linear-gradient(180deg,#00000000 0%,#000000 100%) 0% 0% no-repeat padding-box;
height: 100%;
}
#shadow {
position: absolute;
bottom: 0;
left: 0;
background: transparent linear-gradient(180deg,#00000000 0%,#000000 100%) 0% 0% no-repeat padding-box;
width: 100%;
height: 150px;
}
.post-thumb img {
width: 100%;
}
Baires23
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Un contenedor arriba de la imagen y un box shadow interno
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
Usa este codigo y modifica lo siguiente:
CSS:
#supercontainer {
position: relative;
box-sizing: border-box;
width: 379px;
background: transparent linear-gradient(180deg,#ffffff00 0%,#ffffff 100%) 0% 0% no-repeat padding-box;
height: 100%;
}
#shadow {
position: absolute;
bottom: 0;
left: 0;
background: transparent linear-gradient(180deg,#ffffff00 0%,#ffffff 100%) 0% 0% no-repeat padding-box;
width: 100%;
height: 150px;
}Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
jsfiddle.net
EspErpENto
Mi
Verificación en dos pasos activada
Verificado por Whatsapp
box-sizing: border-box es una propiedad moderna que muchos navegadores todavía no soportan.
Así que lo correcto es:
-webkit-box-sizing: border-box; Para dar soporte a Safari y Chrome
-moz-box-sizing: border-box; para Firefox
box-sizing: border-box; para Opera, IE8+
Así que lo correcto es:
-webkit-box-sizing: border-box; Para dar soporte a Safari y Chrome
-moz-box-sizing: border-box; para Firefox
box-sizing: border-box; para Opera, IE8+
Temas similares
