Conectarse

Recuperar mi contraseña

Últimos temas
» 27/07/2016 SF
Miér Jul 27, 2016 11:40 am por Kuroki

» Angelina | Angelus
Lun Mar 14, 2016 11:54 pm por Kuroki

» Arger black
Lun Mar 14, 2016 11:52 pm por Kuroki

» Alice Pruss
Lun Mar 14, 2016 11:51 pm por Kuroki

» Hey Mama! {widgets}
Sáb Feb 20, 2016 6:30 pm por Kuroki

» 20/02/2016 SF
Sáb Feb 20, 2016 6:24 pm por Kuroki

» Prueba 1 Prueba 1
Dom Sep 06, 2015 8:47 am por Kuroki

» CSS 27/08/15 SF
Jue Ago 27, 2015 7:41 am por Kuroki

» You've got mail~
Mar Ago 18, 2015 7:46 pm por Kuroki

Nombre
Rango
MensajePerfil
CRÉDITOS
Skin “Shine!” creado por Runa XIII e inspirado en la colección de tablillas de NympheaKeep it simple”. Un agradecimiento especial para Nymphea por su consentimiento. Paleta de color “198 Celebration!” por alfarroba en ColorLovers. Un agradecimiento especial a la Asistencia de Foroactivo y los tutoriales de Savage Themes y The Captain Knows Best.


Wild Clove

Ver el tema anterior Ver el tema siguiente Ir abajo

Wild Clove

Mensaje por Kuroki el Miér Jun 03, 2015 11:35 pm



HTML
Código:
<table>
   <tr>
    <td><div id="cajagrande"><div id="cajita1"><div style="width: 180px;height: 140px;overflow: auto;">Vestibulum ornare adipiscing aliquet. Integer enim purus, molestie vel ultrices eget, blandit eget urna. Pellentesque egestas tincidunt vulputate. Pellentesque mauris nisi, feugiat pellentesque eros et, auctor consectetur neque. Morbi venenatis massa non erat gravida, a ullamcorper metus volutpat. Nunc justo erat, fringilla ac lorem sit amet, rhoncus pharetra ligula. Vivamus cursus mi sit amet mauris sollicitudin, et sagittis nisi aliquam. Sed et vestibulum velit, et luctus turpis. Nunc sollicitudin nunc ipsum, id interdum massa dictum a. Aenean fringilla velit magna, vel rutrum nisi sagittis non. Integer eget sapien vitae velit gravida blandit. Sed a pretium purus. Phasellus scelerisque aliquet imperdiet. Maecenas varius tellus sit amet molestie consequat. Etiam leo sem, varius ac ipsum eu, vulputate semper justo.
</div><div class="namecaja" style="padding-top: 16px;">Historia</div></div>
    </div></td>
      <td><div id="cajagrande2"><div id="cajita2"><div style="width: 230px;height: 150px;overflow: hidden;"><table><tr><td><div id="staff"><div class="staff1" style="background-image: url(http://placehold.it/150x60)"><div class="staff2"><p>Admin<br><a href="">MP</a></p></div></div></div></td><td><div class="CajaEncima" style="background-image: url(http://placehold.it/80x60)"><div class="CajaDebajo"><br>Mod<br><a href="">MP</a></div></div></td></tr><tr><td><div id="staff"><div class="staff1" style="background:url(http://placehold.it/150x60);"><div class="staff2"><p>Admin<br><a href="">MP</a></p></div></div></div></td><td><div class="CajaEncima" style="background-image: url(http://placehold.it/80x60)"><div class="CajaDebajo"><br>Mod<br><a href="">MP</a></div></div></td></tr> </table></div>
 <div class="namecaja">Staff</div></div>
    </div></td><td><div id="cajagrande"><div id="cajita1"><div style="width: 180px;height: 150px;overflow: auto;"><div id="linksexy"><a href="link" class="" target="_blank" rel="nofollow">Link 1</a></div><br><div id="linksexy"><a href="link" class="" target="_blank" rel="nofollow">Link 2</a></div><br><div id="linksexy"><a href="link" class="" target="_blank" rel="nofollow">Link 3</a></div><br><div id="linksexy"><a href="link" class="" target="_blank" rel="nofollow">Link 4</a></div></div><div class="namecaja">Enlaces</div></div></div></td></tr></table><center><a href="http://matryoshka.foroac.com/" style="font: 10px calibri; text-transform: uppercase; letter-spacing: 2px; width: 200px; color: #000;padding: 5px;background: #CFD0AF;">Eniozu © Matryoshka</a></center>

