Responsive Split-Screen Layout CSS3

This week, I'll be showing you how to create this split screen layout that also features a nice zoom out animation with CSS3. A creative spin on the trendy split screen layout. This responsive layout is made with the latest flexbox techniques and simple CSS3 animation.

The HTML

To begin, we’re going to use the section tag as the container for all the following elements. Then, we’re going to create two divs for both the left and right sides that will make up the split-screen layout. Finally, we’re going to use the article tag to contain the headings.

The CSS

First, we’re going to make the layout full height using the declaration height:100% to the HTML, body and section tags. We’re also going to make all the text on the page white, and align all the text to the center.

Now, we need to create the flexbox layout by applying the display: flex declaration to entire container, and then to the div of both sides of the split layout. The properties applied to the div tag are self-explanatory, they set the direction of the flex into a column (so it’s vertical) and then it justifies the content to the center (vertically from the top). We’re also going to apply flex:1 to the div classes.

Now, we’re going to apply this really cool CSS3 animation using the transform: scale declaration. This is going to apply the “zoom-out” effect.

Finally, we’re just going to style the heading text and the buttons. If you want more info on how to style buttons and maybe even add icons to the buttons, read this article.

Comment Below!

Feel free to share a screenshot of what you’ve made using this tutorial in the comments section below! Have any questions or comments? Let’s chat in the comment below!

Leave a Reply

Your email address will not be published. Required fields are marked *

More On XO PIXEL