이것은 CSS에서 box-shadow의 3부입니다. 이 블로그에서 우리는 box-shadow와 관련된 몇 가지 멋진 디자인 핵을 볼 것입니다. 기본으로 시작하려면 및 을(를) 확인할 수 있습니다.

그럼 시작하겠습니다 :-

텍스트 그림자

text-shadow를 사용하여 텍스트에 그림자를 줄 수 있습니다. text-shadow의 속성 대부분은 spread-radius를 제외하고 box-shadow의 속성과 유사합니다. 예, text-shadow에는 확산 반경이 없습니다.

통사론

text-shadow: X-offset Y-offset blur-radius color;

기억하십시오:- text-shadow에서 우리는 그림자 모양을 안정시키기 위해 box-shadow와 비교하여 더 작은 값의 blur-radius를 사용합니다.

text-shadow: 5px 5px 2px rgba(0,0,0,1);

텍스트에 상자 그림자 사용

예, 텍스트에 box-shadow를 적용할 수도 있습니다. 텍스트에 box-shadow를 적용하면 생성될 그림자가 실제로 상자 모양이 될 것이며, 그 주위에 상자가 형성되고 그 상자의 그림자가 생성될 것입니다.
따라서 대신 텍스트 그림자를 사용하는 것이 좋습니다.

box-shadow: 5px 5px 2px rgba(0,0,0,.5);

텍스트에 그림자 사용

텍스트에 그림자를 적용할 수도 있습니다. 드롭 섀도우와 텍스트 섀도우를 적용하면 더 비슷하고 안정적인 그림자를 얻을 수 있습니다.

통사론

filter: drop-shadow(X-offset Y-offset blur-radius color);

filter: drop-shadow(5px 5px 2px rgba(0,0,0,1));

그림자에 대해 자세히 알아보자

그림자는 .png 이미지에 그림자를 추가할 때 가장 많이 사용되며 다른 이미지 형식에도 적용할 수 있지만 png 파일에서 사용하면 그 효과를 더 명확하게 이해할 수 있습니다. 배경이 투명한 png 이미지에 그림자 효과를 적용하면 이미지에서 내용이 있는 부분에만 그림자가 생깁니다.

filter: drop-shadow(0px 0px 5px rgba(0,0,0,1));

동일한 이미지에 box-shadow를 적용하면 차이가 더 명확해집니다.

상자 그림자를 이미지에 적용하면 형성된 그림자는 상자 모양의 그림자가 됩니다. 즉, 이 그림자에서 디테일을 볼 수 없습니다.

box-shadow: 0px 0px 25px rgba(0,0,0,.5);

참고:- drop-shadow는 속성을 텍스트-섀도 사용으로 사용합니다. 텍스트 그림자를 그림자로 바꿀 수 있지만 그림자를 텍스트 그림자로 바꾸면 그림자로 작동하지 않습니다.

몇 가지 상자 그림자 핵을 봅시다.

box-shadow를 사용한 테두리

box-shadow를 사용하여 테두리 또는 여러 개의 테두리를 만들 수 있습니다. 그렇게 하려면 확산 반경을 사용해야 합니다. Spread-radius를 제공하는 동안 단일 테두리를 만들 때 원하는 테두리 크기의 값을 spread-radius에 제공해야 한다는 점을 염두에 두십시오. 그리고 다중 경계를 생성하는 경우 다음 그림자의 확산 반경은 이전보다 큰 값을 제공해야 합니다.

단일 테두리의 경우:-

box-shadow: 0px 0px 20px #fca311;

다중 테두리의 경우 :-

box-shadow: 0px 0px 15px #fcbf49,
            0px 0px 30px #f77f00,
            0px 0px 45px #d62828;

참고:- 테두리 너비를 동일하게 유지하려면 스프레드 반경을 배수로 늘려야 합니다.
좋아, 거기에는 로켓 과학이 없습니다. 첫 번째 경계의 확산 반경이 10px이면 두 번째 경계의 경우 첫 번째 경계의 확산 반경을 2로 곱하고 세 번째 국경의 경우 유사하게 첫 번째 경계의 확산 반경을 3으로 곱합니다. 에.

그것에 border-radius 추가하기

예, box-shadow를 사용하여 생성한 테두리에 border-radius를 추가할 수 있습니다. 그렇게 하려면 항상 추가하는 것처럼 일반적으로 border-radius를 추가해야 합니다.

border-radius: 5%;
box-shadow: 0px 0px 15px #fcbf49,
            0px 0px 30px #f77f00,
            0px 0px 45px #d62828;

완전한 요소가 떠 있는 것처럼 보이게 만들기

이 전체 요소가 배경 위에 떠 있는 것처럼 보이게 할 수 있습니다. 이전에 추가한 3개와 함께 하나의 그림자를 더 추가하면 됩니다. 새로운 그림자에서 우리는 그것이 떠 있는 것처럼 보이도록 흐림 반경의 값을 증가시킬 것입니다. 그러나 확산 반경을 최소한 이전 반경과 동일하게 유지해야 함을 기억하십시오.

box-shadow: 0px 0px 15px #fcbf49,
            0px 0px 30px #f77f00,
            0px 0px 45px #d62828,
            0px 0px 50px 45px rgba(0,0,0,.5);

단계 효과 만들기

상자 그림자를 사용하여 계단 효과를 만들 수 있습니다. 스프레드 반경은 음수 값을 지원하므로 모든 그림자의 확산 반경에 음수 값을 지정하고 수평 오프셋을 추가하기만 하면 됩니다. 수평 오프셋을 추가하는 동안 요소 아래의 단계를 원할 경우 확산 반경보다 높은 양수 값을 지정하거나 요소 위의 계단을 원할 경우 확산 반경보다 높은 음수 값을 지정하십시오.

box-shadow: 
            0px 30px 0px -15px #fcbf49,
            0px 60px 0px -30px #f77f00,
            0px 90px 0px -45px #d62828;

box-shadow의 가장 좋아하는 응용 프로그램은 Neumorphism입니다. 이 3개의 블로그에서 간략하게 유지하기 위해 Neumorphism을 다루지 않았습니다. 곧 나는 Neumorphism에 대해 쓸 것입니다. 그때까지 CodePen에서 내 펜을 확인할 수 있습니다. 여기에서 box-shadow 및 Neumorphism으로 멋진 작업을 수행했습니다.

읽어주셔서 감사합니다. 다른 두 부분도 읽어주셨으면 합니다.

여러분의 의견과 box-shadow로 할 수 있는 더 멋진 일에 대해 자유롭게 공유해 주세요.

모든 피드백을 주시면 감사하겠습니다.

또는