그라데이션 텍스트

소개

이 랩에서는 CSS 에서 그라데이션 텍스트의 개념을 탐구합니다. 이 랩의 목적은 linear-gradient() 함수를 사용하여 그라데이션 텍스트를 생성하는 방법과 webkit-text-fill-color 및 webkit-background-clip 속성을 사용하여 텍스트를 그라데이션 배경으로 채우는 방법을 이해하도록 돕는 것입니다. 이 랩을 마치면 웹 페이지 디자인을 향상시킬 수 있는 시각적으로 매력적인 그라데이션 텍스트를 만들 수 있습니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

index.html 및 style.css는 이미 VM 에 제공되어 있습니다.

텍스트에 그라데이션 색상을 적용하려면 CSS 속성을 사용할 수 있습니다. 먼저, linear-gradient() 값을 사용하여 background 속성을 사용하여 텍스트 요소에 그라데이션 배경을 지정합니다. 그런 다음, webkit-text-fill-color: transparent를 사용하여 텍스트를 투명한 색상으로 채웁니다. 마지막으로, webkit-background-clip: text를 사용하여 텍스트로 배경을 클리핑하고 텍스트를 그라데이션 배경으로 색상을 채웁니다. 다음은 예시 코드 조각입니다.

<p class="gradient-text">Gradient text</p>

.gradient-text {
  background: linear-gradient(#70d6ff, #00072d);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 32px;
}

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 그라데이션 텍스트 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

CSS 를 이용한 그라데이션 텍스트 생성

소개

그라데이션 텍스트

요약