Acordeon Intercambioso con el PODER de CSS3 sin ningún script asociado

[Hectorsito20]

Presentacion del Tema!

Saludos para todos amigos de IV, en esta ocacion le traigo algo que quedaran con la boca abierta, puesto que HTML5 y CSS3 vieron a revolucionar la forma en que vemos el contenido en la web..

En este ejemplo no lo he creado en video por cuestiones de tiempo puesto que es muy laborioso y llevaria a hacer dos o tres videos y podria traer confusión a mi opinión, en el mismo veremos la Potencia de CSS3 empleando.. Filtros, degradados, y mucha más de las propiedades básicas de CSS, quiero recarcar que en las opciones que tiene ente simbolo: (/*esto*/) no pertenece al código por lo tanto no lo afecta para nada.. puesto que son comentarios HTML para poder definir que es cada cosa....

Si algunos de ustedes tiene problema al realizar ente ejemplo tan sorprendente y con las Nuevas Tecnoligías de CSS3.

quiero dejar una breve aclaraci'on sobre los navegadores que quiere decir cada atributo.

Ejemplos de Navegadores:

• -webkit- = Google Chrome
• -moz- = Mozilla Firefox
• -o- = Opera

He aquí el código HTML

Codigo HTML

<div class="AcordeonIntercambioSOS">
<ul>
<li>
<h3>Intercambios Warez</h3>
<div> Contenido para IW</div>
</li>
<li>
<h3>Intercambios Sentimentales</h3>
<div>Contenido para IS</div>
</li>
<li>
<h3>Intercambiosos</h3>
<div class="sos"><p>Buscador IntercambioSOS</p><br>
<input type="text" value="Busqueda en el Foro..." />
<input type="submit" value="Buscar" />
</div>
</li>
<li>
<h3>Intercambios Virtuales</h3>
<div class="InterVirt">En Busca del conocimiento...
<a href="http://www.intercambiosvirtuales.org/">Haz click aqui para acceder a la web de IV</a>
</div>
</li>
<li>
<h3>Hectorsito20</h3>
<div class="texto"> <p>Saludos para todos, he aqui la potencia de CSS3 espero y les sea de utilidad y que le saquen el mayor de los probecho como siempre
digo, "La creatividad no tiene limites, los limites los ponemos nosotros..." </p>
</div>
</li>
</ul>
</div>

Estilos CSS del Tema.

Estilos CSS

<style>
.AcordeonIntercambioSOS>ul { /* este es el DIV contenedor que dimensionamos y en este caso lo centramos (ojo esto no es del codigo es un comentario para aclarar que es cada cosa :D ) */
margin: 0;
padding: 0;
list-style:none;
height: 300px;
}
.AcordeonIntercambioSOS>ul>li { /* definimos cada elemento de la lista (osea de los elementos "li") */
display: block;
float: left;
height: 300px;
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
width: 40px;
/* la parte personalizable */
background:#303941;
transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-webkit-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
}

.AcordeonIntercambioSOS>ul>li>h3 { /* el titulo de cada pestaña pueden poner las que quieran solo puse 5 con relacion a la web y demas :D */
display: block;
float: left;
margin: 0;
padding: 10px;
height: 19px;
width: 280px;
/* la parte personalizable */
border-left: 1px solid #303941;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
text-transform: uppercase;
color: #000;
background:#CCC;
white-space: nowrap;
/* los efectos para los diferentes navegadores */
-moz-transform: rotate(90.0deg) translate(-40px,0px);
-moz-transform-origin: 0 100%;
-o-transform: rotate(90.0deg) translate(-40px,0px);
-o-transform-origin: 0 100%;
-webkit-transform: rotate(90.0deg) translate(-40px,0px);
-webkit-transform-origin: 0 100%;
transform: rotate(90.0deg) translate(-40px,0px);
transform-origin: 0 100%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotat ion=1.0) progid:DXImageTransform.Microsoft.gradient(startCo lorstr=#ff999999, endColorstr=#ffcccccc);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rota tion=1.0)" "progid:DXImageTransform.Microsoft.gradient(startC olorstr=#ff999999, endColorstr=#ffcccccc)";
background: -moz-linear-gradient( top, #999999, #cccccc);
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
}
.AcordeonIntercambioSOS>ul>li>div { /* el contenido oculto osea lo que no vemos hasta que hacemos hover sobre el elemento */
display: none;
float: left;
height: 280px;
margin: 0;
overflow: auto;
padding: 10px;
position: relative;
width: 320px;
left: 40px;
top: -40px;
}
.AcordeonIntercambioSOS>ul>li:hover { /*en esta parte es donde se hace el efecto que se despliega al poner el cursor del ratón encima repito ojo con los comentarios no son parte del codigo... :D*/
overflow: hidden;
width: 380px;
}
.AcordeonIntercambioSOS:hover>ul>li:hover>div {
display: block;
}
.AcordeonIntercambioSOS:hover>ul>li:hover>h3 { /* efecto hover sobre los títulos */
background: #000;
color: #FFF;
background: -moz-linear-gradient( top, #454545, #000000);
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotat ion=1.0) progid:DXImageTransform.Microsoft.gradient(startCo lorstr=#ff454545, endColorstr=#ff000000);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rota tion=1.0)" "progid:DXImageTransform.Microsoft.gradient(startC olorstr=#ff454545, endColorstr=#ff000000)";
}
.AcordeonIntercambioSOS>ul>li>h3:hover {
cursor: pointer;
}
.texto{
color:#ffffff;
font-size:20px;
text-align:justify;
}
.InterVirt{
color:fff;

.InterVirt a{
text-decoration:none;
color:white;

.sos p{
color:#fff;
}
</style>

Deberia quedar esto:




Video demostración del Proyecto.



He insertado una imagen porque la verdad esque no se como insertar el código para que se vea el resultado final que es muy dinámico..


La creatividad no tiene límites, los límites los tenemos nosotros!