그라데이션 배경을 적용하는 6개의 예제를 제공하겠습니다. 각 예제는 주석과 함께 상세히 설명되며, HTML과 CSS 코드로 구성되어 있습니다.
예제 1: 선형 그라데이션 배경
<!DOCTYPE html>
<html>
<head>
<style>
/* 선형 그라데이션 배경 */
.linear-gradient-bg {
width: 200px;
height: 100px;
background: linear-gradient(to right, #3498db, #e74c3c);
}
</style>
</head>
<body>
<div class="linear-gradient-bg"></div>
</body>
</html>
예제 2: 원형 그라데이션 배경
<!DOCTYPE html>
<html>
<head>
<style>
/* 원형 그라데이션 배경 */
.radial-gradient-bg {
width: 200px;
height: 100px;
background: radial-gradient(circle, #f1c40f, #27ae60);
}
</style>
</head>
<body>
<div class="radial-gradient-bg"></div>
</body>
</html>
예제 3: 각도 그라데이션 배경
<!DOCTYPE html>
<html>
<head>
<style>
/* 각도 그라데이션 배경 */
.angle-gradient-bg {
width: 200px;
height: 100px;
background: conic-gradient(from 90deg, #9b59b6, #34495e);
}
</style>
</head>
<body>
<div class="angle-gradient-bg"></div>
</body>
</html>
예제 4: 그라데이션과 텍스트
<!DOCTYPE html>
<html>
<head>
<style>
/* 그라데이션과 텍스트 */
.gradient-with-text {
width: 200px;
height: 100px;
background: linear-gradient(to right, #3498db, #e74c3c);
color: white;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="gradient-with-text">그라데이션 텍스트</div>
</body>
</html>
예제 5: 그라데이션 중첩
<!DOCTYPE html>
<html>
<head>
<style>
/* 그라데이션 중첩 */
.nested-gradients {
width: 200px;
height: 100px;
background: radial-gradient(circle, #f1c40f, #e74c3c),
linear-gradient(to right, #3498db, #27ae60);
}
</style>
</head>
<body>
<div class="nested-gradients"></div>
</body>
</html>
예제 6: 그라데이션 애니메이션
<!DOCTYPE html>
<html>
<head>
<style>
/* 그라데이션 애니메이션 */
.gradient-animation {
width: 200px;
height: 100px;
background: linear-gradient(to right, #3498db, #e74c3c);
animation: gradientAnimation 3s linear infinite;
}
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
</style>
</head>
<body>
<div class="gradient-animation"></div>
</body>
</html>
'CSS' 카테고리의 다른 글
| 텍스트 회전: 텍스트 회전 효과 적용. (0) | 2023.12.23 |
|---|---|
| 미디어 쿼리: 미디어 쿼리를 사용한 반응형 디자인. (0) | 2023.12.23 |
| 라운드 코너: 요소의 모서리를 둥글게 처리. (0) | 2023.12.23 |
| 텍스트 강조 효과: 텍스트 강조 효과 추가. (0) | 2023.12.23 |
| 박스 그림자 효과: 박스에 그림자 효과 추가. (0) | 2023.12.23 |