Hace poco les presente 3D Gallery un slider deimágenesen 3D bastante bueno , ahora les presento la segunda parte el mismo SLIDER pero con efecto ovalado o redondo en lasimágenes pueden verlo funcionadoaquí▼
Dirigase alaOpción
Plantilla-luego escoja laOpción
Editar HTMLluego realice lacombinaciónde teclas CTRL-F y digite en el buscador la etiqueta
/head y justo arriba de ella pegue el siguientecódigo.
Mostrar Codigo style
.contenedor{
width: 100%; /*tamaño del contenedor slider*/
height: 300px;
position: relative;
}
.contenedor_imagenes{
width: 400px;
height:267px;
margin: 0 auto;
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
.contenedor_imagenes a{
width: 400px;/*tamaño que va a tener las imagenes*/
height: 267px;
display: block;
position: absolute;
left: 0;
top: 0;
background-color: rgba(221, 221, 221, 0.3);/*color del fondo del contendor de imagenes*/
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 8px #000; /* Sombra */
}
.contenedor_imagenes a.dg-transition{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.contenedor_imagenes a img{
display: block;
border-radius: 50%; /* Borde redondeado */
}
.contenedor_imagenes a div{
font-style: italic;
text-align: center;
line-height: 50px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
color: #070707;
font-size: 18px;
width: 100%;
bottom: -55px;
display: none;
position: absolute;
background-color: rgba(171, 171, 172, 0.4);/*colo de fondo de los titulos de la imagen*/
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius:0 0 120px 120px / 0 0 12px 12px;
border-radius:0 0 120px 120px / 0 0 12px 12px;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5),
0 1px 5px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5),
0 1px 5px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-o-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5),
0 1px 5px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5),
0 1px 5px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.contenedor_imagenes a.dg-center div{
display: block;
}
.contenedor nav{
width: 58px;
position: absolute;
z-index: 1000;
bottom: 40px;
left: 50%;
margin-left: -29px;
}
.contenedor nav span{
text-indent: -9000px;
float: left;
cursor:pointer;
width: 24px;
height: 25px;
opacity: 0.8;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv18sucI-GQxuajJM8e8babnvLxWOwzLyNVnbVaNRA2BU8HiZ1rj1oqGGFw1yUHjeWP-1AOHp2Ez1JpRi1WiAD1jW_vUddsGI8g6IhNixqjxVu9oYLOItRZjvlO7iFbGySXufblYDva7A/) no-repeat top left;
}
.contenedor nav span:hover{
opacity: 1;
}
.contenedor nav span.dg-next{
background-position: top right;
margin-left: 10px;
}
/style
script type="text/javascript" src="https://sites.google.com/site/javafacesitefile/fileblog/moderni.js"/script
script type="text/javascript" src="https://sites.google.com/site/javafacesitefile/fileblog/jquery.gallery.js"/script
script type="text/javascript"
$(function() {
$('#contenedor').gallery({
autoplay : true,
// activar slider automatico
interval : 2010
//tiempo de la transicion
});
});
/script
Nota:deberátener instalado el Plugin JQuery en su blog casocontrariono funcionara
Paso 2) Añadiendo el contenedor y las imágenesterminado el paso 1, dirigase a
Diseño-escoja laopción
añadir gadget- y escoja laopción
HTML/javaScripty pegue el siguientecódigo.
section id="contenedor" class="contenedor"
div class="contenedor_imagenes"
a href="#"
img src="http://t1.ftcdn.net/jpg/00/37/57/04/400_F_37570429_WGqWBJvq4wtcX0cHCIPfjPykjsKIuYgH.jpg"
alt="image01"divGracias por/div
/a
a href="#"
img src="http://multiwallpapers.net/wp-content/uploads/2013/03/sexy_jessica_alba_wallpaper-400x267.jpg" alt="image02"divVisitar el/div
/a
a href="#"
img src="http://t2.ftcdn.net/jpg/00/19/62/31/400_F_19623107_KBxBqIJCm1hZuafFvPCcLLlj1u4fOq6Z.jpg"
alt="image03"divBlogg de JavaFace/div
/a
a href="#"
img src="http://t2.ftcdn.net/jpg/00/20/63/99/400_F_20639941_LwN1A3n5wWnmm1HCCnVc7HL6ASXvLKPX.jpg"
alt="image03"divEl blog del/div
/a
a href="#"
img src="http://acg.vlexofree.com/wp-content/plugins/wp-o-matic/cache/a11ce_mashiro-400x267.jpg"
alt="image03"divProgramador/div
/a
/div
!--nav
span class="dg-prev"</span
span class="dg-next">/span
/nav--
/section
lasimágenesestáncon un tamaño de 400 x 297 pixeles ustedpodrácambiar el tamaño en el codigo css. buscando el siguientecódigo.
.contenedor_imagenes a{
width: 400px;/*tamaño que va a tener las imagenes*/
height: 267px;
display: block;
position: absolute;
left: 0;
top: 0;
background-color: rgba(221, 221, 221, 0.3);/*color del fondo del contendor de imagenes*/
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 8px #000; /* Sombra */
}
aquí usted podrá cambiar la apariencia del contenedor de las imágenes a su gusto, reemplazando los valores width(ancho) 400px y height(alto) 267 px por los valores de susimágenes.
No hay comentarios:
Publicar un comentario