Aprende como cambiar el cursor de los elementos de tu sitio web con CSS.
Muchas veces cuando estamos trabajando con sitios web, sobre todo con aplicaciones web e interfaces, requerimos cambiar los cursores de los elementos, por ejemplo en ciertas ocasiones queremos cambiar la típica flechita por la manita que aparece cuando pasamos el mouse sobre un enlace.
Para este articulo asumo que ya tienes conocimientos básicos de HTML y CSS, si aun no aprendes estos lenguajes aquí tienes mi curso básico de HTML desde 0 y mi curso básico de CSS desde 0.
Establecer cursores diferente es muy importante para darle a entender al usuario que puede clickear un elemento, que puede cambiarlo de tamaño, moverlo, etc.
Es por eso que existe una propiedad CSS llamada cursor que nos permitirá establecer que tipo de cursor queremos usar en cada elemento.
Lo único que tenemos que hacer para cambiar el cursor de un elemento es aplicar la siguiente propiedad CSS con el valor del cursor que quieres para ese elemento, de esta manera:
div {
cursor:pointer;
}
En este ejemplo anterior lo que hacemos es cambiar todos los cursores de los div cambiamos la típica flecha por un puntero como el que aparece cuando pasamos el mouse arriba de un enlace.
Existen 37 tipos de cursores que podemos utilizar, aquí los ejemplos de cada uno de ellos asi como el nombre de valor que reciben.
See the Pen Cursores CSS by Carlos Arturo Esparza (@falconmasters) on CodePen.5968
Agregar una imagen como cursor
Como quizá ya pudiste haber observado en el cursor de URL podemos agregar nuestra propia imagen, esto por si quieres tener un cursor personalizado, en el ejemplo anterior yo agregue mi logotipo. Para hacer esto tenemos que utilizar la propiedad cursor con su valor url y la dirección de la imagen en formato .gif, quedándonos de la siguiente manera:
.url{cursor:url(http://falconmasters.com/img/cursor.gif), auto;}
Después de la url, he puesto el valor auto, de esta forma si no se encuentra o carga el cursor de la url podemos establecer que utilice un cursor automático.
Si quieres saber mas acerca de cada tipo aquí tienes un enlace de la W3C.
Que buen articulo, soy un niño de 12 años que ha visto la mayoría de tus curso y tutoriales y quiere a agradecerte por dar esos tutoriales y cursos muy buenos y gratis.
Este articulo ya lo había visto pero no lo explicaron bien como tu Carlo Arturo
También quería pedirte si podías hacer un curso de php
Gracias
Muchas gracias a ti, sobre PHP, es posible que pronto haga un curso basico.
Disculpa Carlos, Tengo una duda, ¿Podrías hacer un vídeo o un post sobre como hacer el cuadro donde se ve el código y el resultado? Me encanta que al darle click salga un triangulo por abajo, queda muy bien, y eso de meter el código y que se vea hasta con colores es genial, Pero no se me ocurren muchas formas de hacerlo. Gracias
Carlos Arturo! si quiero poner una img que tengo guardada en mi escritorio como le hago?
Pos pasa la imagen, dentro de la carpeta de de tu archivo, ejemplo si vas hacer un calculadora, lo recomendable es crear un caperta con el mismo nombre en donde mas a guardas, tus css,js,php para ese proyecto, crea un carpeta llamada img o imagen como gusta y la metes y despues la llamas desde esa carpeta, ejemplo: IMG/tuimagen,jpeg
si se pueden imagenes gif? yo lo he intentado y nada
e creado una imagen .gif en gimp pero ns como puedo conseguir la direccion de la imagen para ponerla como cursor, alguien me podria ayudar?? gracias
Una consulta e visto en muchas web ee como lo puedo esplicar cuando quieres ingresar algo en algun formulario o login hay una linea que parpadea como puedo cambiar el color ? o no se puede
Alguna dimensión especifica que deba de tener la imagen para la propiedad «url» ?
Interesante