• Página 1 de 1
  • 1
Moderador del foro: ZorG  
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Cursores
Cursores
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 1 | 5:51 PM
El aspecto del cursor de determina con ayuda de la propiedad CSS cursor.

Propied CSS cursor nos permite instalar nuestro propio aspecto del cursor a los elementos de la página, además se puede utilizar tanto tipos estándares de cursores, como los determinados por el usuario (archivos CUR o cursores SVG).

Propiedad CSS cursor –es una propiedad para modificar el aspecto del cursor.

Para más simplicidad y comprensión dividimos los cursores por grupos...

Cursores estándar
auto – es un cursor de predeterminado para el elemento actual.
crosshair – es un cruce (que parece al símbolo “+”).
default – es un cursor que se utiliza se predeterminado en la plataforma actual. A menudo se expone en forma de una flecha.
pointer – es un cursor expuesto en forma de un indicador que significa un enlace.
move – es un cursor que determina el objeto que ha de estar trasladado.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize – son cursores que significan la posibilidad de mover una parte del objeto.
text – es un cursor que significa el texto que puede estar resaltado. Frecuentemente se expone en forma de una línea vertical "|".
wait – es un cursor que significa la ocupación de un programa y comunica al usuario que éste debe esperar. A menudo se expone en forma de esfera del reloj o reloj de arena.
help - es un cursor que significa que para el objeto indicado por él, hay una información de referencia. Muy a veces se expone en forma de un signo de interrogación o un globo.

Ejemplo de la utilización:

Quote
SPAN.help { cursor : help; }

Cursor determinado por el usuario:
Puede surgir una situación cuando aparece la necesidad en un cursor extraordinario. Entonces habrá que indicar como significado de la propiedad cursor:

url ('ruta al cursor'), cursor estándar
he aquí varios ejemplos ilustrativos:

Quote

P { cursor : url("my.cur"), text; }     
P { cursor : url("my.svg"), url("my.cur"), auto; }

Cuando el navegador se encuentra con la definición de un cursor personalizado, trata de exponer el primer cursor que hay en la lista. Si el primer cursor no puede estar expuesto, el navegador trata de aplicar el siguiente en la lista. Hay que prestar atención aquí que a final de la lista suele haber un cursor estándar. Se hace esto para instalar este cursor en caso de que los demás no hayan sido podido expuestos.

En calidad de los cursores personalizados se utilizan los archivos en formato CUR, ANI o cursores SVG. SVG cursor – es un cursor personalizado donde el mismo cursor comparece como un archivo de la imagen. Hay que recordar también que deben utilizarse en un cursor como mínimo 2 colores con el fin de que éste sea distinguido en diferentes fondos.

Cursores personalizados se mantienen por IE6, Firefox 1.5. Firefox 1.5 mantiene los cursores CUR y SVG, con esto no mantiene el formato ANI. Internet Explorer mantiene los formatos CUR y ANI, pero no “entiende” cursores SVG.

Propiedad cursor es heredada.
También existe un valor más – inherit. Este significado indica que la propiedad se hereda del elemento-padre.
Significado de la propiedad cursor de predeterminado: auto.

Al fin queríamos advertir que no se entusiasmen por los cursores personalizados, deben éstos utilizarse cuando de verdad surge tal necesidad. Por lo demás es mejor ir utilizando cursores estándares. ¡No lo olviden!


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
MrCazper
Mensajes: 1084
Reputación: 33
Mensaje Nº 2 | 10:53 AM
thumb
Muy Buen Post Pero Tengo Una duda
Puedo Yo Agregar Otro Tipo De Cursores Adicionales
y Que Sirvan Como estos Comandos?
Saludos de h Fds!

Contactame mediante mi sitio web:
http://davidmorales.com.mx/
josulite
Mensajes: 12
Reputación: 0
Mensaje Nº 3 | 0:49 AM
GUARAGUAO, A mi me gustaria que me dijeses como puedo añadir un cursor diverente a mi pagina.. como i donde deveria coner los codigos HTML?
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 4 | 1:07 PM
Cambiar el cursor o puntero del ratón por imágenes personalizadas con CSS


Aquí vamos a ver cómo podemos trabajar con cursores de tipo imagen, es decir, cómo podemos cambiar el puntero del ratón para no utilizar la típica flechita, sino una imagen que personalice un poco más el aspecto de nuestro sitio web. Todo ello a través de las Hojas de Estilo en Cascada y en la medida de lo posible, siendo compatibles con todos los navegadores.

