Sombra sobre la imagen

[bbrian]

Hola a todos, necesito saber como ponerle una sombra arriba de la imagen asi se entienden las letras, les dejo una foto de lo que necesito:



Gracias !

[danielkvaldez]

HOLA disculpa la propuesta, pero yo opacaría la foto en la parte inferior en photoshop, si tu problema es que se lea mejor, suerte

[jorgeabreo]

Iniciado por bbrian

Hola a todos, necesito saber como ponerle una sombra arriba de la imagen asi se entienden las letras, les dejo una foto de lo que necesito:

[URL=http://www.subirimagenes.com/otros-sombra-7686782.html][IMG]http://s2.subirimagenes.com/otros/previo/thump_7686782sombra.jpg[/IMG][/URL]

Gracias !

Hola,

Creo que tienes dos opciones,

1. Opacidad CSS
2. Imagen semitransparente. (PNG)

1. Bueno el primer punto es sencillo, ese div donde tienes la información en texto le pones un background-color negro, y también opacity: de "0.7" por ejemplo.

El opacity permitirá que ese contenedor se vuelva semitransparente, y al tener un color de fondo negro, mostrara el efecto que deseas...

2. El punto 2 es con imagen, diseña un cuadrito de 4px por 4px por ejemplo, ese cuadrito lo diseñas de color negro, y en el programa de diseño le pones una opacidad de 80 o 70%, la exportas en png para conservar la transparencia, y luego a ese div o contenedor, le pones esa imagen semitransparente de fondo, y también simulara ese efecto.

Son las dos opciones que se me ocurren, yo haría la 1, pero es cuestión de gusto,

Saludos!

[Naahuel]

¿Opacar la parte inferior en photoshop? Pésima idea. Más si se tratase de un sistema autoadiministrado, donde las imágenes son obtenidas de la base de datos.

Yo haría algo así:

Posible HTML:

Código HTML:

<div class="contenedor-imagen">
        <img src="http://placekitten.com/600/300" alt="" />
        <div class="epigrafe">
            <h2>Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, ephesiorum quod non dum veniens indica enim materiam ad quia. </p>
        </div>
    </div>
 

Posible CSS:

Código CSS:

*{
        /* Pequeño reset - ignorar - */
        margin: 0;
        padding: 0;
    }
    
    .contenedor-imagen,
    .contenedor-imagen img{
        /* Tanto al contenedor como a la imagen
        le damos posición relative */
        position: relative;
        /* El z-index es para ubicar la imagen debajo del texto */
        z-index: 10;
        /* Las dimensiones son necesarias, para que nada salga de lugar */
        width: 600px;
        height: 300px;
    }
    .epigrafe{
        /* posicionamiento del epigrafe */
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        
        background: #000; /* fallback, para navegadores viejos */
        background: rgba(0,0,0,0.5); /* negro con 50% de transparencia */
        
        /* Estilos adicionales, para que quede bonito */
        font-family: Helvetica, sans-serif;
        color: #FFF;
        padding: 20px;
    }
    .epigrafe h2{
        font-family: Times New Roman, serif;
    }
    .epigrafe p{
        font-size: 12px;
    }
 

Fijate que el color de la caja es primero negro en HEXA y después con RGBA. Esto es porque no todos los navegadores soportan RGBA, entonces se quedan con el valor anterior en HEXA que es un negro sólido. Lo que podés hacer también es usar un pequeño PNG con transparencia alpha del 50% que se repita de fondo también, que funcionaría en más navegadores.

Demo: http://jsbin.com/adediq

[bbrian]

Gracias a todos por sus respuestas, probe con la tuya Naahuel me parecio interesante pero no la pude hacer funcionar. Es como vos decis debe ser con css porque utilizo wordpress y a las imagenes las cambio diariamente y no podria estar modificandolas con photoshop.
Te muestro mi codigo no se que esto haciendo mal, a ver si me podes ayudar...
Aca esta la imagen en php:

Código PHP:

     <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php
$values = get_post_custom_values("Image"); echo $values[0]; ?>&w=580&h=315&zc=1&q=100"
alt="<?php the_title(); ?>" class="left" width="580px" height="315px"  /></a>  

Yo lo que hice fue agregarle esto a ese codigo: <div class="contenedor-imagen"> </div>

Y logicamente agregue el css, al style.css... Lo tomo porque cambio el tamaño de la imagen por 600px x 300px, como en el codigo, pero nunca aparecio la sombra y no hubi ningun cambio.
En que le estoy errando? Espero tu respuesta.
Muchas gracias a todos!

[Naahuel]

Pero ahí tenés sólo la imagen...

Debería ser algo así:

Código PHP:

<div class="contenedor-imagen">
    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>&w=580&h=315&zc=1&q=100" alt="<?php the_title(); ?>" class="left" width="580px" height="315px"  /></a>
    <div class="epigrafe">
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <p><?php the_excerpt(); ?></p>
    </div>
</div>
 

Si lo tenés online en algún lado pasános un link, sería más fácil.

[bbrian]

En este momento no estoy en la pc. Está subido acá: www.charruaafull.com.ar
Lo podes ver? Saludos

[bbrian]

Naahuel:
Lo pude hacer, si queres ver como quedo entra al link que te pase anteriormente.
Muchas gracias !!!