Tema: lograr este borde
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 17/12/2009, 07:47
pod1221
 
Fecha de Ingreso: diciembre-2009
Mensajes: 43
Antigüedad: 14 años, 4 meses
Puntos: 0
Respuesta: lograr este borde
Cita:
Iniciado por willyfc Ver Mensaje
veamos, ese tipo de borde(sombreado), con CSS2.1 no se puede lograr, es necesario utilizar una imagen que la haces en cualquier editor gráfico.
Suponiendo que tengo una imagen para el fondo como la siguiente:



que mide 800px de ancho incluyendo la sombra.

El truco consiste en recortar una parte de la imagen para que se repita en el eje-y, en el caso de la img de ejemplo bastará con recortar un pedacito de la img que mida 800px por 2px y ponerla de fondo del contenedor principal.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Documento sin t&iacute;tulo</title>
  6. <style type="text/css">
  7. body{color:#FFF;}
  8. #contenedor_principal{width:800px; margin:0 auto; background:url(imagenes/fondo.png) repeat-y;}
  9. p{padding:15px;}
  10. </style>
  11. </head>
  12.  
  13. <body>
  14. <div id="contenedor_principal">
  15.     <p>Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido </p>
  16.     <p>
  17.     Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido Aqui va todo el contenido 
  18.     </p>
  19. </div>
  20. </body>
  21. </html>

teniendo como resultado esto:



gracias por todo me re sirvio te lo agradesco.