Por motivos estéticos o como parte de nuestra estrategia SEO, a veces necesitamos aplicar diferentes estilos CSS en el texto de la misma frase.
Ya sean letras sueltas, palabras o grupos de palabras, pintar partes de una frase en un color diferente o asignarle otro tamaño de letra es un recurso visual con resultados súper profesionales.
Suelo recurrir a esta técnica principalmente en los h1
de las páginas «home». Ya sabes que estos deben contener la palabra clave principal y, en teoría, ser el primer texto que se lea en la web. Aunque a veces conseguirlo no resulta tan fácil como parece.
Pues bien, con este método crearemos el efecto de tener varias frases, y lo haremos utilizando solo una oración a la que le aplicaremos estilos diferentes a sus letras o palabras.
Diferentes estilos CSS en el texto de la misma frase, ya sean palabras o letras
Realmente aplicamos estilos diferentes a palabras sin ser muy conscientes de ello. Por ejemplo, cuando asignamos negritas, cursivas o cambiamos de color una cadena de texto dentro de una oración.
Esto es lo mismo pero, en lugar de utilizar formatos predefinidos, lo que haremos es personalizar las letras y palabras de una frase según nuestras necesidades.
Distinto estilo en la primera letra: Letra Capital o «Dropcap»
Como verás en el siguiente ejemplo, para producir el efecto dropcap hay que introducir la letra que pretendemos modificar (en este caso la primera) dentro de una etiqueta <span>
.
See the Pen
Dropcap Sencillo by EBWEB (@Ebweb-es)
on CodePen.
Si quisiéramos que el efecto afectara a la palabra entera, solo habría que rodearla con la etiqueta <span>
para que también se viera modificada por la regla:
<p><span>Lorem fistrum</span> no puedor mamaar a peich fistro tiene musho peligro tiene musho peligro a peich caballo blanco caballo negroorl se calle ustée</p>
En este mismo principio basaremos nuestra técnica para aplicar diferentes estilos a palabras de la misma frase de una página web.
Más trucos con CSS
Aplicar estilos diferentes en cada línea de una misma frase
En el ejemplo verás que el truco está en dividir la frase en varios bloques recurriendo a la etiqueta <span></span>
, y asignarle a cada uno las propiedades que prefieras.
Una vez «despiezada» la frase, podremos manipular cada bloque de forma independiente en función de los conocimientos en CSS que tengamos.
Es importante que tengas en cuenta que, para que las distintas secciones de la frase hagan el salto de párrafo hay que aplicarles la propiedad display:block;
, que hará que ocupe la línea completa, forzando a bajar al siguiente bloque o sección de texto.
See the Pen
vYxdeGv by EBWEB (@Ebweb-es)
on CodePen.
Igual que en otras ocasiones, puedes utilizar la técnica para aplicar distintos estilos CSS dentro de una misma frase en cualquier tipo de página web.
Si te ha gustado comparte