Well we sometime bore using the same same and same cursor or the theme of cursors on every website. Want to try some or make some new sets of cursor for your website or blog? Here's how to do it using CSS.
So we start From CSS. CSS has cursor property in which you can specify the cursor styles.At the date of writing this post, cursor has 36 types of cursors you can use.They can be further extended by using our own cursors in image files or .cur(cursor file type).
For more browser compatibility info, visit Mozilla.
Inherit and initial are also supported in cursor's value field.
Now the question is- How to implement custom cursors to the websites?
For that you need to use css cursor property.
To apply to the whole HTML page, use this in body instead-
This can be very useful especially in web apps of a special theme-sort.Thanks for reading do follow CSS-Magz.
So we start From CSS. CSS has cursor property in which you can specify the cursor styles.At the date of writing this post, cursor has 36 types of cursors you can use.They can be further extended by using our own cursors in image files or .cur(cursor file type).
auto
default
none
help
pointer
progress
wait
cell
crosshair
text
vertical-text
alias
copy
move
no-drop
not-allowed
all-scroll
col-resize
row-resize
n-resize
s-resize
e-resize
w-resize
ns-resize
ew-resize
ne-resize
nw-resize
se-resize
sw-resize
nesw-resize
nwse-resize
Syntax for cursor
You can apply the above cursors to your body tag or any particular HTML element.The syntax vaild in all the browsers is given below.element{
cursor: value;
}
In the value field, all the cursors you tried by hovering above can be applied.For example,element{
cursor:cell;
}
The cursor is supported in all the desktop browsers(of-course, they will not come in mobile or touch screens).cursor: none; is not supported until Firefox 3, Safari 5, and Chrome 5 and not at all supported in Internet Explorer or Opera.not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize are not supported in Internet Explorer and Opera.For more browser compatibility info, visit Mozilla.
Inherit and initial are also supported in cursor's value field.
Cursor using URL
You can define or design your own cursor for your website like below or download form websites which provides free cursors.
For that you need to use css cursor property.
.element{ cursor: url(images/cursor.png), auto; }where you need to add the image cursor file URL or .cur file, and auto is fallback here.Any other can also be used depending on situation.Image URL cursors not at all supported in Opera till now.
To apply to the whole HTML page, use this in body instead-
body{ cursor: url(images/cursor.png), auto; }
Live Demo
This can be very useful especially in web apps of a special theme-sort.Thanks for reading do follow CSS-Magz.
0 Please Share a Your Opinion.:
Comment something useful and creative :)