¿Recuerdas los días de la web 1.0 en la cual tenías que personalizar tu sitio de todas las formas posibles? Y además, como todo era nuevo, no existía ni el buen gusto en la red. Todo estaba lleno de gifs animados en zonas donde quedaban horriblemente mal, webs con música que se reproducía automáticamente, barras de navegación de colores fosforescentes que hacían daño a la vista y sobre todo un elemento que estamos pasando por alto y que fue uno de los mayores protagonistas de los albores de esta Internet, los cursores y sobretodo CometCursor. Por si no lo recordáis, CometCursor era un portal web que te permitía crear y usar un montón de cursores personalizados para que los insertases en tu sitio web. Ahora al recordar todo esto, en retrospectiva y de manera nostálgica, no podemos evitar reirnos de los modos en los que hacíamos antes las cosas. Aunque, puede ser que, llevado por esa nostalgia, aún quieras recuperar los cursores personalizados. Si es así, estás de suerte, porque hemos preparado para ti un tutorial sobre como llevarlo a cabo en CSS. Trae el estilo retro a tu página web con este sencillo tutorial.
El CSS
La propiedad cursor CSS acepta una serie de cursores, y usando el valor url() te permite establecer un cursor CSS personalizado:
body {
cursor: url('micursor.ico'), default;
}
Siempre es mejor utilizar el cursor por defecto para los sitios web. Es a lo que los usuarios están acostumbrados y se sentirán incómodos en el caso de que les muestres otro cursor que a ti te parezca "más original". Lo que si es muy buena idea es cambiar el cursor, dependiendo del tipo de elemento en el que nos posemos. Por ejemplo, imagináos que en nuestra página web, queremos que al hacer clic sobre una imagen, esta se amplie con un lightbox. Se podría cambiar el cursor para que, al pasar el ratón por encima de la imagen, se cambie por una lupa con el símbolo más, en vez de una flecha. Siempre hay que tener en cuenta la experiencia en la navegación del usuario, por encima de un diseño bonito. Y para los cursores, es fundamental tener esto en mente.
Y este ha sido el tutorial sobre crear cursores personalizados en CSS, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!