요소에 블러 효과를 추가하는 6가지 예제를 CSS와 HTML로 구성하고 상세히 설명하겠습니다.
예제 1: 텍스트 블러 효과
<!DOCTYPE html>
<html>
<head>
<style>
.blurred-text {
font-size: 36px;
color: transparent;
background-image: url("background.jpg");
background-clip: text;
-webkit-background-clip: text;
text-align: center;
}
</style>
</head>
<body>
<div class="blurred-text">
Blurred Text Effect
</div>
</body>
</html>
이 예제에서는 텍스트에 블러 효과를 적용한 예제입니다. background-clip 및 -webkit-background-clip 속성을 사용하여 텍스트에 배경 이미지를 텍스트 모양대로 클립합니다.
예제 2: 이미지 블러 효과
<!DOCTYPE html>
<html>
<head>
<style>
.blurred-image {
width: 300px;
height: 200px;
background-image: url("image.jpg");
filter: blur(10px);
}
</style>
</head>
<body>
<div class="blurred-image"></div>
</body>
</html>
이 예제에서는 이미지에 블러 효과를 적용한 예제입니다. filter: blur() 속성을 사용하여 이미지를 블러 처리합니다.
예제 3: 배경 블러 효과
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background-image: url("background.jpg");
background-size: cover;
background-position: center;
height: 100vh;
filter: blur(10px);
}
.content {
text-align: center;
color: white;
padding: 20px;
}
</style>
</head>
<body>
<div class="content">
<h1>Blurred Background Effect</h1>
<p>This is some content with a blurred background.</p>
</div>
</body>
</html>
이 예제에서는 전체 배경에 블러 효과를 적용한 예제입니다. filter: blur() 속성을 body 요소에 적용하여 배경 이미지를 블러 처리합니다.
예제 4: 블러 오버레이
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
}
.image {
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
}
</style>
</head>
<body>
<div class="container">
<img class="image" src="image.jpg" alt="Blurred Image">
<div class="overlay"></div>
</div>
</body>
</html>
이 예제에서는 이미지 위에 블러 오버레이를 추가한 예제입니다. backdrop-filter: blur() 속성을 사용하여 오버레이를 블러 처리합니다.
예제 5: 텍스트와 이미지 블러 효과
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.image {
width: 100%;
height: 100%;
filter: blur(10px);
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: white;
}
</style>
</head>
<body>
<div class="container">
<img class="image" src="image.jpg" alt="Blurred Image">
<div class="text">Blurred Text</div>
</div>
</body>
</html>
이 예제에서는 텍스트와 이미지에 블러 효과를 적용한 예제입니다. 이미지에는 filter: blur() 속성을 사용하고, 텍스트는 position 및 transform 속성을 사용하여 가운데 정렬하고 스타일링합니다.
예제 6: 블러 버튼
<!DOCTYPE html>
<html>
<head>
<style>
.button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
filter: blur(5px);
}
</style>
</head>
<body>
<button class="button">Blurred Button</button>
</body>
</html>
이 예제에서는 버튼에 블러 효과를 적용한 예제입니다. filter: blur() 속성을 사용하여 버튼을 블러 처리합니다.
'CSS' 카테고리의 다른 글
| 탭 메뉴 스타일링: 탭 메뉴 디자인 커스터마이징. (0) | 2023.12.23 |
|---|---|
| 헤더 및 푸터 스타일링: 웹 페이지의 헤더와 푸터 디자인. (0) | 2023.12.23 |
| 풀스크린 배경 이미지: 전체 화면 배경 이미지. (0) | 2023.12.23 |
| 카드 디자인: 카드 레이아웃 스타일링. (0) | 2023.12.23 |
| 미리보기 이미지 갤러리: 이미지 갤러리 스타일링. (0) | 2023.12.23 |