툴스모아

CSS Cursor Generator

CSS2, CSS3 커서 스타일과 커스텀 커서를 생성하고 미리보기할 수 있는 도구입니다.

CSS2 커서범용 지원

auto
클릭하여 복사
inherit
클릭하여 복사
crosshair
클릭하여 복사
default
클릭하여 복사
help
클릭하여 복사
move
클릭하여 복사
pointer
클릭하여 복사
progress
클릭하여 복사
text
클릭하여 복사
wait
클릭하여 복사
e-resize
클릭하여 복사
ne-resize
클릭하여 복사
nw-resize
클릭하여 복사
n-resize
클릭하여 복사
se-resize
클릭하여 복사
sw-resize
클릭하여 복사
s-resize
클릭하여 복사
w-resize
클릭하여 복사

CSS3 커서최신 브라우저

none
not IE, Safari, Opera
클릭하여 복사
context-menu
not Firefox, Chrome
클릭하여 복사
cell
not Safari
클릭하여 복사
vertical-text
클릭하여 복사
alias
not Safari
클릭하여 복사
copy
not Safari
클릭하여 복사
no-drop
클릭하여 복사
not-allowed
클릭하여 복사
ew-resize
클릭하여 복사
ns-resize
클릭하여 복사
nesw-resize
클릭하여 복사
nwse-resize
클릭하여 복사
col-resize
클릭하여 복사
row-resize
클릭하여 복사
all-scroll
클릭하여 복사
grab
only Webkit and Firefox
클릭하여 복사
grabbing
only Webkit and Firefox
클릭하여 복사
zoom-in
only Webkit and Firefox
클릭하여 복사
zoom-out
only Webkit and Firefox
클릭하여 복사

사용자 정의 커서고급

URL 기반 커서

cursor: url(images/cursor.cur), auto;# required by IE
cursor: url(images/cursor.png) x y, auto;# x y are hotspot coordinates
auto is the fallback cursor when custom cursor fails to load

지원되는 형식

.cur
.png
.jpg
.gif

사용 예시

/* CSS */ cursor: url('custom-cursor.png') 16 16, pointer;

URL 기반 커서

cursor: url(images/cursor.cur), auto;# required by IE
cursor: url(images/cursor.png) x y, auto;# x y are hotspot coordinates
auto is the fallback cursor when custom cursor fails to load

지원되는 형식

.cur
.png
.jpg
.gif

사용 예시

/* CSS */ cursor: url('custom-cursor.png') 16 16, pointer;

접근성 고려사항

  • • 커서만으로 기능을 표현하지 말고 추가적인 시각적 단서를 제공하세요
  • • 고대비 모드에서도 잘 보이는 커서를 사용하세요
  • • 애니메이션 커서는 접근성 설정을 고려하여 제한적으로 사용하세요
  • • 키보드 네비게이션 사용자를 위한 포커스 표시를 함께 제공하세요

성능 최적화

  • • 커스텀 커서 이미지를 미리 로드하여 지연을 방지하세요
  • • CSS 스프라이트를 활용하여 HTTP 요청을 줄이세요
  • • 불필요한 커서 변경을 피하여 성능을 개선하세요
  • • 모바일 환경에서는 커스텀 커서가 표시되지 않음을 고려하세요
    CSS Cursor Generator | toolsmoah