Marco "outerglow" para una imagen

Lucky_Sky · #1 (**permalink**) 14/12/2011, 14:00

Buenas, tengo este código :

Código:

.novedades{
	width:920px;
	float: left;
	margin-left: 14px;
}
img.img_left{
float:left;
padding:0px 8px 8px 0px;
}
.offer_box_novedad2{
	width:390px;
	height:126px;
	float:left;
	background-color:#CFFFB9;
	padding:10px;
	margin:7px;	
}
.offer_info{
padding:5px;
}
.offer_info span{
	font-weight:bold;
	color:#260;
}
p.offer{
text-align:justify;
font-size:10px;
}
.more{
float:right;
padding:3px;
}
.price{
float:left;
padding:3px;
}
.more a{
	color:#260;
}
.more a:hover{
text-decoration:none;
}

Código PHP:

  <div class="novedades"> 
          <div class="offer_box_novedad2" style="margin-left:30px;"> 
                <a href="detalle.php"><img src="img.jpg" width="158" height="119" class="img_left" alt="" title="" border="0"/></a> 
                <div class="offer_info"> 
                <span>POBLACI&Oacute;N (PROVINCIA)</span> 
                <p class="offer" style="margin-top:15px; margin-bottom:15px;"> 
                 LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. NUNC CONDIMENTUM IMPERDIET ANTE, AC PULVINAR TURPIS. 
                </p> 
                <div class="more"><a href="detalle.php">...m&aacute;s</a></div> 
 
                <div class="price"><span>Oferta : 80.000&nbsp;&euro;</span></div> 
              </div> 
          </div> 
          </div>

y me gustaría que sobre esa imagen (que en realidad está sacada de una bd) apareciera como un marco "difuminado"
he probado intentando ponerle una imagen del mismo tamaño con el marco brillante encima, pero no he podido
¿alguna idea?

Gracias!!!

kseso? · #2 (**permalink**) 14/12/2011, 14:21

¿Podría poder una imagen de qué es exactamente lo que quiere lograr?
En un principio pensé que sería algo que se pudiese simular con box-shadow, pero al leer "he probado intentando ponerle una imagen del mismo tamaño con el marco brillante encima" me he despistado.

Lucky_Sky · #3 (**permalink**) 14/12/2011, 14:27

Básicamente lo que quiero conseguir es esto:

Teniendo en cuenta que la imagen está sacada de una base de datos, por lo que no puedo editarla.

emprear · #4 (**permalink**) 14/12/2011, 17:01

un poco complicado el no poder editar la imagen.
Podés intentar con esto, pero la condición es que tu imágen sea un fondo, asi que deverías implementar otro div que la contenga

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
.sombra_in {
   -moz-box-shadow:inset 0 0 10px 30px #FFF;
   -webkit-box-shadow:inset 0 0 10px 30px #FFF;
   box-shadow:inset 0 0 10px 30px #FFF;
   background-image: url(uno.jpg);
   width: 300px;
   height: 300px;
}
 
/*]]>*/
</style>
</head>
<body>
<div class="sombra_in">
 
</div>
</body>
</html>

Saludos

jguaman90 · #5 (**permalink**) 14/12/2011, 21:41

también se puede aplicar a imágenes directamente,
http://www.css3.info/preview/box-shadow/

div es un elemento para agrupar y disponer contenido.

En este caso la imagen debería estar como tal (<img>) ya que no es parte del estilo del sitio, si no mas bien del contenido.

Saludos desde Chile

emprear · #6 (**permalink**) 14/12/2011, 22:55

Error. box-shadow no se puede aplicar a un tag img

jguaman90 · #7 (**permalink**) 14/12/2011, 23:46

¿porque no?

http://www.w3.org/TR/css3-background/#the-box-shadow

http://www.dynamicdrive.com/style/csslibrary/item/css3_box_shadows_box_shadow_property/

emprear · #8 (**permalink**) 15/12/2011, 00:06

http://foros.emprear.com/css/box-shadow/

jguaman90 · #9 (**permalink**) 15/12/2011, 00:26

uhhm cierto.
La razón por la que no "funciona" con inset, es porque esta se renderiza tras la imagen, siendo invisible, puedes ver que la sombra si se ve al ser exterior.