Desde CSS 2 se pueden alterar los punteros del ratón para colocar imágenes personalizadas, ya sea a través de ficheros gráficos conocidos, como puede ser el GIF o a través del formato de archivo propio de los cursores, es decir .cur para los cursores normales y .ani para los cursores animados. El modo de trabajo es bien simple, pero donde podremos encontrar dificultad es en la compatibilidad con los distintos navegadores que puede usar un visitante para acceder a nuestra web. No obstante, existen técnicas para intentar solventar posibles fallos de compatibilidad que veremos a continuación.

Sintaxis para declaración de cursores en CSS
El modo en el que se declaran los cursores que se desea utilizar al situar el ratón sobre un elemento es muy parecido, tanto en CSS 2 como en CSS 3. La única diferencia entre esas dos versiones del lenguaje se basa principalmente en el rango de cursores predeterminados que se pueden utilizar (la flecha normal, el cursor que indica "ocupado", la mano que indica enlace, etc).

Para declarar un cursor se utiliza el atributo "cursor:", seguido de las distintas opciones que queremos colocar, por orden de preferencia, separadas por coma. Entre las opciones que podemos utilizar se encuentran imágenes, archivos gráficos de tipo cursor o varias palabras clave para especificar un tipo de cursor predeterminado.

Un ejemplo sería el siguiente:

Quote
body{
   cursor: url(imagen1.gif), url(cursor.cur), pointer;
}


En el anterior caso, el navegador intentará colocar como cursor en el cuerpo de la página la "imagen1.gif" y si no es compatible con ese tipo de archivo gráfico en el cursor, colocará el archivo "cursor.cur" y si tampoco es compatible colocará el cursor predeterminado tipo "pointer" que es la típica flecha del ratón.

Nota: Los tipos de cursor predeterminados para CSS 3 incluyen una gran variedad de punteros que señalan multitud de cosas distintas.

Especial interés tiene el valor "auto", que sería el predeterminado y sirve para indicar que el puntero vaya cambiando según el tipo de contenido sobre el que nos hemos situado. Por ejemplo, que cambie a la mano cuando estamos sobre un enlace o al cursor tipo texto cuando estamos sobre un campo de texto.

