Los navegadores utilizan cursores de manera predeterminada, estableciendo cuál será el que se muestra de acuerdo al tipo de etiqueta pero, como casi todo, esos valores pueden ser cambiados utilizando CSS. En este caso, al propiedad que los define es:
cursor: valor;
Esos valores posibles son muchos e inclusio varian de navegador en navegador; algunos no producen efectos y otros son iguales entre si.
El valor por defecto es auto; el valor default muestra la fecha típica de selección y si usamos el valor none no se mostrará ninguno:
Es común ver que muchos utilizan el valor
hand para indicar enlaces pero, esto es un error ya que es un cursor que sólo es soportado por
Internet Explorer; para indicar un enlace, debe usarse
pointer que mostrará lo mismo en todos los navegadores:
cursor: pointer;
Claro que, al entrar en al era del CSS3, a esos cursores se les han sumado algunos otros que por ahora, sólo son visibles en Firefox, Chrome, Safari y Opera pero, que pueden usarse sin problemas ya que la propiedad puede ser definida varias veces; de hecho, tendremos que definirla varias veces para usar estos nuevos modelos porque cada navegador tiene su propio valor.
Hay cuatro modelos disponibles:
cursor: grab;
cursor: grabbing;
cursor: zoom-in;
cursor: zoom-out;
Para utilizarlos, debemos colocar los valores con sus respectivos prefijos: -moz- para Firefox, -webkit- para Chrome y Safari y -o- para Opera:
cursor: -moz-grab; cursor: -webkit-grab; cursor: -o-grab; cursor: grab;
cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: -o-grabbing; cursor: grabbing;
cursor: -moz-zoom-in; cursor: -webkit-zoom-in; cursor: -o-zoom-in; cursor: zoom-in;
cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: -o-zoom-out; cursor: zoom-out;
Aparentemente, la
w3.org dice que habrá otors tres pero no parece que aún hayan sido incorporados a ningún navegador:
cursor: count-down;
cursor: count-up;
cursor: count-up-down;
12 comentarios:
Muy interesante Jmiur!
Hola JMiur, soy yo otra vez, espero que estés bien, :D empecé a trabajar con la plantilla "Mínima", eliminé todas las variables que tenía por defecto ya que me confunden un poco y se veían un poco desordenadas, quiero tener el código lo más limpiecito y simple posible, estaba probando poco a poco para ver qué significa cada cosita que hay allí y noté lo siguiente:
#header-wrapper {
¿Por qué razón está ese # allí?
Cuando lo quito hay una línea en el encabezado que desaparece pero no entiendo muy bien el significado de ese numeral :(
Ilumíname un poquito por favor ;) gracias de antemano.
El numeral indica que la regla se aplica a una etiqueta indicada mediante un atributo ID. Mira la diferencia que existe entre los distinto selectores.
Gracias JMiur, leí la entrada, aunque confieso que me confundí un poco, por lo que entiendo es como una especie de definición de variable a la que se le asignan ciertas características :$
En fin, he estado modificando la plantilla mínima de mi blog, no me ha quedado tan mal, pero hay algo que no consigo modificar, cuando le doy clic al enlace de comentarios el color de la letra del título de la entrada cambia de amarillo a negro, ¿como puedo hacer para que se mantenga de color amarillo? :)
Eso es porque el título de la entradas individuales no es un enlace (seria aconsejable que lo sea) y por lo tanto, las propeidades de estilo son las indicadas en esta regla:
.post h3 { }
En el home si son enlaces y por lo tanto se rigen por lo definido en esta otra regla:
.post h3 a, .post h3 a:visited, .post h3 strong { }
Jajajaja ¡¡¡muchas gracias!!! :D
Ya lo ajusté, la solución más obvia siempre es la más simple, coloque el color amarillo en el .post h3{}
.post h3 {
background: #1c1c1c;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 18px;
font-size: 20px;
font-weight:bold;
line-height:1.4em;
border: 1px dotted #ffffff;
color: #ffff00; <-------------Esto arregló todo :P
Y aproveché de ajustar otra cosita que era similar, nuevamente gracias, es probable que pronto comience con lo más difícil... publicar entradas :)
Ah!! lo olvidaba!! hay un par de cosas más que me tienen la vida triste pero por el momento te preguntaré por una:
Los bordes para videos de Youtube (o cualquier otro)
Tengo un borde para imágenes:
.post img, table.tr-caption-container {
padding:4px 4px 4px 4px;
margin:5px 5px 5px 3px;
border:1px dotted #ffffff;
background:#1c1c1c;
¿Cómo puedo aplicar esto mismo a los videos? vi algo relacionado a esto en un video tutorial de youtube pero... quedé así :o
P.D.: ¿Por qué Blogger no refresca las foto perfil de los comentarios?
Los videos se muestran en etiquetas OBJECT o EMBED y, en el caso de YouTube y otros, ahora se usa un IFRAME así que para ponerles alguna clase de borde, deben ser insertados dentro de algu DIV dimensionado y ponerle ese borde al contenedor.
El avatar de los comentarios se corresponde con la fecha de publicación del comentarios y si el usuario modifica ese avatar, los cambios sólo se reflejarán en los nuevos comentarios.
Yo estoy usando el cursor de 'la interrogación' para el Feed-Rss :-D
Gracias amigo!
Salu2!!
¡Gracias JMiur! no supe colocarlo en el código de la plantilla pero si lo hice en el código de la entrada :D ya tiene los mismos bordes que las imágenes :)
Gracias, me ha ayudado mucho este post, sólo me falta algo ¿Cómo puedo aplicar zoom-in y zoom-out al cursor en Internet Explorer, no sale, alguna idea?
No funcionará en IE, tal como dice la entrada, sólo es vicible en Firefox, Chrome y Opera.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...