Section divider and slider

Question

Section divider and slider

Navigation

#1 by (1 votes)

1

Good people, can someone tell me how I can do a section divider in html and css? Like that:

I would also like to add a simple slider to the header to fill the full-width of the screen, but I'm having trouble trying to make one, does anyone give me a little help?

Thank you!

html css slider style

asked by anonymous 05.05.2018 / 12:45

1 answer

How to use the AS operator with the Library Room? store directory

score 1 · Accepted Answer

The arrow making the divider between sessions you can do using a ::after in the section. The arrow is nothing more than a square rotated to look like a losangolo. I created a class that calls .divisor , just add it to the session you want the arrow below.

For Gallery, I used @keyframes to make the fade effect between the images. To add more images, just increase the animation time and the delay, for example: .fadeimg:nth-child(2){animation-delay: 3s;} I commented in CSS

To better understand see working below.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
section {
    color: #fff;
    width: 100%;
    background-color: black;
    position: relative;
    margin-bottom: 75px;
    text-align: center;
    box-sizing: border-box;
}

section.divisor::after {
    content: "";
    position: absolute;
    height: 100px;
    width: 100px;
    background-color: black;
    top: calc(100% - 50px);
    left: calc(50% - 50px);
    transform: rotate(45deg);
    z-index: -1;
}
.slider {
    width: 100%;
    height: 160px; /* altura do slider */
    position: relative;
    overflow: hidden;
}
.slider .fadeimg {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: galeria 9s infinite;
}

.fadeimg:nth-child(1){
 
}
/* aqui para cada imagem que vc colocar no Slider vc tem que acrescentar um :nth-child() e colocar o delay, a troca é a cada 2segundos */
.fadeimg:nth-child(2){
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
}
.fadeimg:nth-child(3){
  animation-delay: 6s;
  -webkit-animation-delay: 6s;
}
@keyframes galeria {
  33.33% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<section class="divisor">
    <div class="slider">
        <img class="fadeimg" src="http://placecage.com/100/100"alt="">
        <img class="fadeimg" src="http://placecage.com/101/100"alt="">
        <img class="fadeimg" src="http://placecage.com/102/100"alt="">
    </div>
</section>
<section>
    <h2>sessão 2</h2> <b>coloque nela a classe .divisor caso quera a seta abaixo</b>
</section>