Rose Diseños
¿Quieres reaccionar a este mensaje? Regístrate en el foro con unos pocos clics o inicia sesión para continuar.

  • Aqui contenido inicial, pestaña 1
  • Aqui contenido pestaña 2
  • Aqui contenido pestaña 3
  • Aqui contenido pestaña 4

¿Quién está en línea?
En total hay 1 usuario en línea: 0 Registrados, 0 Ocultos y 1 Invitado

Ninguno

[ Ver toda la lista ]


El record de usuarios en línea fue de 3 durante el Jue Mayo 24, 2018 11:22 am
Últimos temas
» logo pestañas
logo pestañas EmptyDom Jun 26, 2016 6:32 pm por Admin

» Un tema mas
logo pestañas EmptyDom Jun 26, 2016 6:31 pm por Admin

» Tu primer tema
logo pestañas EmptyDom Jun 26, 2016 6:20 pm por Admin

Conectarse

Recuperar mi contraseña


logo pestañas

Rose Diseños :: Staff Zone

 :: Tu primer foro

Ir abajo

logo pestañas Empty logo pestañas

Mensaje por Admin Dom Jun 26, 2016 6:32 pm

csss


Código:
.sp-slideshow {  
  position: relative;
  margin: 10px auto;
  width: 850px;
  max-width: 850px;
  min-width: 850px;
  height: 400px;
}

.sp-content {
  position: relative;
 width: 850px;
    max-width: 850px;
  min-width: 850px;
  height: 400px;
  overflow: hidden;
}

.sp-parallax-bg {
   background:url(http://i.imgur.com/jflZn4b.png);
  position: absolute;
  top: 0;left: 0;
 width: 900px;
    max-width: 900px;
  min-width: 900px;
  min-height: 400px;
    max-height: 400px;
  overflow: hidden;
}

.sp-slideshow input {
  position: absolute;
  bottom: 15px;
  left: 50%;
  width: 9px;
  height: 9px;
  z-index: 999;
  cursor: pointer;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}

.sp-slideshow input + label {
  position: absolute;
  bottom: 15px;
  left: 50%;
  width: 15px;
  height: 20px;
  display: block;
  z-index: 999;
  border: solid 1px #7E8491;
  background: #141414;
  -webkit-transition: background-color linear 0.1s;
  -moz-transition: background-color linear 0.1s;
  -o-transition: background-color linear 0.1s;
  -ms-transition: background-color linear 0.1s;
  transition: background-color linear 0.1s;
}

.sp-slideshow input:checked + label {
  background: #413750;
    border: solid 1px #7E8491;
}

.sp-selector-1, .button-label-1 {
  margin-left: -54px;
}
.sp-selector-2, .button-label-2 {
  margin-left: -26px;
}
.sp-selector-4, .button-label-4 {
  margin-left: 25px;
}
.sp-selector-5, .button-label-5 {
  margin-left: 40px;
}

.sp-arrow {
  position: absolute;
  top: 50%;
  width: 64px;
  height: 50px;
  margin-top: -19px;
  display: none;
  opacity: 0.8;
  cursor: pointer;
  z-index: 999;
  background: transparent url(http://i.imgur.com/us8TcDr.png) no-repeat;
   transition:ease-in-out 1.0s;
  -webkit-transition:ease-in-out 1.0s;
  -ms-transition:ease-in-out 1.0s;
  -moz-transition:ease-in-out 1.0s;
}

.sp-arrow:hover{
  opacity: 1;
   -webkit-transform: rotate(329deg);
  -moz-transform: rotate(329deg);
  -o-transform: rotate(329deg);
   transition:ease-in-out 1.0s;
  -webkit-transition:ease-in-out 1.0s;
  -ms-transition:ease-in-out 1.0s;
  -moz-transition:ease-in-out 1.0s;
}

.sp-arrow:active{
  margin-top: -18px;
}

.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
.sp-selector-4:checked ~ .sp-arrow.sp-a1 {
   right: 15px;
display: block;
background-position: top right;
}

.sp-selector-2:checked ~ .sp-arrow.sp-a1,
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
.sp-selector-5:checked ~ .sp-arrow.sp-a4 {
   left: 15px;
display: block;
background-position: top left;
}

.sp-slideshow input:checked ~ .sp-content {
  -webkit-transition: background-position linear 0.6s, background-color linear 0.8s;
  -moz-transition: background-position linear 0.6s, background-color linear 0.8s;
  -o-transition: background-position linear 0.6s, background-color linear 0.8s;
  -ms-transition: background-position linear 0.6s, background-color linear 0.8s;
  transition: background-position linear 0.6s, background-color linear 0.8s;}

.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {-webkit-transition: background-position linear 0.7s;-moz-transition: background-position linear 0.7s;-o-transition: background-position linear 0.7s;-ms-transition: background-position linear 0.7s;transition: background-position linear 0.7s;}

input.sp-selector-1:checked ~ .sp-content {background-position: 0 0;}
input.sp-selector-2:checked ~ .sp-content {background-position: -100px 0;}
input.sp-selector-3:checked ~ .sp-content {background-position: -200px 0;}
input.sp-selector-4:checked ~ .sp-content {background-position: -300px 0;}
input.sp-selector-5:checked ~ .sp-content {background-position: -400px 0;}

input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}

.sp-slider { position: relative;left: 0; width: 500%;height: 100%;list-style: none; margin: 0;padding: 0;-webkit-transition: left ease-in 0.8s; -moz-transition: left ease-in 0.8s; -o-transition: left ease-in 0.8s; -ms-transition: left ease-in 0.8s;transition: left ease-in 0.8s; }

.sp-slider > li {height: 100%;padding: 0 60px;float: left;text-align: center;opacity: 0.4; -webkit-transition: opacity ease-in 0.4s 0.8s;-moz-transition: opacity ease-in 0.4s 0.8s;-o-transition: opacity ease-in 0.4s 0.8s;-ms-transition: opacity ease-in 0.4s 0.8s;transition: opacity ease-in 0.4s 0.8s; }
.sp-slider > li img{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;display: block;margin: 0 auto;padding: 40px 0 50px 0;max-height: 100%;max-width: 100%;}

input.sp-selector-1:checked ~ .sp-content .sp-slider {left: 0;}
input.sp-selector-2:checked ~ .sp-content .sp-slider {left: -100%;}
input.sp-selector-3:checked ~ .sp-content .sp-slider {left: -200%;}
input.sp-selector-4:checked ~ .sp-content .sp-slider {left: -300%;}
input.sp-selector-5:checked ~ .sp-content .sp-slider {left: -400%;}

input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){opacity: 1;}
input.forminput {display: inline-block;}

