PNG 영상에 대한 테일윈드 CSS 드롭 그림자 효과

반응형

당신은 PNG 이미지에 드롭 섀도를 적용할 수 있다는 것을 알고 있었나요? 이 드롭 섀도는 이미지의 윤곽을 따라갑니다!

이 글에서는 Tailwind CSS에서 이러한 드롭 섀도우 효과를 달성하는 방법을 보여드리겠습니다.

위 이미지에서 왼쪽은 기본 PNG 이미지, 오른쪽은 드롭 섀도 효과를 볼 수 있습니다.

 

테일윈드 CSS 드롭 그림자 효과

이 효과를 얻으려면 PNG 이미지(투명 이미지)를 사용해야 합니다.

그리고 드랍 섀도 클래스를 적용합니다.
다음 버전 중 하나를 선택할 수 있습니다.

• 드롭-스미시
• 드롭스테이프팅하다
• 드롭-스파이프-md
• 드롭-페어-lg
• 드롭-스파이크
• 드롭-드롭-스파이프

테일윈드 CSS 박스 그림자 효과

 

또는 박스섀도 효과를 보거나 들어본 적이 있을 것이다. 이 효과는 PNG의 가장자리를 감싸지 않고, 대신 PNG가 있는 상자를 사용합니다.

아래 이미지에서 왼쪽의 박스 섀도우와 오른쪽의 드롭 섀도우 효과를 볼 수 있습니다.

상자 그림자는 다음 클래스 중 하나를 사용하여 추가할 수 있습니다.

• 그림자처럼 흐릿하다
• 그림자를 드리우다
• 그림자 같은
• 섀도 lg의
• 그림자 무늬의
• 그림자-2의

 

옵션 간의 차이점을 확인하기 위해 코드펜 예제를 만들었습니다.

읽어주셔서 감사드리며 연결해보겠습니다!

제 블로그를 읽어주셔서 감사합니다. 자유롭게 내 이메일 뉴스레터를 구독하고 Facebook 또는 Twitter에 접속하십시오.