Blog

Compartimos con Ustedes nuestros conocimientos y de momentos interesantes

1 mayo, 2018

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.

<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>

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

<ul>

<li>

<a href="#">El elemento del slider<br><span>El elemento del slider</span></a>

</div>

</a>

</li>

<li>

<a href="#">El elemento del slider</a>

</div>

</a>

</li>

<li>

<a href="#">El elemento del slider</a>

</div>

</a>

</li>

</ul>

</div>

Eso es CSS

.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;
}

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, Slider

El error — an error occurred while processing this directive

Siempre 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.

Lo último en el blog

Slider-pliego en puro CSS3

Eso es CSS

Las dimensiones de slider

Epígrafes

Ajax Base de datos Cruelten CSS Errores Es útil conocer Feedback HTML JavaScript JQuery Menú MODX PHP Plugins Slider Widget WooCommerce WordPress

Estamos en Facebook

Cruelten_ES

Siempre estamos en contacto con usted