10

Color de "seleccion de texto" personalizado

Gracias a Paula que me envia un email sobre el tema, he descubierto en Web Intenta una forma de conseguir con CSS cambiar el color de fondo de la selección de texto en nuestro blog.
Cuando pasamos el ratón sobre cualquier texto que queremos copiar, el navegador que estamos usando le aplica por defecto un color, aplicando unas líneas de código en la parte del css de nuestra plantilla, podremos escoger el color nosotros mismos.
Pero como casi todo tiene sus limitaciones, el efecto solo es válido, al menos de momento, en Firefox y en Safari.
Podéis ver un ejemplo en la página original del "truco" CSS-Tricks pasando el ratón como si fueseis a copiar el texto.

Aplicar el efecto a todo el blog

En la parte del CSS de nuestra plantilla, antes de ]]></b:skin> por ejemplo, colocamos estas líneas de código (en este ejemplo para el color amarillo):

::selection {
background: #fff2a8; /* Safari */
}
::-moz-selection {
background: #fff2a8; /* Firefox */
}


Aplicar el efecto solo en las entradas del blog

Las líneas del CSS que usaremos entonces serán estas (en el ejemplo de color naranja):

.post p::selection {
background: #FF9933 /* Safari */
}

.post p::-moz-selection {
background: #FF9933 /* Firefox */
}


Aplicar el efecto en una parte del blog concreta

[1] Colocaremos estas líneas de código en el CSS:
p.red::selection {
background: #ffb7b7;
}
p.red::-moz-selection {
background: #ffb7b7;
}


[2] Cada vez que queramos aplicar el efecto, hemos de añadir:

<p class="red"> ........ Aquí el contenido que luego se verá coloreado al pasar el ratón para marcarlo…………………… </p>


[3] Podemos pegar el último código en la plantilla de entrada, que está en "Configuración-formato" de nuestra plantilla, así lo tendremos siempre a mano cuando editemos una entrada y queramos usarlo para una parte de la misma, sino vamos a usarlo se borra y listo.

[4] En el ejemplo he escogido el color rojo (red), pero en CSS-Tricks, están también los códigos para el azul(blue) y el amarillo (yelow), aunque puede usarse cualquier color:

Azul
p.blue::selection {
background: #a8d1ff;
}
p.blue::-moz-selection {
background: #a8d1ff;
}


Amarillo
p.yellow::selection {
background: #fff2a8;
}
p.yellow::-moz-selection {
background: #fff2a8;
}

Entradas Relacionadas:

10 comentarios:


La Blogueria

Hola Rosa, ahi lo acabo de poner, que chachi! todo lo que se pueda manipular... (no me funciono la segunda opcion, para aplicarlo solo en los posts)

Gracias, muy original.

Javier Iglesias

Hola Rosa. Gracias por ayudarme en mi anterior duda. Todo resuelto. Mi siguiente consulta es la siguiente. Como podría colocar en la sidebar un enlace para mi email, es decir, que cuando se pinchara en el directamente se iniciara el correo personal. Lo he visto en vagabundia pero a mi no me sale. Gracias de antemano.

Rosa

Javier, acabo de publicar una entrada con eso que me pides.
¡Saludos!

Rosa

La Blogueria, pues no se, a mi si me funciona lo de los post...brujería de los navegadores, supongo. :-)

La Blogueria

Uy! No me digas más; haberlas haylas y a mí me vienen todas por ahi. :D Igualmente, ni falta que hace, ya es querer el queso rayado en grados.

Besotes!

€r@$$$Mö [EDITOR SUPREMO]

Hola Rosa, está genial el truco pero me ha fallado, resulta que si funciona el cambio de color, pero a cambio lo que obtengo es que arriba de mi imagen personalizada aparece el código que puse.

Tengo imagen personalizada no de la que blogger te deja, es una que yo intriduje en el código antes que dejaran poner una imagen.

Yo le cambié el color xD, esto puse en la minima black antes de donde dijise.

::selection { background: #59e817; /* Safari */ } ::-moz-selection { background: #59e817; /* Firefox */ }

Rosa

Erasssmo, estoy casi segura que eso es porque no lo has puesto justo antes de ]]></b:skin>
sino después.

€r@$$$Mö [EDITOR SUPREMO]

no, no te preocupes, no era eso, simplemente fue un error tonto que ni vale mencionar.

Makubex Reginleif.-

Muchas gracias, funciona a la prefeccion!

Paula

Hola Rosa!
No habia visto es te post! muchas gracias por considerar lo que te escribi :)
Apenas tenga tiempo lo voy a probar en mi blog.
Saludos :D

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S