Staff en línea
Últimos temas
[html] Tablon Desplegable Origin10[html] cambia el popup de notificación de mensaje privado por uno profesional
por Lelu Jue Nov 28, 2019 7:09 am

[html] Tablon Desplegable Origin10[html]Menú de enlaces simple
por Lelu Jue Nov 28, 2019 6:30 am

[html] Tablon Desplegable Origin10[html]Menú dinámico
por Lelu Jue Nov 28, 2019 6:11 am

[html] Tablon Desplegable Origin10[html]Escaparate de imágenes sencillo
por Lelu Jue Nov 28, 2019 6:02 am

[html] Tablon Desplegable Origin10[Duda] ModernBB vale la pena?
por mrsrz Miér Nov 27, 2019 9:57 am

[html] Tablon Desplegable Origin10[Ocio] Contemos hasta el 5000
por Fibo Miér Nov 27, 2019 9:19 am

 :: Modifica tu foro :: Templetes/HTML

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

#1
[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
RinC

¿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 :

1149


Me gusta :

200


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

Responder Mensaje privado
#2
Re: [html] Tablon Desplegable 
el Lun Mayo 15, 2017 7:14 pm
me servira mucho gracias
kuke
kuke

¿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


Volver arriba Ir abajo

Responder Mensaje privado

 En la misma categoria

 Temas relacionados

 :: Modifica tu foro :: Templetes/HTML

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