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