css cursor properties tutorial
css cursor properties tutorial specifies the type of cursor to be displayed when the mouse pointer is hover over an element.
<span style="cursor: auto;">auto</span>
<span style="cursor: default;">default</span>
<span style="cursor: none;">none</span>
<span style="cursor: context-menu;">context-menu</span>
<span style="cursor: help;">help</span>
<span style="cursor: pointer;">pointer</span>
<span style="cursor: progress;">progress</span>
<span style="cursor: wait;">wait</span>
<span style="cursor: cell;">cell</span>
<span style="cursor: crosshair;">crosshair</span>
<span style="cursor: text;">text</span>
<span style="cursor: vertical-text;">vertical-text</span>
<span style="cursor: alias;">alias</span>
<span style="cursor: copy;">copy</span>
<span style="cursor: move;">move</span>
<span style="cursor: no-drop;">no-drop</span>
<span style="cursor: not-allowed;">not-allowed</span>
<span style="cursor: grab;">grab</span>
<span style="cursor: grabbing;">grabbing</span>
<span style="cursor:e-resize">e-resize</span>
<span style="cursor: n-resize;">n-resize</span>
<span style="cursor: ne-resize;">ne-resize</span>
<span style="cursor: nw-resize;">nw-resize</span>
<span style="cursor: s-resize;">s-resize</span>
<span style="cursor: se-resize;">se-resize</span>
<span style="cursor: sw-resize;">sw-resize</span>
<span style="cursor: w-resize;">w-resize</span>
<span style="cursor: ew-resize;">ew-resize</span>
<span style="cursor: ns-resize;">ns-resize</span>
<span style="cursor: nesw-resize;">nesw-resize</span>
<span style="cursor: nwse-resize;">nwse-resize</span>
<span style="cursor: col-resize;">col-resize</span>
<span style="cursor: row-resize;">row-resize</span>
<span style="cursor: all-scroll;">all-scroll</span>
<span style="cursor: zoom-in;">zoom-in</span>
<span style="cursor: zoom-out;">zoom-out</span>
syntax:
cursor:
| auto | default | none | context-menu | help | pointer | progress | wait | cell |
| crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed |
| grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize |
| se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize |
| nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out |
| [url(cursor file)] | initial | inherit; |
property values
the following table describes the values of this property.
| value | example | description |
|---|---|---|
general | ||
| auto | demo-hover over me | default. browser set a cursor |
| default | demo-hover over me | no any special behavior for the cursor. typically an arrow |
| none | demo-hover over me | no cursor is visible |
links & status | ||
| context-menu | demo-hover over me | specifies that a context-menu is available |
| help | demo-hover over me | specifies that a help information is available |
| pointer | demo-hover over me | specifies that a element can be interacted, when click on it. typically an hand |
| progress | demo-hover over me | specifies that a progress indicator |
| wait | demo-hover over me | specifies that process is running and the user should wait |
selection | ||
| cell | demo-hover over me | specifies that a cells can be selected |
| crosshair | demo-hover over me | specifies that a selection in a bitmap. typically a simple crosshair |
| text | demo-hover over me | specifies that text that can be selected |
| vertical-text | demo-hover over me | specifies that vertical text can be selected |
drag and drop | ||
| alias | demo-hover over me | specifies that an alias or shortcut is created |
| copy | demo-hover over me | specifies that something can be copied |
| move | demo-hover over me | specifies that something can be moved |
| no-drop | demo-hover over me | specifies that an item not able to drop at the current location |
| not-allowed | demo-hover over me | specifies that something can not done |
resize & scrolling | ||
| all-scroll | demo-hover over me | specifies that something can be scrolled in any direction |
| col-resize | demo-hover over me | specifies that something can be resized only horizontally |
| row-resize | demo-hover over me | specifies that something can be resized only vertically |
| n-resize | demo-hover over me | specifies that some edge is to be moved up (north) |
| e-resize | demo-hover over me | specifies that some edge is to be moved right (east) |
| s-resize | demo-hover over me | specifies that some edge is to be moved down (south) |
| w-resize | demo-hover over me | specifies that some edge is to be moved left (west) |
| ne-resize | demo-hover over me | specifies that some edge is to be moved up and right (north/east) |
| nw-resize | demo-hover over me | specifies that some edge is to be moved up and left (north/west) |
| se-resize | demo-hover over me | specifies that some edge is to be moved down and right (south/east) |
| sw-resize | demo-hover over me | specifies that some edge is to be moved down and left (south/west) |
| ew-resize | demo-hover over me | bidirectional resize cursor |
| ns-resize | demo-hover over me | |
| nesw-resize | demo-hover over me | |
| nwse-resize | demo-hover over me | |
zoom and grab | ||
| zoom-in | demo-hover over me | specifies that something can be zoomed in |
| zoom-out | demo-hover over me | specifies that something can be zoomed out |
| grab | demo-hover over me | specifies that something can be dragged to be moved somewhere |
| grabbing | demo-hover over me | specifies that something can be grabbed |
custom | ||
| url(location) | demo-hover over me | specifies the cursor resource location |
initial & inherit | ||
| initial | sets default value of this property | |
| inherit | inherits this property from its parent element | |
html properties tutorial
HTML is the main markup language for web pages, and its elements are the basic building blocks of web pages. HTML is written in the form of HTML elements consisting of tags enclosed in "greater than" and "less than" symbols within the content of the web page.
html property tutorial
css properties tutorial
CSS (Cascading Style Sheets) is a computer language that belongs to the category of style sheet languages used to control the appearance of a document written in a markup language.It is used to control the appearance of a document written in HTML and XHTML, that is, to control the appearance of a web page and a website in general. CSS is a computer language intended to stylistically develop a web page, ie to formulate more features, colors, alignment and gives more features than html. For a beautiful and well-designed website the use of CSS is considered necessary.
javascript properties tutorial
Java is a set of computer software and specifications developed by James Gosling at Sun Microsystems, later acquired by Oracle Corporation, which provides a system for developing application software and its development in a multi-platform computing environment.
creation properties tutorial
In this chapter I call creation I will present you creations html, css and javascript that are very useful and creative in a web site.
css menu bar horizontal & vertical
having easy-to-use horizontal & vertical menu is important for any web site. with css you can transform boring html menus into good-looking horizontal & vertical bars. horizontal & vertical menu is such an important part of your website. it’s how your visitors navigate to the main areas of your site and makes it easy for them to find your good content.
css notebook paper design
Question: I am trying to make a notebook paper on my blog, and i wanted to make horizontal lines in it. I was successfully able to draw one horizontal line using css, but i am unable to find a way to repeat it, so that it can fill the entire page.
answer: this tutorial will show you how to create a notebook themed website using only css.
fancy text generator
a fancy cool font generator that helps create stylish text font styles with beautiful symbols and fancy characters for instagram other places.
online privacy policy generator
online privacy policy generator. Generate a Privacy Policy or a Privacy Notice for your site. Comply with CCPA, GDPR, CalOPPA, Google Adsense and affiliate programs.
online favicon text maker
online favicon text maker, Quickly generate your favicon from text by selecting the text, fonts, the colors, and border. Download your favicon in the most up to date formats.
online meta tag code generator full complete
online html meta tag code generator full complete use for generate your meta information code like meta description, meta keyword etc. just set parameter value and generate Meta code. Search Engine find your web page easy or optimize your website.
online banner text generator
online banner text generator a helpful tool to generate image banner.Upload your assets, company logo, Simultaneously edit text, image and effects directly on all banners.
online 3d text generator
online 3D text generator, a free online 3D tool to create 3D typography. Quick and easy, this online tool helps you create the best text design possible with just a few clicks.It can be used for your company, to create a 3D text logos, or for art. This 3D text maker will only take you a few clicks to create the perfect 3D logo.
online html marquee generator
online html marquee generator.Link,text,images, Marquee Generator Text Marquee Generator.Use this HTML marquee generator to create scrolling text or images for your website.
Online Font Family Generator
Online Font Family Generator, CSS font family generator is a very handy resource for webdevelopers and general. Generate in an instant awesome header text styles or content text styles for your website. More than 1000 font family styles are integrated that you can use.
Online neon text generator
online neon text generator, a free online neon tool to create neon typography. Quick and easy, this online tool helps you create the best text design possible with just a few clicks.It can be used for your company, to create a neon text logos, or for art. This neon text maker will only take you a few clicks to create the perfect neon logo.
If you’d like to send us feedback, or have any other question, please fill out the form below and we will get back to you as soon as possible.