Ver Mensaje Individual
  #9 (permalink)  
Antiguo 17/07/2008, 19:17
Avatar de Mikmoro
Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Borde degradado

Mira un ejemplo hecho con una sóla imagen.

Este es el código:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title></title>
<style type="text/css">
* { margin: 0;padding: 0;}
body {margin: 50px;}
.caja {float: left;}
.uno {width: 123px;}
.dos {width: 271px;}
.sup_der, .sup_izq, .inf_der, .inf_izq {background: url(img/big_box.gif) no-repeat;}
.sup_der {background-position: right top;}
.sup_izq {margin: 0 10px 0 -2px;}
.inf_der {background-position: right bottom; margin-top: -5px!important; margin-top: -13px; z-index:0; position: relative;}
.inf_izq {background-position: left bottom; height: 10px; margin: 0 10px 0 -2px;}
img {margin: 10px 0px 0px 10px; z-index:10; position: relative;}
p {padding: 12px; margin: 0px;}
</style>
</head>
<body>
<div class="caja uno">
<div class="sup_der">
<div class="sup_izq">
<img src="img/1.jpg" />
</div>
</div>
<div class="inf_der">
<div class="inf_izq"></div>
</div>
</div>

<div class="caja dos">
<div class="sup_der">
<div class="sup_izq">
<img src="img/bloque.png" />
</div>
</div>
<div class="inf_der">
<div class="inf_izq"></div>
</div>
</div>

<div class="caja tres">
<div class="sup_der">
<div class="sup_izq">
<p>Una caja de texto de muestra</p> <p>Una caja de texto de muestra</p>
<p>Una caja de texto de muestra</p>
<p>Una caja de texto de muestra</p>
<p>Una caja de texto de muestra</p>

</div>
</div>
<div class="inf_der">
<div class="inf_izq"></div>
</div>
</div>
</body>
</html>
EDITO: porque lo he mejorado un poquillo.

Mikel.

Última edición por Mikmoro; 18/07/2008 a las 04:56