How to override one HTML page

Asked

Viewed 1,226 times

4

Hello, I’d like to know if I could get a page to overlap ("raid") the other, like this model here:

Divisória entre a pagina 1/2

html
  • 2

    Usually this is a single page, with different sections. You can even simulate this by loading pieces with JS, or using includes, who knows even iframe, but in the end it turns all one page (and it is essential to understand as one thing only to be able to design the style sheet responsible for the transition).

2 answers

2

That’s just a page, what happens is that the white part is a <div> is over another <div>, this is done in CSS with the function z-index, example:

HTML

<div id="imagem"></div>
<div id="bg_branco"></div>

CSS

#imagem {
     width: 100%;
     height: 100%;
     top: 0px;
     left: 0px;
     position: absolute;
     background-image: url(http://www.onordeste.com/administrador/personalidades/imagemPersonalidade/34d6911fdfdc4097a974a4b612313f70923.JPG);
     z-index: 1;
}

#bg_branco {
     width: 100%;
     height: 50%;
     top: 70%;
     left: 0px;
     background-color: #FFF;
     position: absolute;
     z-index: 2;
}

1

Actually this effect was done using probably a ::before above the background.

In the element ::before you can use the transform:skewY() to have that effect.

Simple example (I put in a little transparence so you could see that the image continues below the ::before. I also put a div after the image for you to see how it looks in a default layout)

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.bgimg {
    width: 100vw;
    height: 100vh;
    background: url(http://fillmurray.com/500/500) no-repeat ;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.bgimg::before {
    content: "";
    width: 100%;
    height: 135px;
    background-color: rgba(255, 255, 255, 0.9);
    right: 0;
    left: 0;
    bottom: -67px;
    position: absolute;
    transform: skewY(4deg);
    clear: both;
}
.corpo {
    background-color: lightgray;
    width:100%;
    height: 100px;
}
<div class="bgimg"></div>
    <div class="corpo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, quaerat.</div>

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.