Por defecto el navegador te mostrará un color azul a la hora de seleccionar texto o cualquier elemento en tu página o blog. Ésto puede editarse a gusto gracias al pseudo elemento ::selection de CSS3. Agregando un par de líneas de código tendremos el color que queramos en selección. Cabe decir que ésto sólo funciona en navegadores con motor Webkit, Blink (Google Chrome, Opera, Safari, etc) y Gecko (Mozilla Firefox).
::selection funciona directamente en los navegadores Webkit/Blink, pero si deseamos que también sirva en Mozilla debemos agregar ::-moz-selection al CSS con las mismas características.
Hay que tener en cuenta que las únicas propiedades que funcionan en ::selection son color y background.
También es posible asociar un color distinto a cada párrafo de un texto. Un ejemplo de código de ésto sería el siguiente:
Ahora, usando la etiqueta <p> llamamos a la clase con el color correspondiente. Por ejemplo, usando el color rojo y azul sería:
<p class="rojo">PÁRRAFO 1</p>
<p class="azul">PÁRRAFO 2</p>
Veamos en acción lo que puede hacer este nene~
Selecciona este texto. Ahh que lindo verde, ¿no? ;D Ya tenía insertado el código al blog antes así que sirve con cualquier texto jajajaja XDDD. En este caso usé ambas propiedades background y color.
Ahora con tres párrafos de ejemplo, esta vez sólo con fondo de color, sin cambios en el color de letra.
Párrafo 1 - Rojo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nunc sapien, commodo eget velit ut, pretium vulputate ante. Quisque non augue ut lorem malesuada mollis in vel lectus. Nam nec tortor vel elit gravida lacinia non eget arcu. Mauris rutrum sed quam ut pulvinar. Sed malesuada ac arcu a hendrerit. Integer laoreet bibendum dolor non molestie. Pellentesque porta mauris nisi, consectetur eleifend nunc lacinia et. Vestibulum sodales, nisl nec viverra posuere, eros lectus viverra elit, quis interdum tortor lorem eget nisl. Fusce blandit dignissim nunc eget rutrum.
Párrafo 2 - Azul
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nunc sapien, commodo eget velit ut, pretium vulputate ante. Quisque non augue ut lorem malesuada mollis in vel lectus. Nam nec tortor vel elit gravida lacinia non eget arcu. Mauris rutrum sed quam ut pulvinar. Sed malesuada ac arcu a hendrerit. Integer laoreet bibendum dolor non molestie. Pellentesque porta mauris nisi, consectetur eleifend nunc lacinia et. Vestibulum sodales, nisl nec viverra posuere, eros lectus viverra elit, quis interdum tortor lorem eget nisl. Fusce blandit dignissim nunc eget rutrum.
Párrafo 3 - Amarillo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nunc sapien, commodo eget velit ut, pretium vulputate ante. Quisque non augue ut lorem malesuada mollis in vel lectus. Nam nec tortor vel elit gravida lacinia non eget arcu. Mauris rutrum sed quam ut pulvinar. Sed malesuada ac arcu a hendrerit. Integer laoreet bibendum dolor non molestie. Pellentesque porta mauris nisi, consectetur eleifend nunc lacinia et. Vestibulum sodales, nisl nec viverra posuere, eros lectus viverra elit, quis interdum tortor lorem eget nisl. Fusce blandit dignissim nunc eget rutrum.
0 comentarios:
Publicar un comentario