E
eic2010
Beta
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
Foi útil? Participe da conversa
Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.
Leva 30 segundos · você volta a este tópico ao terminar
M
mxra8
Gamma
Un contenedor arriba de la imagen y un box shadow interno
jsfiddle.net
JSFiddle - React, Tailwind, and code Playground
JSFiddle - Test your React, Tailwind, JavaScript, CSS, HTML online with JSFiddle.
jsfiddle.net
M
Musking2020
Curioso
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Me uno a la pregunta
E
eic2010
Beta
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Un contenedor arriba de la imagen y un box shadow interno
JSFiddle - React, Tailwind, and code Playground
JSFiddle - Test your React, Tailwind, JavaScript, CSS, HTML 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
JSFiddle - React, Tailwind, and code Playground
JSFiddle - Test your React, Tailwind, JavaScript, CSS, HTML online with JSFiddle.
jsfiddle.net
Es lo mismo pero diferente 😛
EricK Bueno
Ómicron
Verificado
Verificación en dos pasos activada
Usuário 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
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
JSFiddle - React, Tailwind, and code Playground
JSFiddle - Test your React, Tailwind, JavaScript, CSS, HTML 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
Si me das apertura yo te lo hago gratis 😉
E
eic2010
Beta
Usuário com poucas negociações! Use sempre o saldo do 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 Binance
Un contenedor arriba de la imagen y un box shadow interno
JSFiddle - React, Tailwind, and code Playground
JSFiddle - Test your React, Tailwind, JavaScript, CSS, HTML 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;
}JSFiddle - React, Tailwind, and code Playground
JSFiddle - Test your React, Tailwind, JavaScript, CSS, HTML online with JSFiddle.
jsfiddle.net
EspErpENto
Mi
Verificación en dos pasos activada
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+
Tópicos similares
