1

Boas pessoal, alguém me sabe dizer como posso fazer um divisor de seccão em html e css? Tipo isso: inserir a descrição da imagem aqui

Gostaria também de adicionar um simples slider para ficar no header a ocupar o full-width do ecra, mas estou a ter problemas a tentar fazer um, alguem me da uma pequena ajuda?

Obrigado!

2
  • Nelson se vc quiser um slider simples, som controle de avançar / voltar fazendo fade entre 3 ou 4 imagens por exemplo daria para fazer so com CSS. Se quiser posso fazer um modelo simples de slide do com a transição das imagens e essa seta de divisão abaixo
    – hugocsl
    Commented 5/05/2018 às 12:01
  • Sim amigo, poderia fazer isso por favor? Gostaria muito de aprender a fazer isso! Estou começando a fazer o meu primeiro site, daí surgirem muitas duvidas! Commented 5/05/2018 às 12:09

1 Resposta 1

1

A seta fazendo o divisor entre as sessões vc pode fazer utilizando um ::after na section. A seta nada mais é que um quadrado rotacionado para ficar igual um losangolo. Eu criei uma classe que chama .divisor, é só adiciona-la na sessão que quiser a seta abaixo.

Para a Galeria, eu usei @keyframes, para fazer o efeito fade entre as imagens. Para vc acrescentar mais imagens bastar ir aumentando o tempo de animação e o delay, exemplo: .fadeimg:nth-child(2){animation-delay: 3s;} Deixei comentado no CSS

Para entender melhor veja funcionando abaixo.

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>

3
  • Muito obrigado amigo! Um grande abraço! Commented 5/05/2018 às 16:14
  • Já agora, sabe como posso utilizar a propriedade "background-attachment: fixed" e "background-size:cover"? E como posso adicionar um linear gradient por cima do slider? Commented 5/05/2018 às 16:38
  • Com background vc não consegue pq não vai conseguir fazer o Fade entre uma imagem e outra!, Já o linear-gradiente por cima dos outros elementos deve dar pra fazer sim. Crie uma div depois da última imagem e faça o CSS dela para cobrir a área toda, vc deve precisar de position:absolut e z-index para fazer isso.
    – hugocsl
    Commented 5/05/2018 às 17:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .