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;
}

0 comentarios:

Publicar un comentario