Las hojas de estilo en cascada (por sus siglas en inglés, CSS) son una poderosa tecnología de desarrollo web que puedes utilizar para personalizar el cursor de tu ratón en tu sitio o página de MySpace, Xanga o Friendster. Es utilizada para controlar los estilos y la presentación de una página web, especialmente la fuente, el color, el diseño y otras funcionalidades del sitio. Las CSS son herramientas para ahorrar tiempo ya que permiten determinar todas estas funcionalidades en una sola hoja de estilo, en lugar de tener que crear código HTML para cada instancia en que lo necesites. También puedes utilizar las CSS para crear y personalizar el icono del cursor del ratón, simplemente, introduciendo el código de CSS correcto en tu campo HTML. Con CSS puedes crear una gran variedad de efectos, ya que el cursor se irá modificando en base a las condiciones particulares que se definan en el código.
- Nivel de dificultad:
- Moderada
Instrucciones
-
1
Usa los siguientes códigos para mostrar los efectos deseados en el cursor, dentro de tu campo HTML, según se describen los pasos a continuación: {cursor:default}: Cursor de ratón regular, {cursor:wait}: Reloj de arena u otro icono que muestra que la PC está "pensando", {cursor:crosshair}: muestra un icono de una cruz, {cursor:text}: muestra un icono con forma de "I" cuando se esté seleccionando texto, {cursor:pointer}: muestra una mano apuntando, {cursor:help}: Ayuda (Generalmente, muestra un signo de pregunta),{cursor:hand}: Una mano, {cursor:move}: En movimiento, {cursor:n-resize}: Modificar tamaño (apuntando hacia arriba),{cursor:ne-resize}: Modificar tamaño (apuntando hacia la esquina superior derecha), {cursor:e-resize}: Modificar tamaño (apuntando hacia la derecha), {cursor:se-resize}: {cursor:s-resize}: Modificar tamaño (apuntando hacia abajo), {cursor:sw-resize}: Modificar tamaño (apuntando hacia la esquina inferior izquierda){cursor:w-resize}: Modificar tamaño (apuntando hacia la izquierda), {cursor:nw-resize}: Modificar tamaño (apuntando hacia la esquina superior izquierda), {cursor:not allowed}: No permitido, {cursor:all-scroll}: Libre desplazamiento.
-
2
Utiliza este código HTML para cambiar el estilo de tu cursor cuando pasa por sobre un vínculo. Reemplaza "value" con el efecto que desees del Paso 1: head>
-
3
Cambia el estilo del cursor para toda la página completa. Reemplaza "value" con el efecto que desees del Paso 1: html>body {cursor:value}
-
4
Cambia el estilo del cursor para una sección en particular de la página. Reemplaza "value" con el efecto que desees del Paso 1: html>.xlink A{cursor:value}.hlink A{cursor:value}
-
5
Desplaza el ratón sobre un vínculo para ver cómo cambiará tu cursor.
Consejos y advertencias
- Las CSS son soportadas por Internet Explorer 4 en adelante y por Netscape Navigator 6 en adelante.
- Recuerda que a algunas personas les molesta cuando navegan en una página donde el cursor cambia demasiado.
No te pierdas: Galerías de fotos
Read this article in English: How to Customize your Cursor with CSS Code
