텍스트에 그라데이션 효과를 적용하는 6가지 예제를 CSS와 HTML로 구성하고 상세히 설명해드리겠습니다. 마지막에는 태그를 한 줄에 10개씩 나열해드리겠습니다.
예제 1: 텍스트 그라데이션 - 가로 방향
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font-size: 36px;
background: linear-gradient(to right, #3498db, #e74c3c);
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<div class="text">Gradient Text</div>
</body>
</html>
이 예제에서는 텍스트에 가로 방향 그라데이션 효과를 적용했습니다. background 속성을 사용하여 linear-gradient로 그라데이션을 설정하고, -webkit-background-clip 속성을 통해 텍스트에만 적용하였습니다.
예제 2: 텍스트 그라데이션 - 세로 방향
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font-size: 36px;
background: linear-gradient(to bottom, #3498db, #e74c3c);
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<div class="text">Gradient Text</div>
</body>
</html>
이 예제에서는 텍스트에 세로 방향 그라데이션 효과를 적용했습니다. background 속성을 사용하여 linear-gradient로 그라데이션을 설정하고, -webkit-background-clip 속성을 통해 텍스트에만 적용하였습니다.
예제 3: 텍스트 그라데이션 - 대각선 방향
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font-size: 36px;
background: linear-gradient(45deg, #3498db, #e74c3c);
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<div class="text">Gradient Text</div>
</body>
</html>
이 예제에서는 텍스트에 대각선 방향 그라데이션 효과를 적용했습니다. background 속성을 사용하여 linear-gradient로 그라데이션을 설정하고, -webkit-background-clip 속성을 통해 텍스트에만 적용하였습니다.
예제 4: 텍스트 그라데이션 - 다중 색상
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font-size: 36px;
background: linear-gradient(to right, #3498db, #e74c3c, #f39c12);
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<div class="text">Gradient Text</div>
</body>
</html>
이 예제에서는 텍스트에 다중 색상 그라데이션 효과를 적용했습니다. background 속성을 사용하여 linear-gradient로 여러 색상을 설정하고, -webkit-background-clip 속성을 통해 텍스트에만 적용하였습니다.
예제 5: 텍스트 그라데이션 - 원형 방향
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font-size: 36px;
background: radial-gradient(circle, #3498db, #e74c3c);
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<div class="text">Gradient Text</div>
</body>
</html>
이 예제에서는 텍스트에 원형 그라데이션 효과를 적용했습니다. background 속성을 사용하여 radial-gradient로 그라데이션을 설정하고, -webkit-background-clip 속성을 통해 텍스트에만 적용하였습니다.
예제 6: 텍스트 그라데이션 - 커스텀 그라데이션
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font-size: 36px;
background: linear-gradient(to right, #3498db, #e74c3c, #f39c12);
-webkit-background-clip: text;
color: transparent;
background-size: 200% 100%;
animation: gradientMove 3s linear infinite;
}
@keyframes gradientMove {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
</style>
</head>
<body>
<div class="text">Gradient Text</div>
</body>
</html>
이 예제에서는 커스텀 그라데이션과 애니메이션을 사용하여 텍스트에 그라데이션 효과를 적용했습니다. linear-gradient로 그라데이션을 설정하고, animation 속성으로 그라데이션을 이동시켜 효과를 줍니다.
'CSS' 카테고리의 다른 글
| 미리보기 이미지 갤러리: 이미지 갤러리 스타일링. (0) | 2023.12.23 |
|---|---|
| 테이블 스타일링: HTML 테이블 스타일 변경. (0) | 2023.12.23 |
| 3D 효과: 요소에 3D 효과 적용. (0) | 2023.12.23 |
| 반복 배경 이미지: 배경 이미지 반복 설정. (0) | 2023.12.23 |
| 뒷 배경 이미지: 요소의 배경에 이미지 추가. (0) | 2023.12.23 |