Slider-pliego en puro CSS3
Slider-pliego CSS3 Le permitirá realizar Su sueño de ser simple y de fácil slider acordeón, que fácilmente Se vaya a utilizar en Su sitio web. Lo he implementado en el sitio web de mi cliente. Se puede ver aquí. Vieron? Ahora vamos a lo hagamos.
Es nuestro diagramación. Tenga en cuenta que es necesario cambiar los enlaces a las imágenes. Nada de extraño en que el texto no. Lo más interesante se encuentra en el CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div class="accordian"> <ul> <!-- El elemento del slider --> <li> <div class="image_title"> <a href="#">El elemento del slider<br><span>El elemento del slider</span></a> </div> <a href="#"> <img src="#"> </a> </li> <!-- El elemento del slider --> <li> <div class="image_title"> <a href="#">El elemento del slider</a> </div> <a href="#"> <img src="#"> </a> </li> <!-- El elemento del slider --> <li> <div class="image_title"> <a href="#">El elemento del slider</a> </div> <a href="#"> <img src="#"> </a> </li> </ul> </div> |
Eso es CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
.accordian { width: 990px; height: 375px; overflow: hidden; margin: 20px auto; -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } /*Un pequeño truco para evitar el parpadeo en algunos navegadores*/ .accordian ul { width: 2000px; padding: 0; margin: 0; } .accordian li { position: relative; display: block; width: 247px; float: left; border-left: 1px solid #888; /* La creación de la sombra */ -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); /* Creación de una animación con la ayuda de navegación */ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } /* Reducir el ancho para algunos inactivos imágenes */ .accordian ul:hover li { width: 80px; } /* El trabajo de la anchura de la imagen al ofrecer a ella el cursor */ /* Este estilo ( li:hover), que reemplaza ul: hover */ .accordian ul li:hover { width: 750px; } .accordian li img { display: block; width: 750px; } /* Estilo para el bloque que contiene el vínculo */ .image_title { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 750px; } /* Estilo para los enlaces */ .image_title a { display: block; color: #fff; font-weight: 200; text-decoration: none; padding: 20px; font-size: 24px; } .image_title a span { font-size: 18px; } |
Las dimensiones de slider
Un poco de los comentarios. Este slider he hecho bajo las siguientes dimensiones.
- La anchura del slider: 990px.
- El ancho de cada slider: 750px.
- El ancho de cada slider en forma cerrada – 247px.
Todas las dimensiones hay en el CSS. Todo se puede cambiar. Por lo tanto, experimenta, y si tienen preguntas, preguntar debajo de este artículo. Esperamos que Te guste este slider
Epígrafes: CSS, SliderSiempre estamos en contacto con usted
- +7 (906) 272-38-19
Tel./ WhatsApp/ Viber - info@cruelten.ru
- Cruelten
- Cruelten
- Cruelten
Antes de contactar con los contactos que aparecen aquí, le pedimos que compare los precios y condiciones de nuestros competidores.
Esto le dará Una idea amplia de cuánto cuesta los servicios en el desarrollo del sitio llave en mano, cuánto tiempo lleva crear una tienda en línea o un sitio de tarjeta de visita.
No tardaremos más de tres semanas. Gracias.