/* SLIDES */
.slideone { width: 850px; height: 300px; padding:0px; margin-left:-60px;}
.slidetwo { width: 850px; height: 300px; padding:0px; margin-left:-120px;}
.slidethree { width: 850px; height: 300px; padding:0px; margin-left:-120px;}
.slidefour { width: 850px; height: 300px; padding:0px; margin-left:-120px;}


.button1 { width: 20px; height: 20px; background: #eee; }
.button2 { width: 20px; height: 20px; background: #cae1f6; }

.buttona { font-family: open sans condensed;  text-transform: lowercase; line-height: 100%; color: #000; font-size: 32px; text-decoration: none; font-weight: lighter; padding: 4px; display: inline; }


html

Código:
 <div class="sp-parallax-bg">
</div>
 
<div style="width: 850px; max-width: 850px; min-width: 850px; height: 400px; position: relative; left: 0px;">
 
 <center>
 
 <div class="sp-slideshow">
 <input checked="checked" class="sp-selector-1" name="radio-set" type="radio" id="button-1" /> <label class="button-label-1" for="button-1"></label> <input class="sp-selector-2" name="radio-set" type="radio" id="button-2" /> <label class="button-label-2" for="button-2"></label> <input class="sp-selector-3" name="radio-set" type="radio" id="button-3" /> <label class="button-label-3" for="button-3"></label> <input class="sp-selector-4" name="radio-set" type="radio" id="button-4" /> <label class="button-label-4" for="button-4"></label> <label class="sp-arrow sp-a1" for="button-1"></label> <label class="sp-arrow sp-a2" for="button-2"></label> <label class="sp-arrow sp-a3" for="button-3"></label> <label class="sp-arrow sp-a4" for="button-4"></label>
 <div class="sp-content">
 
 <ul class="sp-slider clearfix">
 
 <li>
 
 <div class="slideone">
 AQUI PRIMER REYENO
 </div>
 
 </li>
 
 <li>
 
 <div class="slidetwo">
 
 <div style="position: relative; top: 0px">
 
 <center>
 AQUI SEGUNDO REYENO
 </center>
 
 </div>
 
 </div>
 
 </li>
 
 <li>
 
 <div class="slidethree">
 
 <div style="position: relative; top: 75px">
 
 <center>
 AQUI TERCER REYENO
 </center>
 
 </div>
 
 </div>
 
 </li>
 
 <li>
 
 <div class="slidefour">
 
 <div style="position: relative; top: 100px">
 
 <center>
 CUARTO REYENO
 </center>
 
 </div>
 
 </div>
 
 </li>
 
 </ul>
 
 </div>
 
 </div>
 
 </center>
</div>
<div class="bubu">
 ya nada es como antes.. entra a un mundo sumido en las sombras
</div>

Admin
Admin

Mensajes : 4
Fecha de inscripción : 26/06/2016

https://roseskin1.activo.mx

Volver arriba Ir abajo

Volver arriba

Rose Diseños :: Staff Zone

 :: Tu primer foro

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