Crear sección liquida expansible, con esquinas redondeadas usando CSS + mootools toggle effect
Un agradable tutorial en woork que explica como diseñar una bonita sección expansible con esquinas redondeadas en su parte superior izquierda, superior derecha, inferior izquierda, inferior derecha, utilizando CSS y a la cual le añadiremos un efecto que queda realmente bien “Efecto Toggle basado en mootools”, que nos permite básicamente esconder o volver a mostrar el contenido de dicha sección. Me pareció una forma muy practica para mostrar nuestro “about”, pero prácticamente aplicado de la forma correcta quedara bien con casi todo lo que deseemos usarlo.
Ver mi Demo - Descarga Mi demo - Ver demo Original - Ampliar info en woork
Instalar:
Descargamos los archivos necesarios, y realizamos el llamado correspondiente a ellos. Añadiendo dentro de nuestra etiqueta < head > el siguiente código.
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('section');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
Y por ultimo nuestro html, donde añadiremos el contenido.
<a href="#" id="toggle">My Section</a>
</span></h2>
<div id="section">
<div>
<!-- Your content here -->
</div>
</div>
En base a esto, con un poco de CSS se pueden lograr cosas muy bonitas y funcionales. En el ejemplo que he modificado y dejado para que descarguen, podrán ver un poco el código por dentro que seguramente les dará un poco de ideas. De todas formas, siéntanse libres de usarlo tal como esta.