para solventar eso, se hace lo que indicas tu, lo tendré en cuenta.
http://trentwalton.com/2010/11/22/css-box-shadowinset/

saludos!

Lucky_Sky · #10 (**permalink**) 15/12/2011, 05:56

Entonces supongo que si aplico lo que me pone emprerar, la imagen de fondo del div la tengo que declarar como <div class="outerglow" style="background-image:url(

Código PHP:

<? echo $url;?>)

>
¿no?

Lucky_Sky · #11 (**permalink**) 15/12/2011, 06:15

me queda el código tal que así :

.imagen_outerglow{
-moz-box-shadow:inset 0 0 10px 30px #FFF;
-webkit-box-shadow:inset 0 0 10px 30px #FFF;
box-shadow:inset 0 0 10px 30px #FFF;
float:left;
padding:0px 8px 8px 0px;
}

<div class="imagen_outerglow" style="height:119px; width:158px; background-image:url(fotos/S106/thumbs/img796580_1[2] [800x600].jpg);">

y se ve el brillo pero no la imagen

NOTA:
acabo de comprobar que con una imagen no sacada de la bd, funciona perfectamente, así que supongo que el problema estará en la url de la imagen sacada..

NOTA2:
Parece ser que el problema es el espacio del nombre de la imagen...

emprear · #12 (**permalink**) 15/12/2011, 07:23

es muy probable, intentá poner el nombre entre comillas simples

url('nombre de la foto.jpg');

Saludos

kseso? · #13 (**permalink**) 15/12/2011, 08:12

Efectivamente, la sombra en la imagen con valor inset no se muestra.
Tampoco creo muy acertado colocar la imagen como fondo, pues es una información relevante. Es parte del contenido, no del diseño, ornamental.
Por otro lado, el colocarla como background implicaría que habría que definir tantas clases (ids) como productos mostrados. Lo que conllevaría aumentar no sólo el css sino también el código programado.

Así que aquí una idea:

Código HTML:

Ver original<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Kseso? jugando con css</title>
<style type="text/css">
.novedades{
    width:920px;
    float: left;
    margin-left: 14px;
}
img.img_left{
  float:left;
  z-index:1;
}
a.pic_detalle {
    display: block;
    float: left;
    margin-right: 10px;
    overflow: hidden;
    position: relative;
}
a.pic_detalle::after {
    background: transparent;
    box-shadow: 0 0 10px #000000 inset;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 5;
}
.offer_box_novedad2{
    width:390px;
    height:126px;
    float:left;
    background-color:#CFFFB9;
    padding:10px;
    margin:7px; 
}
.offer_info{
padding:5px;
}
.offer_info span{
    font-weight:bold;
    color:#260;
}
p.offer{
text-align:justify;
font-size:10px;
}
.more{
float:right;
padding:3px;
}
.price{
float:left;
padding:3px;
}
.more a{
    color:#260;
}
.more a:hover{
text-decoration:none;
}
</style>    
</head>
<body>
<div class="novedades">
          <div class="offer_box_novedad2" style="margin-left:30px;">
                <a class="pic_detalle" href="detalle.php"><img src="Capturatt.JPG" width="158" height="119" class="img_left" alt="" title="" border="0"/></a>
                <div class="offer_info">
                <span>POBLACI&Oacute;N (PROVINCIA)</span>
                <p class="offer" style="margin-top:15px; margin-bottom:15px;">
                 LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. NUNC CONDIMENTUM IMPERDIET ANTE, AC PULVINAR TURPIS.
                </p>
                <div class="more"><a href="detalle.php">...m&aacute;s</a></div>
 
                <div class="price"><span>Oferta : 80.000&nbsp;&euro;</span></div>
              </div>
          </div>
          </div> 
</body>
</html>

Sin entrar en la depuración del código, ni tampoco en que quizás sería más indicado una lista desordenada o de definición (ul |ol)

