React 및 스타일이 지정된 구성 요소를 사용하여 반응형 Glassmorphism 로그인 양식 만들기

양식은 React 및 Styled Components를 사용하여 작성되었습니다.

Form은 Glassmorphism 효과가 있으며 완벽하게 반응합니다.

이 양식을 만든 방법을 이해하려면 내 YouTube 비디오를 볼 수 있습니다.



주요 구조 코드

    <MainContainer>
      <WelcomeText>Welcome</WelcomeText>
      <InputContainer>
        <Input type="text" placeholder="Email" />
        <Input type="password" placeholder="Password" />
      </InputContainer>
      <ButtonContainer>
        <Button content="Sign Up" />
      </ButtonContainer>
      <LoginWith>OR LOGIN WITH</LoginWith>
      <HorizontalRule />
      <IconsContainer>
        <Icon color={FacebookBackground}>
          <FaFacebookF />
        </Icon>
        <Icon color={InstagramBackground}>
          <FaInstagram />
        </Icon>
        <Icon color={TwitterBackground}>
          <FaTwitter />
        </Icon>
      </IconsContainer>
      <ForgotPassword>Forgot Password ?</ForgotPassword>
    </MainContainer>

여기서는 재사용 가능한 구성 요소 3개를 사용했습니다.
입력
단추
상

다른 모든 것은 구성 요소가 아니라 스타일이 지정된 구성 요소입니다.

const MainContainer = styled.div`
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 80vh;
  width: 30vw;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(8.5px);
  -webkit-backdrop-filter: blur(8.5px);
  border-radius: 10px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.4rem;
  @media only screen and (max-width: 320px) {
    width: 80vw;
    height: 90vh;
    hr {
      margin-bottom: 0.3rem;
    }
    h4 {
      font-size: small;
    }
  }
  @media only screen and (min-width: 360px) {
    width: 80vw;
    height: 90vh;
    h4 {
      font-size: small;
    }
  }
  @media only screen and (min-width: 411px) {
    width: 80vw;
    height: 90vh;
  }

  @media only screen and (min-width: 768px) {
    width: 80vw;
    height: 80vh;
  }
  @media only screen and (min-width: 1024px) {
    width: 70vw;
    height: 50vh;
  }
  @media only screen and (min-width: 1280px) {
    width: 30vw;
    height: 80vh;
  }
`;

const WelcomeText = styled.h2`
  margin: 3rem 0 2rem 0;
`;

const InputContainer = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 20%;
  width: 100%;
`;

const ButtonContainer = styled.div`
  margin: 1rem 0 2rem 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const LoginWith = styled.h5`
  cursor: pointer;
`;

const HorizontalRule = styled.hr`
  width: 90%;
  height: 0.3rem;
  border-radius: 0.8rem;
  border: none;
  background: linear-gradient(to right, #14163c 0%, #03217b 79%);
  background-color: #ebd0d0;
  margin: 1.5rem 0 1rem 0;
  backdrop-filter: blur(25px);
`;

const IconsContainer = styled.div`
  display: flex;
  justify-content: space-evenly;
  margin: 2rem 0 3rem 0;
  width: 80%;
`;

const ForgotPassword = styled.h4`
  cursor: pointer;
`;

입력 구성 요소

입력의 유형과 자리 표시자를 소품으로 전달합니다.

import styled from "styled-components";
export default function Input({ type, placeholder }) {
  return <StyledInput type={type} placeholder={placeholder} />;
}

const StyledInput = styled.input`
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border-radius: 2rem;
  width: 80%;
  height: 3rem;
  padding: 1rem;
  border: none;
  outline: none;
  color: #3c354e;
  font-size: 1rem;
  font-weight: bold;
  &:focus {
    display: inline-block;
    box-shadow: 0 0 0 0.2rem #b9abe0;
    backdrop-filter: blur(12rem);
    border-radius: 2rem;
  }
  &::placeholder {
    color: #b9abe099;
    font-weight: 100;
    font-size: 1rem;
  }
`;

버튼 컴포넌트

버튼의 내용을 소품으로 전달할 것입니다.

import styled from "styled-components";

export default function Button({ content }) {
  return <StyledButton>{content}</StyledButton>;
}

const StyledButton = styled.button`
  background: linear-gradient(to right, #14163c 0%, #03217b 79%);
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  width: 65%;
  height: 3rem;
  border: none;
  color: white;
  border-radius: 2rem;
  cursor: pointer;
`;

아이콘 컴포넌트

아이콘 컴포넌트에서 소품의 children 속성을 사용했습니다. 그리고 그라데이션이 될 아이콘의 배경색을 보낼 것입니다. 상위 구성 요소에 그라디언트 색상을 저장했으며 소품으로 보낼 것입니다. 그런 다음 해당 그라디언트 색상을 스타일이 지정된 구성 요소에 전달합니다.

import styled from "styled-components";

export default function Icon({ color, children }) {
  return <StyledIcon background={color}>{children}</StyledIcon>;
}

const StyledIcon = styled.div`
  height: 3.5rem;
  width: 3.5rem;
  background: ${(props) => props.background};
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4rem;
  color: white;
  cursor: pointer;
  svg {
    width: 1.5rem;
    height: 1.5rem;
  }
`;

여기에서 라이브 데모를 확인할 수 있습니다link.

여기에서 소스 코드를 가져옵니다link.

이 기사처럼? 내 다른 기사를 확인하십시오.

가상 DOM이란 무엇입니까? 가상 DOM은 어떻게 작동합니까? 화해란 무엇입니까? 디핑 알고리즘이란? React가 그렇게 빠른 이유는 무엇입니까?

Kishan Sheth ・ 2021년 4월 27일 ・ 4분 읽기

#react #javascript #node #webdev

HTML 및 SCSS를 사용하여 반응형 로그인 양식을 구축합니다. SCSS의 믹스인에 대해서도 알아보세요.

Kishan Sheth ・ 2021년 5월 9일 ・ 4분 읽기

#webdev #html #css #react

날 따라와

GitHub

더 많은 동영상을 보려면 YouTube 채널을 구독하세요. 이번 달에는 AWESOME 동영상이 많이 올라옵니다... 그러니 더 멋진 동영상을 보려면 채널을 구독하세요. .