필터
CSS filter와 backdrop-filter를 단축 클래스로 지원합니다.
Filter
| 클래스 | CSS |
|---|---|
fb5px | filter: blur(5px) |
fbr120p | filter: brightness(120%) |
fc80p | filter: contrast(80%) |
fg100p | filter: grayscale(100%) |
fhr90deg | filter: hue-rotate(90deg) |
fi100p | filter: invert(100%) |
fo50p | filter: opacity(50%) |
fsa200p | filter: saturate(200%) |
fse100p | filter: sepia(100%) |
Backdrop Filter
bf 접두사를 사용합니다. filter와 동일한 함수를 지원합니다:
| 클래스 | CSS |
|---|---|
bfb5px | backdrop-filter: blur(5px) |
bfb12px | backdrop-filter: blur(12px) |
bfbr80p | backdrop-filter: brightness(80%) |
Drop Shadow
fds{X}px{Y}px{blur}px{HEX6}| 클래스 | CSS |
|---|---|
fds2px4px8px000000 | filter: drop-shadow(2px 4px 8px #000000) |
사용 예시
<!-- 이미지 블러 -->
<img class="fb5px" src="..." />
<!-- 흑백 이미지 (호버 시 복원) -->
<img class="fg100p hover-fg0p tall200msease" src="..." />
<!-- 글래스모피즘 효과 -->
<div class="bfb12px bg0-0-0-50 br12px p2rem">
배경이 블러되는 오버레이
</div>