Keywords: 도메인 연결, 노션 도메인, 브랜딩, 노코드 블로그 만들기
글라스 효과 만드는 가이드
목적
페이지 제목과 하위 제목에 반 투명한 “유리” 느낌과 네온 빛나는 효과를 주어 멋진 디자인을 만드는 방법이에요.
방법
1.
우피 대시보드 > HTML 편집 > 헤더 코드에 아래 CSS 코드를 붙여 넣으세요.
•
이 코드는 웹페이지에 글라스 효과(배경 흐림, 투명 효과)와 네온 테두리(빛나는 효과)를 줍니다.
2.
코드를 저장하고, 브라우저를 새로고침(Ctrl+Shift+R)하여 확인하세요.
<style>
/* 페이지 제목에 글라스 네온 효과 적용 */
.page-title {
background: rgba(255, 255, 255, 0.06); /* 반투명한 흰색 배경 */
backdrop-filter: blur(12px); /* 배경 흐림 효과 */
-webkit-backdrop-filter: blur(12px); /* 구형 브라우저 지원 */
border-radius: 14px; /* 둥근 모서리 */
border: 1px solid rgba(0, 255, 255, 0.3); /* 네온 테두리 (민트/사이버 블루) */
padding: 16px 20px;
transition: all 0.3s ease;
box-shadow: 0 0 8px rgba(0, 255, 255, 0.2),
inset 0 0 4px rgba(0, 255, 255, 0.1);
}
.page-title:hover {
box-shadow: 0 0 12px rgba(0, 255, 255, 0.4),
0 0 24px rgba(0, 255, 255, 0.3),
inset 0 0 8px rgba(0, 255, 255, 0.2);
transform: translateY(-2px) scale(1.01);
border-color: rgba(0, 255, 255, 0.5);
}
/* 하위 제목 (예: Notion의 Heading2, Heading3)에도 적용 */
.notion-h2,
.notion-h3 {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 14px;
border: 1px solid rgba(0, 255, 255, 0.3);
padding: 12px 16px;
transition: all 0.3s ease;
box-shadow: 0 0 8px rgba(0, 255, 255, 0.2),
inset 0 0 4px rgba(0, 255, 255, 0.1);
}
.notion-h2:hover,
.notion-h3:hover {
box-shadow: 0 0 12px rgba(0, 255, 255, 0.4),
0 0 24px rgba(0, 255, 255, 0.3),
inset 0 0 8px rgba(0, 255, 255, 0.2);
transform: translateY(-2px) scale(1.01);
border-color: rgba(0, 255, 255, 0.5);
}
</style>
HTML
복사
HTML 편집 안에 <head>
네온 색상 변경 옵션
원하는 색으로 바꾸고 싶다면 아래 표를 참고하세요.
옵션 이름 | 기본 테두리 색상 | 마우스 올렸을 때 색상 | 설명 |
민트/사이버 블루 | rgba(0,255,255,0.3) | rgba(0,255,255,0.5) | 시원하고 밝은 파란 느낌 |
퍼플 네온 | rgba(170,0,255,0.3) | rgba(170,0,255,0.5) | 부드러운 보라색 느낌 |
핑크 네온 | rgba(255,0,128,0.3) | rgba(255,0,128,0.5) | 따뜻하고 강렬한 핑크 느낌 |
예를 들어 퍼플 네온을 원하면, 코드 안의
rgba(0,255,255,0.3) → rgba(170,0,255,0.3)
rgba(0,255,255,0.5) → rgba(170,0,255,0.5)
로 변경하면 돼요!
