Cómo crear efecto de imagen con CSS

  • Autor Autor eic2010
  • Fecha de inicio Fecha de inicio
E

eic2010

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola quisiera saber si alguien sabe como puedo hacer este efecto de imagen con css
 

Adjuntos

  • Screenshot_2020-08-19-02-14-07-1.webp
    41,4 KB · Visitas: 86
Me uno a la pregunta
 
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
 
Si me das apertura yo te lo hago gratis 😉
 
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%;
}
 

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
 
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+
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

¿Cómo crear efecto de voz como en este video?
Respuestas
9
Visitas
468
xxrankuxx
¿Cómo lograr efecto de imagen al hacer scroll en Elementor?
Respuestas
3
Visitas
280
Annet cambar
Cómo darle este efecto a una imagen
Respuestas
2
Visitas
81
oscarau
Cómo crear un efecto de luz en forma no intrusiva
Respuestas
5
Visitas
202
Sandia
Cómo crear el efecto de movimiento en TikTok con CAPCUT
Respuestas
2
Visitas
181
Mesho
Menú
Acceder
Registro