Cursor personalizado en CSS..

Habras visto que algunas webs o blogs cuentan con un cursor diferente al establecido, pues esto se puede realizar en nuestro blog de una forma muy sencilla, simplemente utilizaremos una pequeña línea de código en CSS para cursores personalizados..

Antes que todo debemos tener en cuenta que el cursor que utilizaremos tenga la extensión .cur, CSS no especifica el formato del cursor y podría tomarlo como o indicar que es un formato diferente..

Una vez que tengamos nuestro cursor listo y dentro de un pagina que nos ofrezca su enlace procedemos a personalizar el cursor en nuestro blog o pagina.. Si no encuentras un servidor que aloje archivos cur, puedes usar GooglePages, esa es una buena opción..

El código es muy sencillo, solo debemos utilizar la propiedad cursor y el valor, esto se hace mediante la función url(), ahi indicaremos la url o enlace a nuestro cursor..

cursor:url("enlacedelcursor.cur");

Solo cambiamos el enlace del cursor, la opción que esta en color rojo..

Para asignar el cursor a toda la pagina tendríamos que agregar el siguiente código..

<style type="text/css">
body{
cursor:url("enlacedelcursor.cur");
}
</style>

Algunos navegadores no cargan el cursor si este no se ha indicado por defecto, lo que podemos hacer es indicar un cursor básico para que si el cursor personalizado no fuese cargado el cursor básico aparecería en su lugar..

Para efectuar esa practica utilizaremos el código siguiente..

<style type="text/css">
body{
cursor:url("enlacedelcursor.cur"),help;
}
</style>

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

Vista previa:




Entradas relacionadas

Cambiar el color de texto seleccionado con CSS
Dar estilo a las listas con CSS
Cursor personalizado en CSS..
Como agregar bordes directamente a las imagenes..
Insertar archivos SWF en Blogger