|
   |
| Moderador del foro: ZorG |
| Foro uCoz Ayuda a los webmasters Configuración del diseño Cursores |
| Cursores |
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 Ejemplo de la utilización: Quote SPAN.help { cursor : help; } Cursor determinado por el usuario: url ('ruta al cursor'), cursor estándar 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. 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.
|
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?
|
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: 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: 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.
|
Quote (vialdemo) Whats donde colocamos el codigo?? body Si lo intentas, puedes perder; si no lo intentas, ya has perdido.
|
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™ 
Después de mi larga ausencia. Aquí estoy.
|
| |||
| |||