박스 그림자 효과를 적용한 6가지 예제를 제공하겠습니다. 각 예제는 다양한 그림자 효과를 박스에 추가하며, 주석과 함께 상세히 설명하겠습니다. 또한, HTML과 CSS를 통합하여 제공하겠습니다.
예제 1: 기본 그림자 효과
<!DOCTYPE html>
<html>
<head>
<style>
/* 기본 그림자 효과 */
.box-shadow {
width: 200px;
height: 100px;
background-color: #3498db;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="box-shadow">기본 그림자 효과</div>
</body>
</html>
예제 2: 내부 그림자 효과
<!DOCTYPE html>
<html>
<head>
<style>
/* 내부 그림자 효과 */
.inner-shadow {
width: 200px;
height: 100px;
background-color: #3498db;
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="inner-shadow">내부 그림자 효과</div>
</body>
</html>
예제 3: 다중 그림자 효과
<!DOCTYPE html>
<html>
<head>
<style>
/* 다중 그림자 효과 */
.multiple-shadows {
width: 200px;
height: 100px;
background-color: #3498db;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
-5px -5px 10px rgba(255, 255, 255, 0.5);
}
</style>
</head>
<body>
<div class="multiple-shadows">다중 그림자 효과</div>
</body>
</html>
예제 4: 외부 그림자 효과
<!DOCTYPE html>
<html>
<head>
<style>
/* 외부 그림자 효과 */
.outer-shadow {
width: 200px;
height: 100px;
background-color: #3498db;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="outer-shadow">외부 그림자 효과</div>
</body>
</html>
예제 5: 그림자 효과 변화
<!DOCTYPE html>
<html>
<head>
<style>
/* 그림자 효과 변화 */
.shadow-transition {
width: 200px;
height: 100px;
background-color: #3498db;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
transition: box-shadow 0.3s; /* 그림자 변경에 트랜지션 적용 */
}
.shadow-transition:hover {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* 마우스 오버 시 그림자 변경 */
}
</style>
</head>
<body>
<div class="shadow-transition">그림자 효과 변화</div>
</body>
</html>
예제 6: 투명한 그림자
<!DOCTYPE html>
<html>
<head>
<style>
/* 투명한 그림자 */
.transparent-shadow {
width: 200px;
height: 100px;
background-color: #3498db;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 투명한 그림자 */
}
</style>
</head>
<body>
<div class="transparent-shadow">투명한 그림자</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| 라운드 코너: 요소의 모서리를 둥글게 처리. (0) | 2023.12.23 |
|---|---|
| 텍스트 강조 효과: 텍스트 강조 효과 추가. (0) | 2023.12.23 |
| 투명도 조절: 요소의 투명도 설정. (0) | 2023.12.23 |
| 링크 스타일링: 하이퍼링크 스타일 변경. (0) | 2023.12.23 |
| 버튼 스타일링: 버튼 디자인 커스터마이징. (0) | 2023.12.23 |