This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Hi, I’m Ned👀, a junior with less than two years of experience at 🌹

The road ahead is still long 🎉, work hard to refuel it ❤~

preface

Yesterday brush a station meal, saw a good landing page, so last night with the code to achieve it, today to share with you.

Let’s take a look at the results first:

What it touches me is that the overall form and button seem to be raised, while the click effect is concave. With the transparent frosted glass effect, it has a great feeling.

Ah? You mean background? I didn’t look for a picture 😅 because I was lazy

Come on, let’s make it happen

Start the whole live

The overall HTML code:

    <form action="">
        <h1 class="title">Ned</h1>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <input type="submit" class="btn login" value="Log in" >
    </form>
Copy the code

In order to make the user have a better experience, we will remove the default box after input click.

* {margin: 0;
      padding: 0;
      outline: none;
    }
Copy the code

As for the background, I made it black directly in the body, so I won’t show it here. If you want to try, you can also introduce beautiful pictures in the body

Next, I will center the form horizontally and vertically. If you can’t center the form horizontally and vertically, you can read the article I wrote earlier.

    form{
        background-color: rgba(255.255.255.0.3);
        width: 400px;
        height: 400px;
        border-radius: 30px;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
Copy the code

To focus on this, add a frosted glass effect to the form and use the border to create the raised effect:

    form{
        backdrop-filter: blur(3px);
    }
Copy the code
    form{
        border-left: 2px solid rgba(255.255.255.0.3);
        border-top: 2px solid rgba(255.255.255.0.3);
        box-shadow: 2px 2px 10px rgba(0.0.0.0.2);
    }
Copy the code

The input code is the same as the form code, I will not explain, if there is a different I will explain.

    input{
        border: none;
        width: 80%;
        font-size: 22px;
        padding: 10px;
        margin-bottom: 32px;
        border-radius: 16px;
        background-color: transparent;
        backdrop-filter: blur(3px);
        border-left: 2px solid rgba(255.255.255.0.3);
        border-top: 2px solid rgba(255.255.255.0.3);
        box-shadow: 2px 2px 2px rgba(0.0.0.0.2);
        text-shadow: 2px 2px 2px rgba(0.0.0.0.2);
        color: white;
    }
Copy the code

Height: 30.75pt; background-color: transparent; This thing, it makes the background transparent, normally if we don’t manipulate the background, the default is transparent, but we can set this property when we’re afraid that the user’s browser Settings will change what we look like.

And by the way, we’ve made the input box transparent, so the placeholder is also virtual, it’s invisible, so we’re going to have to set it again.

    ::placeholder{
      color: white;
      opacity: 0.8;
    }
Copy the code

This code does not look like this:Finally, we click on the state of the input box for a setting, and you’re done!

    input:focus{
        border: none;
        background-color: rgba(255.255.255.0.1);
        text-shadow: 1px 1px 2px rgba(0.0.0.0.2);
        border-right: 2px solid rgba(255.255.255.0.3);
        border-bottom: 2px solid rgba(255.255.255.0.3);
        box-shadow:inset 2px 2px 2px rgba(0.0.0.0.2);
    }
Copy the code

As you have noticed, the top left has changed to the bottom right, and the bump effect has changed to a depression

As for the text and buttons, why didn’t I share the code? Because that doesn’t matter what’s important about this form, as long as you understand the essence of the form and input Settings here, I’m sure you’ll do better elsewhere!

Write in the last

CSS is really a fascinating language. The more you learn, the more you learn