Hola
Adelsork:
Sí, con javascript puedes hacer muchísimos efectos visuales: cambiar de tamaño, de colores, de borde... de todas las propiedades CSS, y en tiempo de ejecución.
Te dejo un ejemplo de lo que pides para que observes su funcionamiento:
Código PHP:
<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
</style>
</head>
<body>
<a href="#" onclick="crece('capaOculta', 400, 250); return false;">¿quieres leerlo?</a>
<div id="capaOculta" style="display:none; position: absolute; top: 150px; left: 400px; background-color:red; overflow: hidden;">Nulla pulvinar neque laoreet turpis. Phasellus nibh mi, adipiscing sed, fringilla in, pharetra non, libero. Donec a augue bibendum ante sollicitudin malesuada. Duis at elit quis turpis ornare hendrerit. Suspendisse fringilla. Integer suscipit neque ut leo. Vestibulum eleifend urna sit amet pede. Suspendisse pellentesque, lacus at lacinia aliquet, diam metus posuere est, laoreet pretium ipsum est ac libero. Proin consectetuer aliquam tortor. Sed dignissim felis pharetra urna. Fusce nibh. Quisque quam lorem, egestas ut, auctor in, consequat a, ipsum. In elementum dolor ac metus. Proin cras amet.<br/><br/><a href="#" onclick="decrece(this.parentNode); return false;">cierra</a></div>
<script type="text/javascript">
<!--
// document.getElementById abreviado
function $(x) { return document.getElementById(x); }
function crece(id, w, h) {
var capa = $(id);
var creciendo = setInterval( function() {
if(capa.style.display==='none') {
capa.style.display = 'block';
capa.style.width = "1px";
capa.style.height = "1px";
}
else {
var anchoActual = parseInt( capa.style.width );
var altoActual = parseInt( capa.style.height );
if( anchoActual < w )
capa.style.width = (anchoActual+=2) +"px";
if( altoActual < h )
capa.style.height = (altoActual+=2) +"px";
if( anchoActual>=w && altoActual>=h )
clearInterval(creciendo);
}
}, 1);
}
function decrece(capa) {
var decreciendo = setInterval( function() {
var anchoActual = parseInt( capa.style.width ) - 2;
var altoActual = parseInt( capa.style.height ) - 2;
if( anchoActual<0 ) anchoActual = 0;
if( altoActual<0 ) altoActual = 0;
if( anchoActual > 0 )
capa.style.width = (anchoActual) +"px";
if( altoActual > 0 )
capa.style.height = (altoActual) +"px";
if( anchoActual<=0 && altoActual<=0 ) {
capa.style.display = 'none';
clearInterval(decreciendo);
}
}, 1);
}
// -->
</script>
</body>
</html>
Un saludo
