CSS 텍스트 그림자로 장난스러운 효과를 만듭니다

CSS Text-Shadow 속성을 사용하여 진정으로 3D처럼 보이는 텍스트를 만드는 방법을 살펴 보겠습니다. 당신은 텍스트 그림을 텍스트 뒤에 흐릿하고 그라디언트처럼 보이는 색상을 적용 할 수 있다고 생각할 수 있습니다. 그러나 Box-Shadow와 마찬가지로 그림자가 얼마나 흐릿한지를 제어 할 수 있습니다. 그것은 쉼표를 구분하는 그림자와 함께 쌓아 놓은 CSS 속임수입니다.

결국, 우리는 다음과 같은 것처럼 보일 것입니다.

Text-Shadow의 빠른 새로 고침

구문은 다음과 같습니다.

 .el {
 Text-Shadow : [x-offet] [y-offset] [blur] [color];
}

• X- 오프셋 : X 축의 위치. 양수 값은 그림자를 오른쪽으로 이동시키고 음수 값은 그림자를 왼쪽으로 움직입니다. (필수의)
• Y- 오프셋 : y 축의 위치. 양수 값은 그림자를 바닥으로 이동시키고 음수 값은 그림자를 상단으로 이동시킵니다. (필수의)
• 블러 : 그림자가 얼마나 흐리게 해야하는지. 값이 높을수록 그림자가 더 부드럽습니다. 기본값은 0px (블러 없음)입니다. (선택 과목)
• 색상 : 그림자의 색. (필수의)

첫 번째 그림자

단 하나의 그림자 만 추가하여 효과를 만들어 봅시다. 그림자는 6px로 오른쪽으로, 6px는 바닥으로 밀려 나옵니다.

 : 루트 {
 --text : #5362f6; /* 파란색 */
 -쉐이도 : #e485f8; /* 분홍색 */
}


.playful {
 색상 : var (-텍스트);
 Text-Shadow : 6px 6px var (-그림자);
}

더 많은 그림자로 깊이를 만듭니다

우리가 가진 모든 것은이 시점에서 평평한 그림자입니다. 아직 3D는 많지 않습니다. 동일한 요소에 더 많은 텍스트 그림 인스턴스를 추가하여 깊이를 생성하고 그림자를 실제 텍스트에 연결할 수 있습니다. 쉼표를 구분하는 것뿐입니다. 중간에 하나 더 추가하는 것으로 시작하겠습니다.

 .playful {
 색상 : var (-텍스트);
 Text-Shadow : 6px 6px var (-그림자),
        3px 3px var (-그림자);
}

이것은 이미 어딘가에 도달하고 있지만, 잘 보이려면 몇 가지 그림자를 추가해야합니다. 더 많은 단계를 추가할수록 최종 결과가 더 자세히 설명됩니다. 이 예에서는 6px 6px에서 시작하여 0에 도달 할 때까지 0.25px 단위로 점차적으로 구축됩니다.

 .playful {
 색상 : var (-텍스트);
 Text-Shadow : 
  6px 6px var (-그림자), 
  5.75px 5.75px var (-그림자), 
  5.5px 5.5px var (-그림자), 
  5.25px 5.25px var (-그림자),
  5px 5px var (-그림자), 
  4.75px 4.75px var (-그림자), 
 4.5px 4.5px var (-그림자), 
  4.25px 4.25px var (-그림자),
 4px 4px var (-그림자),
  3.75px 3.75px var (-그림자),
 3.5px 3.5px var (-그림자),
  3.25px 3.25px var (-그림자),
  3px 3px var (-그림자),
  2.75px 2.75px var (-그림자),
   2.5px 2.5px var (-그림자),
  2.25px 2.25px var (-그림자),
   2px 2px var (-그림자),
  1.75px 1.75px var (-그림자),
  1.5px 1.5px var (-그림자),
   1.25px 1.25px var (-그림자),
  1px 1px var (-그림자),
   0.75px 0.75px var (-그림자),
  0.5px 0.5px var (-그림자),
 0.25px 0.25px var (-그림자);
}

Sass로 코드를 단순화합니다

결과는 좋아 보일지 모르지만 현재 코드는 읽고 편집하기가 매우 어렵습니다. 우리가 그림자를 더 크게 만들고 싶다면, 우리는 그것을 달성하기 위해 많은 복사와 붙여 넣기를해야합니다. 예를 들어, 그림자 크기를 10px로 늘리면 16 개의 그림자가 수동으로 추가되는 것을 의미합니다.

그리고 그것이 SCSS가 그림에 나오는 곳입니다. 기능을 사용하여 모든 그림자 생성을 자동화 할 수 있습니다.

 @Function TextShadow ($ precision, $ size, $ color) {
 $ 값 : NULL; 
 $ 오프셋 : 0;
 $ 길이 : $ size * (1 / $ precision) -1;


 @for $ i from 0 ~ $ length {
  $ 오프셋 : $ 오프셋 $ PRECISION;
  $ 섀도우 : $ px $ px $ px $ color;
  $ value : Append ($ value, $ 섀도우, 쉼표);
 }


 @return $ value;
}