Notas:
El efecto no es exactamente el deseado. Quizás se pueda mejorar añadiendo más valores (múltiples) en box-shadow para simularlo mejor. Y por supuesto cambiar el color al mismo que tiene el contenedor general (#CFFFB9)

emprear · #14 (**permalink**) 15/12/2011, 08:44

Cita:

Iniciado por kseso?

Tampoco creo muy acertado colocar la imagen como fondo, pues es una información relevante. Es parte del contenido, no del diseño, ornamental.

Creo que si estamo usando HTML5, esto lo subsanaría

Código HTML:

Ver original<figure title="Descripción foto">
<div class="sombra_in">
<!-- foto -->
</div>
</figure>

Saludos

Lucky_Sky · #15 (**permalink**) 15/12/2011, 10:09

Cita:

Iniciado por emprear

es muy probable, intentá poner el nombre entre comillas simples

url('nombre de la foto.jpg');

Saludos

lo solucioné así :
$url=str_replace(" ","%20",$regfoto['url']);

en cuanto a lo de no ponerla como fondo del div, creo que no he entendido muy bien lo que me sugerís...

emprear · #16 (**permalink**) 15/12/2011, 10:29

mirá el ejemplo
http://foros.emprear.com/css/box-shadow/

Lucky_Sky · #17 (**permalink**) 15/12/2011, 11:26

Cita:

Iniciado por emprear

mirá el ejemplo
[url]http://foros.emprear.com/css/box-shadow/[/url]

así es como lo he solucionado, pero tengo la imagen de fondo del div

emprear · #18 (**permalink**) 15/12/2011, 11:43

justamente esa es mi solución, ponerla como fondo del div (por lo menos, en particular, para este efecto con inset) y no como img.

kseso? · #19 (**permalink**) 15/12/2011, 15:33

@emprear:
creo que no me expliqué bien.

No me refería a que fuese correcto o no (en función de qué doctype se declare) su propuesta.
Era una manifestación de mis preferencias. O de lo que yo creo que es más acertado.
Soy de los que opinan que todo aquello que sea contenido (información) debería colocarse en el html.
Y todo aquello que sea ornamental (parte del layout o maquetación) vía css.
Así que como yo veo esa imagen como parte de la información facilitada a los posibles compradores de la "oferta" por eso mi enfoque a que esté vía img src.

A lo 2ª que decía sobre tantos #id´s como ofertas mostradas (para poder poner una imagen distinta en cada oferta) es porque presupuse que no sólo habrá 1 oferta (y siempre la misma). Por esto mismo me refería al uso de listas.
Vamos, que mi propuesta era para el siguiente caso:

La imagen sin redimensionar por el foro para que se aprecie un poco mejor el glow: http://img543.imageshack.us/img543/783/glowcss.jpg

El css, ahora ya con un poco más de tiempo para lograr el glow, es básicamente el mismo de mi anterior comentario:

Código CSS:

Ver originala.pic_detalle {
    display: block;
    float: left;
    margin-right: 10px;
    position: relative;
}
a.pic_detalle::after {
    background: transparent;
    box-shadow: 0 0 10px 10px #CFFFB9 inset;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 5;
}

Y el marcado con listas:

Código HTML:

Ver original<dl id="novedades">
    <dt>NOVEDADES</dt>
      <dd>
        <a class="pic_detalle" href="detalle.php"><img src="loast-tags.jpg" width="158" height="119" class="img_left" alt="alt" /></a>
        <p> LOREM IPSUM DOLOR SIT AMET.</p>
        <a class="more_info" href="#">Más Información</a>
       </dd>
       
      <dd>
        <a class="pic_detalle" href="detalle.php"><img src="301923114.jpg" width="158" height="119" class="img_left" alt="alt" /></a>
        <p> LOREM IPSUM DOLOR SIT AMET</p>
        <a class="more_info" href="#">Más Información</a>
       </dd>
       
      <dd>
        <a class="pic_detalle" href="detalle.php"><img src="t0alt.jpg" width="158" height="119" class="img_left" alt="alt" /></a>
        <p> LOREM IPSUM DOLOR SIT AMET</p>
        <a class="more_info" href="#">Más Información</a>
       </dd>
 </dl>

Que lo bueno de los enfoques distintos es que se encuentras diferentes soluciones y así se puede escoger.

emprear · #20 (**permalink**) 15/12/2011, 16:23

Cita:

@kseso?
Que lo bueno de los enfoques distintos es que se encuentras diferentes soluciones y así se puede escoger.

Completamente de acuerdo.

Y como observación general, según sea el post, trato de dar una solución puntual, válida, y sencilla de implementar. Es más, ni siquiera vi todo el bloque de código en su conjunto, cosa que vos si hiciste en detalle, y te tomaste el trabajo de ejemplificar.

Saludos