Css3

Cambiar el color del texto seleccionado con css

Por : Jhons_1101
2016-01-12
Tags :
Este sentencia Css es bastante simple. ya que nos puede permite mejorar la apariencia de nuestra sitio web, como ya sabemos La web de hoy día se basa en la metodología "Material Design" o "Flat Design", que no es más que la simplicidad de la información, manejando la sobriedad.
Darle un toque al aburrido color azul que trae por defecto daría un impacto importante a los usuarios y visitantes de tu sitio web se sientan a gustos y vuelvan o permanezcan más tiempo en tu sitio web.

Y es que CSS3 nos permite cambiar el color por defecto del texto seleccionado de una manera muy sencilla.

Basta con definir el "background-color" y el "color", definidos por los patrones "webkit" o "moz" para visualización en demás navegadores.
  • Actualmente Firefox, Chrome, Opera, Safari y IE10 soportan esta funcionalidad, obviamente como sabemos, si la versión del browser no soporta esta característica, simplemente la ignora.

  • Si deseas mas información puedes pulsar el enlace para que le saques mayor provecho a este post.

    compartir en facebook compartir en Google compartir en Twitter compartir en Blogger compartir como código embebido compartir la url
    
    
    ::selection { 
        background:#2abaa4; 
        color:#fff; 
     } /* con esta linea el evento seleccionar sera resaltado por un color de fondo y un color de letra. */
    
    
  • Visualizacion optima de demás navegadores

  • "moz" y "webkit", nos ayudarán a darle la misma apariencia a navegadores como Opera y el tan discutido Internet Explorer
  • 
    
    ::-webkit-selection {
    
        background:#2abaa4; /*Chrome, Safari, Android, iOs */
        color:#fff; 
    }
    
    ::-moz-selection {
        background:#2abaa4;	/*Firefox */
        color:#fff;
    }
    
    ::-o-selection {
    
        background:#2abaa4;	/*Opera */
        color:#fff;
    }
    
    ::-ms-selection {
    
        background:#2abaa4;	/*Microsoft Internet Explorer */
        color:#fff;
    }
    /*  Actualmente este sitio web cuenta con esta opcion para que lo veas en funcionamiento. */
    
    

    El selector ::selection admite las siguientes propiedades CSS:

    color: para establecer el color de fuente background-color: para establecer el color de fondo text-shadow: para establecer un efecto de sombreado del texto Por ejemplo, el siguiente CSS se aplicaría al texto seleccionado contenido en elementos

    :

    
    
    p::selection {
        background: green;
        color: black;
        text-shadow: 1px 1px #fff;
    }
    
    /* Firefox */
    p::-moz-selection {
        background: green;
        color: black;
        text-shadow: 1px 1px #fff;
    }
    
    




    Si este contenido te fue útil, no olvides compartirlo en redes sociales, Considéralo. Puede ser la manera de agradecer!


    Agrega tu comentario...

    Puedes utilizar etiquetas <pre></pre>, <p></p>, <div></div>, + (Nombre usuario, para responderle a alguien)

    U7Gzrqp





    st3v3n1101
    2016-06-02 20:45:35
    Era mas facil de lo parecia
    Jhons_1101
    2016-06-02 20:40:18
    @st3v3n1101, asi es..! siguenos para nuevos post y temas interesantes.. pronto vendrán los cursos

    Cambiar el Color del texto seleccionado



    cambiar el color del texto seleccionado




    Unete al grupo de whatsApp +57 316 392 6456

    Sigue el grupo en facebook

    Siguenos.....