Foros del Web - Ver Mensaje Individual

willyfc · #8 (**permalink**) 17/12/2009, 07:16

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<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
body{color:#FFF;}
#contenedor_principal{width:800px; margin:0 auto; background:url(imagenes/fondo.png) repeat-y;}
p{padding:15px;}
</style>
</head>
 
<body>
<div id="contenedor_principal">
    <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>
    <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 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>
</div>
</body>
</html>

teniendo como resultado esto: