Information & Technology Computer Institution's
 In front of Gandhi Bhawan, Numaish Chauraha Hardoi.
                      ☎ +91 9026728220, +91 8423606968


Please Subscribe My YouTube Channel

Thursday, January 26, 2023

Css Cursor Property (Make Cursors)

How To Make Cursor, Pointer, Loader, Processor, etc.


<!DOCTYPE html>    
https://itcicomputerhardoi.blogspot.com/2023/01/css-cursor-property-make-cursors.html
<html>
<head>
<style>
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.col-resize {cursor: col-resize;}
.context-menu {cursor: context-menu;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: -webkit-grab; cursor: grab;}
.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
</style>
</head>
<body>
<h1>ITCI Computer Hardoi</h1>
<h1>The cursor Property</h1>
<p>Insersion Pointer when you hovering on the text.</p>

<p class="alias">alias</p>
<p class="all-scroll">all-scroll</p>
<p class="auto">auto</p>
<p class="cell">cell</p>
<p class="col-resize">col-resize</p>
<p class="context-menu">context-menu</p>
<p class="copy">copy</p>
<p class="crosshair">crosshair</p>
<p class="default">default</p>
<p class="e-resize">e-resize</p>
<p class="ew-resize">ew-resize</p>
<p class="grab">grab</p>
<p class="grabbing">grabbing</p>
<p class="help">help</p>
<p class="move">move</p>
<p class="n-resize">n-resize</p>
<p class="ne-resize">ne-resize</p>
<p class="nesw-resize">nesw-resize</p>
<p class="ns-resize">ns-resize</p>
<p class="nw-resize">nw-resize</p>
<p class="nwse-resize">nwse-resize</p>
<p class="no-drop">no-drop</p>
<p class="none">none</p>
<p class="not-allowed">not-allowed</p>
<p class="pointer">pointer</p>
<p class="progress">progress</p>
<p class="row-resize">row-resize</p>
<p class="s-resize">s-resize</p>
<p class="se-resize">se-resize</p>
<p class="sw-resize">sw-resize</p>
<p class="text">text</p>
<p class="url">url</p>
<p class="w-resize">w-resize</p>
<p class="wait">wait</p>
<p class="zoom-in">zoom-in</p>
<p class="zoom-out">zoom-out</p>

</body>
</html>





Important Points

alias

The cursor indicates an alias of something is to be created


all-scroll

The cursor indicates that something can be scrolled in any direction


auto

Default. The browser sets a cursor


cell

The cursor indicates that a cell (or set of cells) may be selected


col-resize

The cursor indicates that the column can be resized horizontally


context-menu

The cursor indicates that a context-menu is available


copy

The cursor indicates something is to be copied


crosshair

The cursor render as a crosshair


default

The default cursor


e-resize

The cursor indicates that an edge of a box is to be moved right (east)


ew-resize

Indicates a bidirectional resize cursor


grab

The cursor indicates that something can be grabbed


grabbing

The cursor indicates that something can be grabbed


help

The cursor indicates that help is available


move

The cursor indicates something is to be moved


n-resize

The cursor indicates that an edge of a box is to be moved up (north)


ne-resize

The cursor indicates that an edge of a box is to be moved up and right (north/east)


nesw-resize

Indicates a bidirectional resize cursor


ns-resize

Indicates a bidirectional resize cursor


nw-resize

The cursor indicates that an edge of a box is to be moved up and left (north/west)


nwse-resize

Indicates a bidirectional resize cursor


no-drop

The cursor indicates that the dragged item cannot be dropped here


none

No cursor is rendered for the element


not-allowed

The cursor indicates that the requested action will not be executed


pointer

The cursor is a pointer and indicates a link


progress

The cursor indicates that the program is busy (in progress)


row-resize

The cursor indicates that the row can be resized vertically


s-resize

The cursor indicates that an edge of a box is to be moved down (south)


se-resize

The cursor indicates that an edge of a box is to be moved down and right (south/east)


sw-resize

The cursor indicates that an edge of a box is to be moved down and left (south/west)


text

The cursor indicates text that may be selected


URL

A comma separated list of URLs to custom cursors. 

Note: Always specify a generic cursor at the end of the list, 

in case none of the URL-defined cursors can be used


vertical-text

The cursor indicates vertical-text that may be selected

w-resize

The cursor indicates that an edge of a box is to be moved left (west)

wait

The cursor indicates that the program is busy


zoom-in

The cursor indicates that something can be zoomed in


zoom-out

The cursor indicates that something can be zoomed out


initial

Sets this property to its default value.

inherit

Inherits this property from its parent element.

Please Subscribe My YouTube Channel

Written By:- - No comments:
Labels: , , , , , , ,
Subscribe to: Posts (Atom)