Seleccionar página
febrero 14, 2019

9 Propiedades de css para texto muy poco conocidas

por | CSS

Hoy me gustaría mostraros algunas propiedades de CSS para texto poco conocidas aunque si pueden resultarnos muy prácticas en algunos momentos o proyectos.

1. Mejorar la legibilidad de una fuente

font-smoothing: antialiased

¿Alguna vez has utilizado una tipografía pero esta aparecía borrosa? Con esta propiedad podrás mejorar su aspecto y eliminar ese molesto desenfoque. Ojo esta propiedad hace que el navegador tenga que procesar el texto y por ello el tiempo de carga es aumenta. Aquí tienes una imagen de ejemplo:

2. Cambiar de estilo primera letra de un texto

Pseudo selector :first-letter

Editando la primera letra

3. Cambiar el color de subrayado de texto

text-decoration-color

Esta propiedad es simple con ella cambiamos el color del subrayado de los textos tal y como te muestro en el ejemplo de abajo.

Texto subrayado con color

4. Añadir sombra a nuestro texto

text-shadow

Esta propiedad de texto es de la más conocida de todas las que he incluido en el post pero lo he decidido hacer por si alguno la desconocías.

Texto con sombra

5. Cambiar un texto al seleccionarlo

Pseudo selector ::selection

Al seleccionar el texto cambiará el color de fondo

6. Romper una línea de texto

word-break: break-all

Normalmente los saltos de texto en HTML sólo ocurren cuando hay un espacio en en el texto o utilizamos un guión. Con esta propiedad los saltos de línea se crean en cualquier momento cuando el texto llega al borde del contenedor.

Loremipsumdolositamet,consectetur.

 

 

Loremipsumdolositamet,consecteturadipiscingelit.Intristiqueauctorcongue.

7. Separar un texto con guiones

hyphens:auto

Esta propiedad no es muy conocida en CSS, como ves estamos hablando de los típicos guiones automáticos que solemos utilizar con los textos justificados.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat congue ante, a sollicitudin nisi vehicula at. Phasellus semper pulvinar pulvinar. Praesent fringilla at leo a aliquam. Aenean malesuada nunc vel eleifend pellentesque. Integer tempus tellus felis, eu commodo est finibus in. Nunc lacinia, nulla vitae tempus auctor, augue sem interdum tortor, bibendum tincidunt est neque eu magna. Mauris eget velit diam.

8. Cambiar la alineación de la última linea de un parrafo

text-align-last: right

Como se muestra en el ejemplo este párrafo está justificado pero modificamos vamos a alinear a la derecha la última línea.

Aliquam eleifend purus vitae lacus ultrices aliquam. Vestibulum aliquet lectus nisi, eget semper risus malesuada gravida. Integer sed neque tortor. Mauris tempor turpis nec justo eleifend, ac lacinia tortor elementum. Donec risus nisi, tristique vitae aliquet nec, aliquam non augue.

9. Añadir tres puntos a una palabra cuando es más larga que su contenedor

text-overflow: ellipsis

Es importante saber que para que está propiedad tenga efecto tal y como muestra abajo hay que aplicar otras dos propiedades de esta forma:

Presupuesto

Anto Fernández

Anto Fernández

Mi nombre es Anto Fernández y gestiono este blog. En el puedes encontrar recursos que yo mismo he generado de tereceros acerca de diseño y maquetación web.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

NO TE PIERDAS NADA

SUSCRÍBETEA MI LISTA

Recibe en tu correo los nuevos post y contenidos de mi blog.

Revisa tu correo, sólo queda que confirmes tu suscripción al blog.