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.