<link href="http://fonts.googleapis.com/css?family=Dawning+of+a+New+Day|Terminal+Dosis+Light&v1" rel="stylesheet" type="text/css">

CSS
Código:
.staff1{
  width:150px;
  height:60px;
  position:absolute;
  background-position:center;
  overflow:hidden;
  transition:ease-in-out 0.6s;
}#staff{
  width:100px;
  height:60px;
  position:relative;
}

.staff1:hover{
  width:230px;
margin: auto;  transition:ease-in-out 0.5s;
  z-index:0;
}
.staff2 {background:#7F6473; margin-left: 150px; width: 70px; height: 70px; padding: 5px;}

.staff2 p {text-align: center;
font: 12px terminal dosis light;
text-transform: uppercase;
  letter-spacing: 1px;color: #fff;
}
.staff2 a {background: #000; height:15px;display: block; width: 64px; text-aling: center; padding: 1px; color: #fff; font-size: 10px; text-decoration: none;}

 
.staff3 {
width: 80px; height: 60px; margin-left: 48px;opacity:0;
}
.staff3:hover {
 background:#ddd;transition:ease-in-out 0.5s; opacity:1;
}.CajaDebajo:hover {
    opacity: 1;
}
.CajaDebajo { transition: all 0.4s ease-out 0s; width: 80px; height: 60px;  opacity: 0;background: #E1E0C1;text-align:center;font: 12px terminal dosis light;
text-transform: uppercase;}

.CajaEncima { width: 80px; height: 60px; margin-left: 48px; }
.CajaDebajo a {background: #000; height:15px;display: block; width: 64px; text-aling: center; padding: 1px; color: #fff; font-size: 10px;margin-left: 5px; text-decoration: none;
}
#cajagrande {background: #95A49B; padding: 5px; border: 10px solid #E1E0C1; width: 200px; height: 250px;}
#cajita1 {background: #CFD0AF; padding: 5px; border-top: 10px solid #7F6473; border-bottom: 10px solid #7F6473; width: 180px; height: 200px;margin-left: 5px;margin-top: 5px;outline: 2px dotted #E1E0C1;font: 11px/14px trebuchet ms; text-align: justify; color: #5F7267;}

.namecaja {color: #7F6473;font-family: terminal dosis light; font-size:35px; text-transform:uppercase; text-align: center; text-shadow: 2px 2px 2px #5B5955;}

#cajagrande2 {background: #95A49B; padding: 5px; border: 10px solid #E1E0C1; width: 250px; height: 250px;}
#cajita2 {background: #CFD0AF; padding: 5px; border-top: 10px solid #7F6473; border-bottom: 10px solid #7F6473; width: 230px; height: 200px;margin-left: 5px;margin-top: 5px;outline: 2px dotted #E1E0C1;font: 11px/14px trebuchet ms; text-align: justify; color: #5F7267;}

#linksexy:hover {
    transform: rotateY(400deg);
    border-radius: 10px;
    background: #7F6473;
}
#linksexy {
    background-color: #E1E0C1;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 10px;
    text-align: center;
    padding: 4px;
    transition: all 4s ease 0s;
    width: 170px;
}

Kuroki
Admin

Mensajes : 72
Fecha de inscripción : 03/10/2014

Ver perfil de usuario http://kuroki-is-love.foroactivo.mx

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

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