Cambiar el color de selección con CSS

Cambiar el color de selección con CSS

¿Tienes un sitio web? ¿Deseas personalizarlo al máximo con los colores de tu marca? Hoy vamos a hablar sobre un efecto CSS para darle un toque más personalizado a nuestro sitio web, te mostraré como cambiar el color de selección con CSS para utilizar los colores de tu marca o negocio.

Siempre queremos diferenciarnos de los demás, hablando de nuestra presencia en Internet no es la excepción.

Ya hemos hablado sobre como añadir un icono font awesome en todos nuestros encabezados automaticamente, el efecto CSS de hoy es también muy significativo para darle un toque de personalización más a tu sitio.

Con CSS es posible cambiar el color de selección, es decir, cambiar el color de fondo y del texto al momento en que un usuario seleccione un texto en nuestra web.


¿Sabías que?

¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:

WebEmpresa

cambiar el color de seleccion con css efecto

Como puedes ver es un efecto muy llamativo pero sobre todo nos da la posibilidad  de personalizar nuestro sitio web a fondo con los colores de nuestra marca o negocio.

Hacer este efecto CSS es muy fácil y no requiere grandes conocimientos en hojas de estilo.

Esto se hace gracias al selector selection de CSS y tiene la siguiente compatibilidad:

cambiar el color de seleccion con css compatibilidad

Debemos agregar el codigo necesario para la compatibilidad con cada navegador.

Puedes ver un ejemplo de como cambiar el color de  selección con CSS a continuación:

::selection{
   background:#0274be;
   color:#fff;
}

::-moz-selection{
   background:#0274be;
   color:#fff;
}

::-webkit-selection{
   background:#0274be;
   color:#fff;
}

Para ver más información sobre esta funcionalidad CSS puedes ver la documentación en mozilla.

En una entrada posterior hablaré sobre como personalizar la barra de scroll con CSS para darle aún más personalización a nuestro sitio web.

Espero y este articulo te sea de utilidad, no olvides compartirlo en tus redes sociales y dejarme un comentario con tus preguntas o sugerencias.

Hasta luego!

Clic para valorar esta información
[Total: 0 Promedio: 0]