<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; |
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 | |
top tutorials all programming languages
100
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.
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.
Collection of hand-picked free HTML and CSS button code examples. In this article, we'll see some really cool looking responsive buttons using only a few lines of CSS. You are free to copy, modify and use this code as you wish. All the buttons shown here can scale accordingly to the font-size attribute, and should work in any relatively recent browser.
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 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.
Demo relies on flexbox. The width of the text container will be determined by the length of the text being used Adding more steps to the typing animation will increase the smoothness of the typing Adjust the letter-spacing based on the font-family and font-size being used.
The rainbow has no definite number of physical colours, but seven are traditionally listed. Below is a commonly used list of twenty seven colors in the order seen in a rainbow. Computer screens cannot show them precisely but can make colors that look similar. (Each color shows the number codes used to tell a computer how to display the color.)
online stroke text generator
border stroke text generator,To use this text stroke/outline tool adjust the values and copy the generated code.Text-stroke was implemented in CSS3 and is one of the less well-known of the newer styling features, among which are border-radius and box-shadow. As you can see in the code example above, text-stroke has two properties. The first is the width of the stroke in pixels, the second is the colour of the stroke, which can be given transparency by using an rbga value.
Online Notebook Paper Maker Generator. 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.
online css border generator
Link,text,images, Marquee Generator Text Marquee Generator.Use this HTML marquee generator to create scrolling text or images for your website.Create to customize CSS border styles. The most important being the thickness, its color and the style: solid, dotted, dashed, double, groove, ridge, inset, outset. Set the color transparency for the line surrounding the object and finally the position. Draw the line above, on the right, on the left on the below the HTML element.
online css border radius generator
The border-radius is one of the most used CSS properties to soften corners of HTML boxes. If you use equal border-radius on all corners, it is relatively easy to apply, and you don't need any helper tool to set it. You can either use standard CSS units like pixel (px), rem, em or percentages for border-radius.
REGISTER / LOGIN
web services
web design
Digital Marketing
Technical Support
Create a Website
QR Code Apps
Website SEO Promotion
My Skills
Skills assessment. Although the years working on a skill can provide an indication of maturity and expertise gained, this alone is not enough. Different people have different levels of gaining knowledge and expertise and there are people that have a natural inclination to some specific skills.
