CSS Neomorphism 디자인 - 만들기 쉬운 단계

원본 게시물 - Click Here

안녕하세요 코더 여러분! 이 게시물에서 우리는 CSS Neomorphism 디자인을 매우 쉽게 만드는 몇 가지 단계를 볼 것입니다. 네모피즘 디자인의 개념을 쉽게 이해할 수 있도록 네모피즘 로그인 폼을 디자인해 보겠습니다. 따라서 이 게시물에서 무엇을 만들지 봅시다(스냅샷은 위에 나와 있습니다).

네오모피즘 디자인을 만드는 단계

다음은 네오모피즘 디자인을 만드는 데 도움이 되는 몇 가지 단계입니다.

부모(페이지) 및 자식 요소(예: 상자)에 대해 동일한 배경색을 선택합니다.

요소에는 어둡고 밝은 두 개의 그림자가 있어야 합니다.

둥근 모서리를 선택하면 디자인이 꽤 멋지게 보일 것입니다.

요소에는 대비를 개선하고 가장자리를 좀 더 선명하게 만들기 위해 선택적 미묘한 테두리가 있을 수 있습니다.

이제 Neomorphism Form 코딩을 시작하겠습니다...

HTML 코드

다음은 네오모피즘 디자인을 디자인하기 위한 HTML 코드입니다.

<div class="container">
        <div class="title">Login</div>
        <div class="inputs">
            <label>EMAIL</label>
            <input type="email" placeholder="enter your email here" />
            <label>PASSWORD</label>
            <input type="password" placeholder="enter your password" />
            <button type="submit">LOGIN</button>
        </div>
</div>

CSS 코드

이제 실제 작업은 네오모피즘 디자인을 디자인하기 시작합니다.

먼저 페이지 중앙에 요소를 정렬하는 데 도움이 되는 기본 CSS 코드를 살펴보겠습니다.

body {
        margin: 0;
        width: 100vw;
        height: 100vh;
        background: #ecf0f3;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        place-items: center;
        overflow: hidden;
        font-family: poppins;
 }

이제 양식 컨테이너에 네오모피즘 기능을 추가하기 시작합니다.

.container {
        position: relative;
        width: 350px;
        height: 400px;
        border-radius: 20px;
        padding: 40px;
        box-sizing: border-box;
        background: #ecf0f3;
        box-shadow: 14px 14px 20px #cbced1, -14px -14px 20px white;
 }

이제 제목, 입력, 레이블 및 버튼과 같은 다른 요소에 대해 CSS를 수행할 시간입니다.

.title {
        margin-top: 10px;
        font-weight: 900;
        font-size: 1.8rem;
        color: #1DA1F2;
        letter-spacing: 1px;
        }

.inputs {
        text-align: left;
        margin-top: 30px;
}

label, input, button {
        display: block;
        width: 100%;
        padding: 0;
        border: none;
        outline: none;
        box-sizing: border-box;
}

label {
        margin-bottom: 4px;
        }

label:nth-of-type(2) {
        margin-top: 12px;
}

input::placeholder {
        color: gray;
}

input {
        background: #ecf0f3;
        padding: 10px;
        padding-left: 20px;
        height: 50px;
        font-size: 14px;
        border-radius: 50px;
        box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
}

button {
        margin-top: 20px;
        background: #1DA1F2;
        height: 40px;
        border-radius: 20px;
        cursor: pointer;
        font-weight: 900;
        box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px white;
        transition: 0.5s;
}

button:hover {
        box-shadow: none;
}

마지막 단어

CSS Neomorphism에 대한 이 짧은 튜토리얼을 즐기시기 바랍니다.
방문해야 함- Our BLog