Hello Guyz 오늘은 CSS를 사용하여 아름다운 클레이모피즘 효과를 보여드리겠습니다.

시작하자...

HTML - 양식 구성 요소의 스타일을 지정하기 위해 Tailwind CSS를 사용했습니다.
따라서 npm 또는 cdn을 통해 tailwind를 추가하십시오.

   <div className="h-screen bg-indigo-100 flex justify-center items-center">
       <form className="w-blue-claymorphism w-full max-w-xs flex flex-col py-5 px-8" action="">
          <label className="text-gray-700 font-bold py-2" htmlFor="">Email</label>
          <input className="text-gray-700 shadow border rounded border-gray-300 focus:outline-none focus:shadow-outline py-1 px-3 mb-3" type="email" placeholder="Email"  />
          <label className="text-gray-700 font-bold py-2" htmlFor="">Password</label>
          <input className="text-gray-700 shadow border rounded border-gray-300 mb-3 py-1 px-3 focus:outline-none focus:shadow-outline" type="password" placeholder="********"  />
       <div className="grid grid-cols-2 gap-3 place-content-between my-4">
          <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded py-1 px-4 place-self-end" >
             Sign In
          </button>
      <div className="text-sm text-blue-600 hover:text-blue-800 font-bold place-self-end">
        Forgot Password?
      </div>
   </div>
     <div className="grid grid-cols-2 place-content-between my-4">
         <div className="text-slate-600 hover:text-blue-800 font-bold" >
         Dont have an Account?
      </div>
        <div className="place-self-end">
          <button className="bg-green-500 hover:bg-slate-700 text-white font-bold rounded py-1 px-3 text-white">
           Sign Up
            </button>
         </div>
       </div>
    </form> 
</div>

CSS 코드 -

/* Claymorphism */
.w-green-claymorphism,
.w-blue-claymorphism,
.w-red-claymorphism,
.w-purple-claymorphism {
    padding: 50px;
    border-radius: 50px;
}

.w-green-claymorphism {
    background-color: hsl(120deg, 20%, 95%);
    box-shadow:
        34px 34px 68px hsl(120deg, 10%, 50%),
        inset -8px -8px 16px hsl(120deg, 20%, 50%),
        inset 0px 14px 28px hsl(120deg, 20%, 95%);
}

.w-blue-claymorphism {
    background-color: hsl(190deg, 20%, 95%);
    box-shadow:
        34px 34px 68px hsl(190deg, 10%, 50%),
        inset -8px -8px 16px hsl(190deg, 20%, 50%),
        inset 0px 14px 28px hsl(120deg, 20%, 95%);
}

.w-red-claymorphism {
    background-color: hsl(10deg, 20%, 95%);
    box-shadow:
        34px 34px 68px hsl(10deg, 10%, 50%),
        inset -8px -8px 16px hsl(10deg, 20%, 50%),
        inset 0px 14px 28px hsl(120deg, 20%, 95%);
}

.w-purple-claymorphism {
    background-color: hsl(300deg, 20%, 95%);
    box-shadow:
        34px 34px 68px hsl(300deg, 10%, 50%),
        inset -8px -8px 16px hsl(300deg, 20%, 50%),
        inset 0px 14px 28px hsl(120deg, 20%, 95%);
}

삽입 및 그림자 효과를 제공하기 위해 hsl 색 구성표와 함께 상자 그림자 속성을 사용했습니다.

HTML

 <form className="w-blue-claymorphism .....">
.
.
.
.
</form>

양식 요소에 w-blue-claymorphishm 클래스를 적용하여 전체 양식에 효과를 적용했습니다.

출력 -

그게 이 게시물의 전부입니다.
이 게시물을 읽어 주셔서 감사합니다. 실수를 발견하거나 제안하고 싶은 경우 댓글 섹션에 언급하십시오.
^^ 아래 링크에서 기부로 저를 도울 수 있습니다 감사합니다👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

이 게시물도 확인하십시오.