CSS3 New Cursor Styles

Today HTML5 and CSS3 becomes a hit. The new elements in HTML5 and news styles in CSS3 has encourages us to try it on our website. CSS3 is evolving rapidly and you will find some interesting styles and will realize how easy it is to style something that was so hard before.

One of the new styles is the cursor. In CSS2, we already know some of cursor styles, like: auto, inherit, crosshair, default,help, move, pointer,progress, text, wait, e-resize,n-resize,ne-resize, nw-resize, se-resize, sw-resize,s-resize and w-resize.

In CSS3 we have more cursor styles to choose. here is the list

  • cursor: none (not IE, Safari, Opera)
  • cursor: context-menu (not Firefox, Chrome)
  • cursor: cell (not Safari)
  • cursor: vertical-text
  • cursor: alias (not Safari)
  • cursor: copy (not Safari)
  • cursor: no-drop
  • cursor: not-allowed
  • cursor: ew-resize
  • cursor: ns-resize
  • cursor: nesw-resize
  • cursor: nwse-resize
  • cursor: col-resize
  • cursor: row-resize
  • cursor: all-scroll

These styles works in most latest popular browser like Mozilla, Chrome and Opera. In IE these styles work in IE9.

Be Sociable, Share!

Related Posts:

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *