sábado, 8 de junio de 2013

Caja con animaciones Java
(A petición de algunos amigos)

   Muchos de vosotros me habéis preguntado sobre la caja  en la que aparece un gráfico interactivo java, pues bien aquí va la explicación:
Lo primero, los efectos de los que me nutro los encontrareis en esta pagina:  http://www.dhteumeuleu.com/index

Una vez allí elegís el efecto que os guste y le dais a la flecha de arriba, después a Source, de Main html file, copiáis la dirección html para poder colocarla dentro del código  que os dejo a continuación:

<iframe src="http://www.dhteumeuleu.com/AQUI LA URL COPIADA" width="440" height="300"
   scrolling="no" frameborder="0">
   [su navegador no soporta marcos]
</iframe>
<a href="http://www.dhteumeuleu.com/" target="blank"><img src="https://lh3.googleusercontent.com/-Mj4Ea5UXJXk/T_MLTBtHHBI/AAAAAAAACsA/GpLdBsJ5-98/s512/1341328207216.png" width="440" height="40"/></a>


Todo esto, naturalmente, lo colocáis en un gadget HTML/Javascript

Podréis variar el tamaño en width="EL TAMAÑO DESEADOheight="EL TAMAÑO DESEADO"

Conseguido:

martes, 4 de junio de 2013

Algo a la vista
pero
escondido

Esta es una manera de tener algo a la vista pero escondido, me ha gustado el efecto, la barra y que dentro de ella puede introducirse casi cualquier cosa. Encontré esta moneria, como no, en mi página preferida de CSS:


EL CODIGO
<style type="text/css"> div.css3droppanel { /* Aqui modificando el valor de los dos margin es posible variar el tamaño y la posicion de la barra */ position: relative; margin: 0; margin-bottom: 1em; /* margin with rest of content on page */ } div.css3droppanel > div { /* Content DIV DIV inside wrapper */ height: 10px; /* initial height of content when hidden. Should be same height as bottom bar (see div.css3droppanel:after) */ padding: 5px; -moz-box-sizing: border-box; /* ensure any padding and border declared inside content DIV doesn't increase DIV's declared dimensions */ -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; background: #FFDCD0; /* EL COLOR DE FONDO DEL INTERIOR */ position: relative; opacity: 0; -moz-transition: all 0.2s ease-in-out 0.1s; /* CSS3 transition of UL state. Last 0.1s specifies delay before animation */ -o-transition: all 0.2s ease-in-out 0.1s; /* instead of ease-in-out, also try cubic-bezier(0.25, 0.1, 0.25, 1.4) instead */ -webkit-transition: all 0.2s ease-in-out 0.1s; transition: all 0.2s ease-in-out 0.1s; } div.css3droppanel:after { /* Add bottom bar beneath wrapper */ content: ''; display: block; bottom: 0; position: absolute; width: 100%; height: 10px; /* variando este valor modificareis el grosor de la barra ir probando */ background: #2F3D4A; /* COLOR DE LA BARRA */ } div.css3droppanel input[type="checkbox"] { /* style invisible checkbox element used to toggle state of push down panel */ position: absolute; right: 50px; /* right position of checkbox */ width: 60px; /* width of checkbox */ height: 42px; /* height of checkbox */ bottom: -34px; /* bottom offset of checkbox */ z-index: 10; cursor: pointer; opacity: 0; } div.css3droppanel input[type="checkbox"]:checked ~ div { /* when checkbox is checked, expand content within wrapper */ height: 350px; /* LA EXTENSION DEL INTERIOR EN VERTICAL */ opacity: 1; overflow: auto; } div.css3droppanel label { /* style label that's positioned below wrapper's bottom bar, and will toggle checkbox when interacted with */ position: absolute; /* varia estos valores y veras lo que pasa variar el boton*/ right: 50px; /* right position of label */ width: 60px; /* width of label */ height: 42px; /* height of label */ bottom: -34px; /* bottom offset of label */ border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; cursor: pointer; z-index: 5; background: #2F3D4A; /* COLOR DEL BOTON */ } div.css3droppanel label:hover { /* style of label when mouse rolls over it */ box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset, 0 0 15px rgba(255,255,255,0.8) inset; } div.css3droppanel label:after { /* generated down arrow */ content: ''; position: absolute; display: block; width: 0; height: 0; border: 12px solid transparent; border-color: white transparent transparent transparent; top: 18px; left: 18px; box-shadow: 0 0 7px gray inset; } </style> <!--[if lte IE 8]> <style> /* Hide panel from IE8 and below */ div.css3droppanel { display: none; } </style> <![endif]--> <div class="css3droppanel"> <input type="checkbox" id="paneltoggle" /> <label for="paneltoggle" title="Click to open Panel"></label> <div class="content"> <!--panel content goes here--> <p>AQUI EL TEXTO O LO QUE QUIERAS</p> <p> Resources: <a href="http://www.dynamicdrive.com/style">DD CSS Library</a>, <a href="http://www.cssdrive.com">CSS Drive</a>, <a href="http://www.javascriptkit.com">JavaScript Kit</a>. </p> <!-- end panel content --> </div> </div>

Por ultimo indicaros que si queréis tener varias barras es menester variar en cada uno de los lugares donde aparezca la palabra css3droppanel podeis por ejemplo numerarla (css3droppanelnº) y repetir el proceso, estoy segura que hay alguna otra manera más eficaz y sencilla pero no la se, esta funciona.