Teochew Thunder: Web Tutorial: Wet Floor Effect

Hello, and welcome to TeochewThunder's yearly Valentine's Day Special!

Today we're going to replicate a very retro special effect known as WFE - the Wet Floor Effect. That's where an image is reflected against a horizontal plane, as if the plane was a wet floor. Back in the day, we had to Photoshop the hell out of an image in order to achieve this. Now, we have CSS!

And for this tutorial, we will be using this very lovey-dovey image.

vday.jpg

Let's begin with some HTML! Here, we have a div with an id of example.

<!DOCTYPE html>
<html>
    <head>
        <title>Valentine's Day 2018</title>
        <style>

        </style>
    </head>

    <body>
        <div id="example">

        </div>
    </body>
</html>

Style it like so. We use two styling blocks because we'll be reusing some of these properties for other CSS classes soon! The background properties are to ensure that the image aligns nicely. You may or may not do the rounded corners thing, but it helps the WFE show up better. Height and width are specified here, but you may choose to change them based on the image you're using.

<!DOCTYPE html>
<html>
    <head>
        <title>Valentine's Day 2018</title>
        <style>
            #example
            {
                width: 300px;
                height: 200px;
            }

            #example
            {
                background-position: center center;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                border-radius: 15px;
                background-image: url(vday.jpg);
            }
        </style>
    </head>

    <body>
        <div id="example">

        </div>
    </body>
</html>

Before we proceed further, let's do this for better clarity.

            div {outline: 1px solid #FF0000}

            #example
            {
                width: 300px;
                height: 200px;
            }

            #example
            {
                background-position: center center;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                border-radius: 15px;
                background-image: url(vday.jpg);
            }

Right there!

Now add a div within example, and style it with the CSS class wetfloor.

The wetfloor CSS class should be twice as tall as its container, and just as wide.

You'll see this right here.

Now use a before pseudoselector in wetfloor to cover the first top half of wetfloor, which not-so-concidentally covers the image with a red background. This red background will be removed later; for now I want it there so you can see why the before pseudoselector is important.

            .wetfloor
            {
                width:100%;
                height:200%;
            }

            .wetfloor:before
            {
                display: block;
                content: "";
                width: 100%;
                height: 50%;
                background-color: #FF0000;
            }

Got that?

Now add another div inside the one styled by wetfloor. Style it using the CSS class reflection.

For the CSS class reflection, it will take up the full width of its parent, and only 20% of its height.

            .wetfloor
            {
                width: 100%;
                height: 200%;
            }

            .wetfloor:before
            {
                display: block;
                content: "";
                width: 100%;
                height: 50%;
                background-color: #FF0000;
            }

            .reflection
            {
                width: 100%;
                height: 20%;
            }

See? The before pseudoselector took up the top half of the div styled by wetfloor, so the div styled by reflection can only take up that space beneath the image!

OK, I've made my point. Change this to have no background color.

            .wetfloor:before
            {
                display: block;
                content: "";
                width: 100%;
                height: 50%;
                background-color: none;
            }

Getting there...

Now do this. This is why I wanted this to be in a separate specification block - so that it can be reused by reflection.

            #example, #example .wetfloor .reflection
            {
                background-position: center center;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                border-radius: 15px;
                background-image: url(vday.jpg);
            }

Lovely! We're getting warmer.

Now, of course a reflection on the floor has to be upside down. So modify the reflection CSS class.

            .reflection
            {
                width: 100%;
                height: 20%;
                -webkit-transform: scaleY(-1);
                transform: scaleY(-1);
            }

And now it's upside-down!

And of course, a reflection needs to sort of fade off. This is what we'll do. Add a before pseudoselector to the CSS class reflection. It'll occupy the whole of reflection, as a sort of overlay. And I've even added a gradient (looted from ColorZilla) so that it fades from 100% opacity white from the bottom, to 30% opacity near the top. Why white? Well, because your background is white!

            .reflection
            {
                width: 100%;
                height: 20%;
                -webkit-transform: scaleY(-1);
                transform: scaleY(-1);
            }

            .reflection:before
            {
                display: block;
                content: "";
                width: 100%;
                height: 100%;
                background: -webkit-linear-gradient(bottom, rgba(255,200,200,0.3), rgba(255,200,200,1)); /* For Safari 5.1 to 6.0 */
                    background: -o-linear-gradient(to bottom, rgba(255,200,200,0.3), rgba(255,200,200,1)); /* For Opera 11.1 to 12.0 */
                    background: -moz-linear-gradient(to top, rgba(255,200,200,0.3), rgba(255,200,200,1)); /* For Firefox 3.6 to 15 */
                background: linear-gradient(to bottom, rgba(255,200,200,0.3), rgba(255,200,200,1);
            }

See what I mean?

What if I have a different background?

Well, yeah, then I guess you'll have to change the color specifications. First, let's remove the red outline.

div {outline: 0px solid #FF0000}

Beautiful, right? Let's experiment with a different background color. How about a nice pastel pink?

Let's make these changes.

Brilliant!

Note

This won't work in Safari due to a pseudoelement and linear background being used. I'm sure some tinkering will help us get around that, but right now it's Valentine's Day and Chinese New Year in one month and I really can't be arsed.

Wasn't this one hell of a tutorial? I bet you're floored.
T___T

Teochew Thunder

Pages

Tuesday 13 February 2018

Web Tutorial: Wet Floor Effect

What if I have a different background?

Note

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews