Staff en línea

[html] Tablon Desplegable
Tema iniciado por y Añadir a favoritos

[html] Tablon Desplegable 
el Sáb Nov 26, 2016 5:14 pm
staff
[codebox]Tablón informativo desplegable. En el demo está bastante extenso, para poder usarlo debe adecuarse el temaño. Si no sabes hacerlo, puedes abrir un tema para pedir soporte. Demo [/codebox]

[hidecode]
Código:
<h1>Tablón de anuncios</h1>
<ul>
  <li>
    <input name="accordion" type="radio" checked>
    <i></i>
    <h2>Tabla 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis augue metus, ut venenatis arcu dignissim non. Sed sed orci mauris. </p>
  </li>
  <li>
    <input name="accordion" type="radio">
    <i></i>
    <h2>Tabla 2</h2>
    <p>Integer posuere eleifend massa, et faucibus sapien accumsan et. Morbi convallis risus erat, sit amet fringilla mi maximus sed. Nulla aliquam nunc ac convallis sollicitudin. Vestibulum ac ultrices tellus, id finibus tellus. Etiam id libero enim</p>
  </li>
  <li>
    <input name="accordion" type="radio">
    <i></i>
    <h2>Tabla 3</h2>
    <p>Integer posuere eleifend massa, et faucibus sapien accumsan et. Morbi convallis risus erat, sit amet fringilla mi maximus sed. Nulla aliquam nunc ac convallis sollicitudin. Vestibulum ac ultrices tellus, id finibus tellus. Etiam id libero enim</p>
  </li>
</ul>

.transition, p, ul li i:before, ul li i:after {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.flipIn, h1, ul li {
  -webkit-animation: flipdown 0.5s ease both;
          animation: flipdown 0.5s ease both;
}

.no-select, h2 {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}



body {
  min-height: 0;
  display: inline-block;
  position: relative;
  left:25%;
  margin: 10px 0;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  box-shadow: 0 10px 0 0 #3ad6b9 inset;
  background-color: #fefffa;
  max-width: 450px;
  padding: 30px;
}
@media (max-width: 550px) {
  body {
    box-sizing: border-box;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    max-width: 100%;
    min-height: 100%;
    margin: 0;
    left: 0;
  }
}

h1, h2 {
  color: #3ad6b9;
}

h1 {
  text-transform: uppercase;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: 3px;
  font-weight: 100;
}

h2 {
  font-size: 26px;
  line-height: 34px;
  font-weight: 300;
  letter-spacing: 1px;
  display: block;
  background-color: #fefffa;
  margin: 0;
  cursor: pointer;
}

p {
  color: rgba(48, 69, 92, 0.8);
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  -webkit-transform: translate(0, 50%);
          transform: translate(0, 50%);
  margin-top: 0;
  z-index: 2;
}

ul {
  list-style: none;
  -webkit-perspective: 900;
          perspective: 900;
  padding: 0;
  margin: 0;
}
ul li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 18px;
  border-top: 1px dotted #dce7eb;
}
ul li:nth-of-type(1) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
ul li:nth-of-type(2) {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
}
ul li:nth-of-type(3) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
ul li:last-of-type {
  padding-bottom: 0;
}
ul li i {
  position: absolute;
  -webkit-transform: translate(-6px, 0);
          transform: translate(-6px, 0);
  margin-top: 16px;
  right: 0;
}
ul li i:before, ul li i:after {
  content: "";
  position: absolute;
  background-color: #3ad6b9;
  width: 3px;
  height: 9px;
}
ul li i:before {
  -webkit-transform: translate(2px, 0) rotate(45deg);
          transform: translate(2px, 0) rotate(45deg);
}
ul li i:after {
  -webkit-transform: translate(-2px, 0) rotate(-45deg);
          transform: translate(-2px, 0) rotate(-45deg);
}
ul li input[type=radio] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
ul li input[type=radio]:checked ~ p {
  margin-top: 14px;
  max-height: 800px;
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
ul li input[type=radio]:checked ~ i:before {
  -webkit-transform: translate(-2px, 0) rotate(45deg);
          transform: translate(-2px, 0) rotate(45deg);
}
ul li input[type=radio]:checked ~ i:after {
  -webkit-transform: translate(2px, 0) rotate(-45deg);
          transform: translate(2px, 0) rotate(-45deg);
}


[/hidecode]
RinC
avatar

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

789


Puntos :

1147


Me gusta :

198


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [html] Tablon Desplegable 
el Lun Mayo 15, 2017 7:14 pm
me servira mucho gracias
kuke
avatar

¿Que estoy pensando? :

diseñar y hacer amigos[table class=fecha_up][td]Se modifico:14/8/15 - 1:07 hrs.[/td][/table]


Banner en temas :

https://cherieroedirksen.files.wordpress.com/2012/11/a-new-dawn-facebook-cover.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

120


Puntos :

208


Me gusta :

40


ingreso :

27/07/2015


Sexo :

Masculino

Plataforma :

punBB


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.