Tema: Marco "outerglow" para una imagen
Ver Mensaje Individual
  #13 (permalink)  
Antiguo 15/12/2011, 08:12
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: Marco "outerglow" para una imagen
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
  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Kseso? jugando con css</title>
  5. <style type="text/css">
  6. .novedades{
  7.     width:920px;
  8.     float: left;
  9.     margin-left: 14px;
  10. }
  11. img.img_left{
  12.   float:left;
  13.   z-index:1;
  14. }
  15. a.pic_detalle {
  16.     display: block;
  17.     float: left;
  18.     margin-right: 10px;
  19.     overflow: hidden;
  20.     position: relative;
  21. }
  22. a.pic_detalle::after {
  23.     background: transparent;
  24.     box-shadow: 0 0 10px #000000 inset;
  25.     content: "";
  26.     left: 0;
  27.     position: absolute;
  28.     right: 0;
  29.     top: 0;
  30.     bottom: 0;
  31.     z-index: 5;
  32. }
  33. .offer_box_novedad2{
  34.     width:390px;
  35.     height:126px;
  36.     float:left;
  37.     background-color:#CFFFB9;
  38.     padding:10px;
  39.     margin:7px; 
  40. }
  41. .offer_info{
  42. padding:5px;
  43. }
  44. .offer_info span{
  45.     font-weight:bold;
  46.     color:#260;
  47. }
  48. p.offer{
  49. text-align:justify;
  50. font-size:10px;
  51. }
  52. .more{
  53. float:right;
  54. padding:3px;
  55. }
  56. .price{
  57. float:left;
  58. padding:3px;
  59. }
  60. .more a{
  61.     color:#260;
  62. }
  63. .more a:hover{
  64. text-decoration:none;
  65. }
  66. </style>    
  67. </head>
  68. <body>
  69. <div class="novedades">
  70.           <div class="offer_box_novedad2" style="margin-left:30px;">
  71.                 <a class="pic_detalle" href="detalle.php"><img src="Capturatt.JPG" width="158" height="119" class="img_left" alt="" title="" border="0"/></a>
  72.                 <div class="offer_info">
  73.                 <span>POBLACI&Oacute;N (PROVINCIA)</span>
  74.                 <p class="offer" style="margin-top:15px; margin-bottom:15px;">
  75.                  LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. NUNC CONDIMENTUM IMPERDIET ANTE, AC PULVINAR TURPIS.
  76.                 </p>
  77.                 <div class="more"><a href="detalle.php">...m&aacute;s</a></div>
  78.  
  79.                 <div class="price"><span>Oferta : 80.000&nbsp;&euro;</span></div>
  80.               </div>
  81.           </div>
  82.           </div> 
  83. </body>
  84. </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)