feed twitter facebook LinkedIn facebook

CSS » Cursor personalizado en CSS

enero 10, 2008 por Víctor Cuervo 5 Comentarios Imprimir Imprimir

Mediante CSS podemos modificar el comportamiento del cursor. De una forma básica mediante las las opciones básicas que nos ofrece CSS para cursores o bien indicando un cursor personalizado.

Lo primero será hacernos con un cursor. Estos archivos tienen la extensión .cur. Si bien, la especificación CSS no entra a especificar el formato del cursor. Incluso indica que podría ser un formato SVG.

Una vez que tengamos el cursor en una URL accesible desde la página, procedemos a personalizar el cursor en nuestra página.

Para ello tendremos que utilizar la propiedad cursor y como valor, mediante la función url(), indicarle la URL donde está el cursor.

  1. cursor:url("micursor.cur");

Esta propiedad se la podremos asignar al elemento de la página donde queremos que aparezca el cursor. Puede ser sobre un enlace (A), sobre toda la página (BODY),... En el caso de que sea sobre toda la página, el código sería el siguiente:

  1. <style type="text/css">
  2. body{
  3. cursor:url("micursor.cur");
  4. }
  5. </style>

Después del cursor es una buena práctica el que se indique un cursor de los básicos, para que, en caso de haber problemas con la carga del cursor personalizado, pueda aparecer un cursor.

  1. <style type="text/css">
  2. body{
  3. cursor:url("micursor.cur"),crosshair;
  4. }
  5. </style>

En este caso hemos indicado el cursor "crosshair" por defecto.

Algunos navegadores no cargar en cursor personalizado si no se ha indicado el cursor por defecto. Así que es bueno seguir esta práctica.

CSS » Punteros del ratón con CSS

octubre 25, 2007 por Víctor Cuervo 5 Comentarios Imprimir Imprimir

Gracias a la especificación CSS vamos a poder modificar las propiedades referentes al puntero del ratón. Para ello deberemos de utilizar la propiedad cursor, la cual puede tener los siguientes valores:

  • crosshair
  • hand
  • move
  • text
  • wait
  • help
  • e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
  • default

Para aplicárselo a un elemento, utilizaremos la etiqueta HTML STYLE. Por ejemplo, vamos a aplicárselo a un enlace, es decir, a un elemento del tipo A:

  1. <a href="#" style="cursor:crosshair;">Enlace</a>