728x90
반응형
SMALL
그림자 (Shadows)
그림자는 웹 페이지에서 요소에 깊이와 입체감을 추가하는 데 사용되는 CSS 효과이다. 그림자는 주로 text-shadow와 box-shadow 두 가지 유형으로 사용된다. text-shadow는 텍스트에 그림자를 적용하고, box-shadow는 요소의 경 계 상자에 그림자를 적용한다.
html
<!DOCTYPE html>
<html>
<head>
<title>Shadows</title>
<style>
h1.text1 {
text-shadow: 2px 2px 5px red;
}
h1.text2 {
color: #ffffff;
text-shadow: 2px 2px 5px black;
}
h1.text3 {
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
#box1 {
width: 300px;
height: 200px;
padding: 15px;
background-color: red;
box-shadow: 10px 10px 5px grey;
}
.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
.card-header {
background-color: #ff0000;
color: #ffffff;
padding: 10px;
font-size: 40px;
}
.card-container {
padding: 10px;
}
</style>
</head>
<body>
<h1 class="text1">Hello World</h1>
<h1 class="text2">Hello World</h1>
<h1 class="text3">Hello World</h1>
<div id="box1"></div>
<br>
<div class="card">
<div class="card-header">
<h1>1</h1>
</div>
<div class="card-container">
<p>This is a card</p>
</div>
</div>
</body>
</html>
728x90
반응형
LIST
'Programming > Website' 카테고리의 다른 글
| [Website] Columns / TextBox / Flexbox (0) | 2023.05.26 |
|---|---|
| [Website] 트랜지션 (Transition) (0) | 2023.05.26 |
| [Website] 그레디언트 (Gradients) (0) | 2023.05.26 |
| [Website] 가상 클래스 (Pseudo Classes) (0) | 2023.05.26 |
| [Website] CSS 위치 지정 및 배경 (0) | 2023.05.26 |