.playful {
 색상 : #5362F6;
 Text-Shadow : TextShadow (0.25, 6, #e485f8);
}

함수 텍스트는 세 가지 다른 주장, 즉 그림자의 정밀, 크기 및 색상을 취합니다. 그런 다음 오프셋이 그림의 총 크기 (이 경우 6px)에 도달 할 때까지 오프셋이 $ 정밀도 (이 경우 0.25px)로 증가하는 루프를 만듭니다.

이렇게하면 그림자의 크기 나 정밀도를 쉽게 늘릴 수 있습니다. 예를 들어, 10px의 큰 그림자를 만들고 0.1px로 증가하려면 코드에서만 변경하면됩니다.

 Text-Shadow : TextShadow (0.1, 10, #e485f8);

교대 색상

우리는 번갈아 가면서 약간의 양념을 원합니다. 우리는 텍스트를 스팬으로 감싸는 개별 문자로 분할됩니다 (수동으로 수행하거나 React 또는 JavaScript로 자동화 할 수 있음). 출력은 다음과 같습니다.

 <p aria-label="손을 씻으십시오!">
 <span aria-hidden="true"> w </span> <span aria-hidden="true"> a </span> <span aria-hidden="true"> s </span> <span aria-hidden="true"> h </span> ...
</p>

그런 다음 스팬에서 nth-Child () 선택기를 사용하여 텍스트와 그림자의 색상을 변경할 수 있습니다.

 . 플레이 스팬 : nth-Child (2n) {
 색상 : #ed625c;
 Text-Shadow : TextShadow (0.25, 6, #f2a063);
}

바닐라 CSS 에서이 작업을 수행했다면 다음은 다음과 같습니다.

 . 플레이 스팬 {
 색상 : var (-텍스트);
 Text-Shadow : 
  6px 6px var (-그림자),
  5.75px 5.75px var (-그림자),
  5.5px 5.5px var (-그림자),
  5.25px 5.25px var (-그림자),
  5px 5px var (-그림자),
  4.75px 4.75px var (-그림자),
  4.5px 4.5px var (-그림자),
  4.25px 4.25px var (-그림자),
  4px 4px var (-그림자),
  3.75px 3.75px var (-그림자),
  3.5px 3.5px var (-그림자),
  3.25px 3.25px var (-그림자),
  3px 3px var (-그림자),
  2.75px 2.75px var (-그림자),
  2.5px 2.5px var (-그림자),
  2.25px 2.25px var (-그림자),
  2px 2px var (-그림자),
  1.75px 1.75px var (-그림자),
  1.5px 1.5px var (-그림자),
  1.25px 1.25px var (-그림자),
  1px 1px var (-그림자),
  0.75px 0.75px var (-그림자),
  0.5px 0.5px var (-그림자),
  0.25px 0.25px var (-그림자);
}


. 플레이 스팬 : nth-Child (2n) {
 --text : #ed625c;
 -쉐이도 : #f2a063;
}

우리가 좋아하는 패턴을 달성 할 때까지 다른 색상과 색인으로 동일한 몇 번 반복 할 수 있습니다.

보너스 포인트 : 애니메이션 추가

동일한 원칙을 사용하여 애니메이션을 추가하여 텍스트에 더 많은 생명을 불어 넣을 수 있습니다. 먼저, 각 스팬을 위아래로 움직일 수있는 반복 애니메이션을 추가합니다.

 . 플레이 스팬 {
 색상 : #5362F6;
 Text-Shadow : TextShadow (0.25, 6, #e485f8);
 위치 : 상대;
 애니메이션 : 1.75S 무한;
}

Prefer-Reduced-Motion Media 쿼리를 사용하여이를 조금 더 최적화 할 수 있습니다. 그렇게하면 애니메이션을 원하지 않는 사람들은 그것을 얻지 못할 것입니다.

 . 플레이 스팬 {
  색상 : #5362F6;
  Text-Shadow : TextShadow (0.25, 6, #e485f8);
  위치 : 상대;
  애니메이션 : 1.75S 무한;
}

@Media 화면 및 (선호 감소 모션 : 감소) {
  애니메이션 : 없음;
}

그런 다음 각 Nth-Child (N)에서 다른 애니메이션 지연을 추가합니다.

 . 플레이 스팬 : nth-Child (2n) {
 색상 : #ed625c;
 Text-Shadow : TextShadow (0.25, 6, #f2a063);
 애니메이션 지연 : 0.3S;
}

위 내용은 CSS 텍스트 그림자로 장난스러운 효과를 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!