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
1 2 3 4 |
.first:first-letter{ font-size: 1.5em; color:rgba(255,94,53,0.7); } |
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.
1 2 3 4 |
.decoration{ text-decoration-line: underline ; text-decoration-color:#4AF8FF; } |
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.
1 2 3 4 |
.shadow{ /*text-shadow: distancia-vertical distancia-horizontal desenfoque color ( en RGBA o Hexadecimal )*/ text-shadow: 0px 4px 1px rgba(255,94,53,0.7); } |
Texto con sombra
5. Cambiar un texto al seleccionarlo
Pseudo selector ::selection
1 2 3 |
.selection::selection{ background: rgba(94,23,66,0.3); } |
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.
1 2 3 4 5 |
.break-all{ word-break: break-all; border:1px solid rgba(0,0,0,0.15); width: 300px; } |
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.
1 2 3 |
.hypens{ hyphens: auto; } |
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.
1 2 3 4 |
.last{ text-align: justify; text-align-last: right; } |
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:
Se produjo un error. Por favor, inténtelo de nuevo más tarde. |
Presupuesto
0 comentarios