CSS를 사용하여 텍스트에 특별한 효과를 만들 수 있습니다. 이번에는
무지개 효과를 만드는 방법에 대하여 알아봅니다. 어떻게 하면 무지개 효과를 만들 수 있을까요? 아래에서 확인해보세요.
# CSS 텍스트 무지개 효과 구현하기
텍스트를 강조하는 방법으로 볼드 효과나 색 또는 그림자 효과를 많이 사용합니다. 하지만
제목 등에 좀 더 강조하려는 목적으로 또 다른 효과를 원하는 경우
무지개 효과를 생각해 볼 수 있습니다. 아래는 텍스트에 css를 사용하여 무지개 효과를 적용하는 방법입니다.
먼저 이를 구현하기 위해 아래의 css 프로퍼티를 사용해야 합니다.
background-image: linear-gradient(90deg, red, orange, yellow, green, blue, navy, purple);
// 배경색으로 무지개를 만듦
-webkit-background-clip: text;
// 배경색이 텍스트에만 적용되도록 함
color: transparent;
// 텍스트의 색을 투명으로 변경되어 배경색이 적용되도록 바꿈
위의 css 프로퍼티를 사용하면 원하는 무지개 효과를 적용하게 됩니다. 위 css의 원리를 생각해보면...
뒷 배경에 gradient 효과를 사용하여 무지개를 만들고 이 배경을 텍스트에만 적용할 수 있도록 하는 것이 가장 큰 원리입니다. 그리고 텍스트에는
배경이 비출 수 있도록 transparent 투명값을 준 것이죠.
그럼 이해를 돕기 위해서 간단한 예제를 만들어보겠습니다.
! CSS 텍스트 그림자 효과 예제보기
먼저 간단한 텍스트 문구를 만듭니다. 문구에는 'Hellow Rainbow'라는 텍스트를 적어볼께요/
<span class="text-rainbow">Hello Rainbow!</span>
다음으로 .text-rainbow에 위의 css를 적용합니다. 적용하면 당연히 레인보우 효과가 나타나겠죠?
.text-rainbow {
background-image: linear-gradient(90deg, red, orange, yellow, green, blue, navy, purple);
-webkit-background-clip: text;
color: transparent;
font-weight: bold;
font-size: 40px;
}
위에서 3줄의 css가 핵심입니다. 그 아래는 좀 더 잘 보이도록 텍스트 볼드와 폰트 크기 조절입니다. 그럼 위 효과를 적용하면 어떻게 나타나는지 실제 구현된 모습을 아래에서 확인해보세요.
@ 실제 예제 구현된 모습
<span class="text-rainbow-test">Hello Rainbow!</span>
<style>
.text-rainbow-test {
background-image: linear-gradient(90deg, red, orange, yellow, green, blue, navy, purple);
-webkit-background-clip: text;
color: transparent;
font-weight: bold;
font-size: 40px;
}
</style>
! 브라우저 지원
IE에서는 현재 지원되지 않습니다. 일부 css의 기능이 적용되지 않기 때문이죠.. 이를 해결하는 방법으로 위 방법이 아닌 svg를 사용하는 방법이 존재합니다 .svg의 mask 효과를 사용할 경우 동일하게 구현할 수 있으나 여기서는 다루지 않겠습니다. 참고만 해주세요.