Staff en línea
Últimos temas
[html] Tablon Desplegable Origin10[recursos] Pack Rangos
por PeruxD Ayer a las 4:37 am

[html] Tablon Desplegable Origin10[recursos] Placas de Staff mejoradas para foros
por PeruxD Ayer a las 4:27 am

[html] Tablon Desplegable Origin10[Ocio] Contemos hasta el 5000
por citrato Mar Jul 14, 2020 9:47 am

[html] Tablon Desplegable Origin10[ayuda] Cambiar titulos de foros y estadisticas por una imagen
por angiemg Mar Jul 14, 2020 9:29 am

[html] Tablon Desplegable Origin10[html] Imagen para separar anuncios globales, notas, anuncios, etc de los temas normales.
por angiemg Lun Jul 13, 2020 4:21 pm

[html] Tablon Desplegable Origin10[CSS] Decorando la navbar ó menú del indice
por angiemg Dom Jul 12, 2020 11:37 pm

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

Maldita cuarentena... :/ [table class=fecha_up][td]Se modifico:8/04/20 - 17:29 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

792


Puntos :

1156


Me gusta :

202


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.