Aparte del valor "auto" existen muchos otros valores, cuyo listado podemos ver a continuación:

  • Generales: auto | default | none
  • Links y estado: context-menu | help | pointer | progress | wait
  • Selección: cell | crosshair | text | vertical-text
  • Arrastrar y soltar: alias | copy | move | no-drop | not-allowed
  • Redimensionar y desplazar: e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll

    Esta lista la he sacado de una página de Mozilla Developer Network que explica muy bien la sintaxis y tipos de cursores, cursor donde además podremos ver una imagen de cada uno de los cursores predeterminados.

    Ejemplo de configuración de cursores con archivos externos y alternativa en predeterminado
    Ahora vamos a ver un primer ejemplo de cursores configurados a través de archivos externos de tipo .cur y de tipo .png.

    Quote
    body {
       cursor: url(nat870.cur), pointer;
    }
    h1{
       cursor: url(logodw.png), progress;
    }
    a, a:hover{
       cursor: url(sym596.cur), help;
    }


    Nota: Los cursores de tipo imagen PNG no son compatibles con Internet Explorer, al menos en la versión 9. Por ello, cuando se ponga el ratón encima del titular H1 se mostrará el tipo de cursor predeterminado "progress" en dicho navegador.

    Podemos ver ese ejemplo en una página aparte

    Compatibilidad con los cursores en los navegadores más habituales
    No todos los tipos de cursor son soportados por todos los navegadores y por ello tenemos que tener especial atención a la hora de utilizarlos, de modo que especifiquemos distintas alternativas que sirvan para cada uno de los clientes más habituales. Por ejemplo, en el momento de escribir este artículo, los cursores animados no funcionan en Firefox o Google Chrome.

    En estos momentos podemos tener en cuenta esta lista de posibles valores y sus consideraciones:

  • Los cursores estáticos de tipo .cur los podemos utilizar en todos los navegadores, por lo que son una opción muy indicada si no queremos tener problemas.
  • Los cursores de tipo .ani (cursores animados) solamente funcionan en Internet Explorer, por lo que si deseamos utilizarlos, debemos especificar una alternativa para los otros navegadores.
  • Los cursores de tipo imagen (GIF o PNG) no funcionan en Internet Explorer, por lo que deberíamos asignar una alternativa para este navegador. Cursores tipo JPG no me funcionan
  • El tipo especial de cursor GIF Animado no funciona en Internet Explorer y en Firefox y Chrome solo muestra el primer fotograma del GIF, por lo que no veremos animación.

    Nota: Como sugerencia, si queremos un cursor animado que funcione en Firefox y Chrome, así como Internet Explorer, se me ocurre que podríamos definir con CSS el tipo de cursor "none" (que no muestra ningún cursor) y hacer con Javascript que se muestre una capa acompañando el movimiento del ratón que contenga una imagen animada que queramos utilizar como cursor animado.

    Como se dijo, podemos indicar un cursor a través de distintas alternativas separadas por coma. Veamos el siguiente ejemplo para ilustrar ese uso:
    Quote
    body {
       cursor: url(foo51.ani), url(dw.gif), auto;
    }
    h1{
       cursor: url(spain-white.gif), url(too879.ani), e-resize;
    }
    a, a:hover{
       cursor: url(golf_b.gif), url(use175.ani), pointer;
    }


    El ejemplo anterior se puede ver accediendo a este enlace.

    Puedes verlo tanto en Internet Explorer como Firefox y Chrome para apreciar las diferencias entre unos y otros navegadores, comprobando como los cursores que se muestran serán distintos dependiendo de la compatibilidad que tenga cada browser con cada tipo de cursor utilizado.

    Desplazamiento del cursor
    Queremos acabar este artículo comentando la posibilidad de desplazar la imagen utilizada para el cursor, que es una característica de la definición de las Hojas de Estilo en Cascada CSS 3. Se trata simplemente de asignar unos valores numéricos, coordenadas X e Y, a los cursores que deseemos, para desplazar la imagen del cursor en esa cantidad de píxeles.

    Quote
    body {
       cursor: url(foo51.ani), url(dw.gif) 20 10, auto;
    }


    Como se puede ver, la alternativa de cursor url(dw.gif) tiene los valores 20 10, para producir un desplazamiento de la imagen del cursor en 20 y 10 píxles en las coordenadas X e Y.

    Este detalle de momento no funciona en Internet Explorer 9, por ello es mejor ni utilizarlo por el momento, puesto que IE no entenderá eso y no mostrará ningún cursor, ni siquiera el valor que sí que entendería (cursor foo51.ani).

    Conclusión sobre cursores con archivos gráficos
    El uso de cursores podrá dar un punto adicional de personalización de nuestra página web. Ojo al utilizarlos, puesto que determinados usuarios pueden sentirse extrañados al ver que cambia el puntero del ratón, mostrando formas que quizás no les resulten claras para ellos. De hecho, no creo que utilizar cursores tenga mucha usabilidad, pero la opción está ahí disponible para el que le parezca un detalle estéticamente agradable.

    En definitiva, hemos visto que existen diversas configuraciones de cursores y que podemos utilizar unas u otras dependiendo del navegador, pues no todos los navegadores son compatibles con todos los tipos de cursor. Especificando alternativas nos ahorraremos inconvenientes de uso de cursores que no funcionen en distintas plataformas. Recordar siempre que los cursores .cur funcionan en todos los navegadores, por lo que serán adecuados en cualquier proyecto.

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • monitho2
    Mensajes: 9
    Reputación: 0
    Mensaje Nº 5 | 7:45 PM
    y donde se coloca estos cursores en que parte de la web en hoja de estilos css?
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 6 | 11:52 AM
    monitho2, lee atentamente el tema. Así mismo estudia las cosas de CSS.
    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    vialdemo
    Mensajes: 6
    Reputación: 0
    Mensaje Nº 7 | 10:09 PM
    Whats donde colocamos el codigo??
    josemanuel3800
    Mensajes: 389
    Reputación: 10
    Mensaje Nº 8 | 6:05 AM
    Quote (vialdemo)
    Whats donde colocamos el codigo??


    body

    Si lo intentas, puedes perder; si no lo intentas, ya has perdido.
    Plantillasw
    Mensajes: 277
    Reputación: 6
    Mensaje Nº 9 | 1:28 AM
    http://www.creatupropiaweb.com/recursos/utilidadess_gratuitas_para_tu_blog_y_web_cursores.htm
    http://www.cursores.org/
    http://www.mazosoft.net/mazolandia/cursores.htm
    http://joseluis195835.jimdo.com/para-tu-web/cursores-para-tu-web/

    Paginas de las cuales pueden usar cursores ....

    PLW™ cool

    Después de mi larga ausencia. Aquí estoy.
    MrCazper
    Mensajes: 1084
    Reputación: 33
    Mensaje Nº 10 | 0:42 AM
    Gracias PLantillasw
    Tu Aporte es Bueno smile

    Contactame mediante mi sitio web:
    http://davidmorales.com.mx/
    Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Cursores
    • Página 1 de 1
    • 1
    Búscar: