https://jsfiddle.net/Kimara/nnj7L0xc/
Custom Cursors
커서 모양을 이미지로 바꿀 수 있다.
모바일용 브라우저, 오페라 에서는 적용 X
익스 6이상 O
style="cursor: url(smiley.gif), url(myBall.cur), auto"
첫번째 이미지(smiley.gif)가 없거나 가져오지 못했을 때, 두번째 이미지(myBall.cur)가 적용되고,
이것도 실패하면 마지막에 설정된 값(auto)이 적용된다.
이미지를 가져오지 못할 경우에 적용될, 마지막 설정(키워드 값)은 반드시 해줘야 한다.
브라우저 호환성을 위해서 url을 먼저 나열한 후, 키워드 값을 입력하도록 한다.
이미지의 크기는 "128 ×128"px 까지 허용되지만, "32 x 32"px 가 적당하다.
반투명(?)한 이미지는 윈도우xp 이전 버전에서는 적용되지 않는다.
익스플로러에서는 gif나 jpg, png 등은 적용되지 않으며, cur 와 ani 파일만 적용된다.
반면, 파이어폭스에서는 ani 파일이 적용되지 않는다.
이미지의 위치(좌표)를 지정할 수도 있으나, 파이어폭스에서만 가능한 듯 하다.
왼쪽 위치를 가리키는 x좌표가 먼저 오고, 그 다음에 위쪽 위치인 y좌표가 온다.
cursor: url(foo.png) 4 12, pointer;
출처 : http://tonks.tistory.com/23
나만의 커서 만들기
http://blog.naver.com/PostView.nhn?blogId=popssong&logNo=70186231775&parentCategoryNo=&categoryNo=21&viewDate=&isShowPopularPosts=false&from=postView
'Web > Styles' 카테고리의 다른 글
[CSS] css기본 규칙들 (0) | 2018.05.21 |
---|---|
[CSS] display:flex (0) | 2018.05.17 |
[CSS] 뷰포트 (0) | 2018.05.15 |
[CSS] 미디어쿼리 (0) | 2018.05.15 |
[CSS] reset.css와 normailize.css (0) | 2018.05.15 |