Cursores en css2 y css3
CSS
Publicado el 21 de Agosto del 2013 por Xavi (548 códigos)
4.348 visualizaciones desde el 21 de Agosto del 2013
Código que muestra los distintos cursores para CSS2 y CSS3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cursores en css2 y css3</title>
<style>
h2 {padding-top:20px;}
ul {overflow:hidden;list-style-type:none;}
li {float:left;width:100px;padding:20px;margin:2px;border:1px solid #ccc;}
</style>
</head>
<body>
<h1>Cursores en css2 y css3</h1>
<h2>Cursores CSS2</h2>
<ul>
<li style='cursor:crosshair;'>crosshair</li>
<li style='cursor:default;'>default</li>
<li style='cursor:pointer;'>pointer</li>
<li style='cursor:move;'>move</li>
<li style='cursor:e-resize;'>e-resize</li>
<li style='cursor:ne-resize;'>ne-resize</li>
<li style='cursor:nw-resize;'>nw-resize</li>
<li style='cursor:n-resize;'>n-resize</li>
<li style='cursor:se-resize;'>se-resize</li>
<li style='cursor:sw-resize;'>sw-resize</li>
<li style='cursor:s-resize;'>s-resize</li>
<li style='cursor:w-resize;'>w-resize</li>
<li style='cursor:text;'>text</li>
<li style='cursor:wait;'>wait</li>
<li style='cursor:help;'>help</li>
<li style='cursor:progress;'>progress</li>
</ul>
<h2>Cursores CSS3</h2>
<ul>
<li style='cursor:none;'>none</li>
<li style='cursor:context-menu;'>context-menu</li>
<li style='cursor:cell;'>cell</li>
<li style='cursor:vertical-text;'>vertical-text</li>
<li style='cursor:alias;'>alias</li>
<li style='cursor:copy;'>copy</li>
<li style='cursor:no-drop;'>no-drop</li>
<li style='cursor:not-allowed;'>not-allowed</li>
<li style='cursor:col-resize;'>col-resize</li>
<li style='cursor:row-resize;'>row-resize</li>
<li style='cursor:ew-resize;'>ew-resize</li>
<li style='cursor:ns-resize;'>ns-resize</li>
<li style='cursor:nesw-resize;'>nesw-resize</li>
<li style='cursor:nwse-resize;'>nwse-resize</li>
<li style='cursor:all-scroll;'>all-scroll</li>
<li style='cursor:zoom-in;'>zoom-in</li>
<li style='cursor:zoom-out;'>zoom-out</li>
</ul>
<p><a href="http://www.lawebdelprogramador.com/">http://www.lawebdelprogramador.com/</a></p>
</body>
</html>
No hay comentarios