En ocasiones podemos necesitar configurar algunos de los elementos de nuestro sitio web de modo que estos se conviertan de forma automática en texto completamente en mayúsculas, capitalizado (mayúscula la primera letra) o incluso en minúsculas y por suerte, CSS cuenta con una orden para ello.
Por supuesto que nosotros podemos añadir nuestro contenido de la manera que queramos, quiero decir, si quiero que un texto esté en mayúsculas… basta con que lo escriba ASÍ y listo, pero eso no quita que esto siga teniendo su utilidad ya que al establecerlo de forma automática donde queramos pues podremos eludir errores humanos o también hacer una modificación muy rápida de este aspecto en muchos elementos de forma simultánea (imagina que de golpe quieres que todos los h2 de tus posts estén en mayúsculas porque te parece más estético… si tienes 20 posts vale, pero como tengas centenares o más ahí si que tienes un problema).
Esta orden se conoce como «text-transform» y la verdad es que es muy útil por lo ya mencionado, no deja de ser una forma de automatizar las cosas y la automatización es algo que siempre mola mucho porque nos quita faena y el tiempo es oro. Así que nada, ahora te explico en detalle cómo puedes usarla con ejemplos de código como siempre:
Tabla de Contenidos
Propiedades de Text-Transform
Comenzaremos viendo todas las propiedades que tiene la orden «text-transform», que son las siguientes:
- text-transform: uppercase; => La que más se suele utilizar, o al menos la que más utilizo yo. Convertiremos todo lo seleccionado mediante el selector CSS (luego entramos en eso) de modo que tenga todas las letras en mayúscula.
- text-transform: capitalize; => Se añadirá la mayúscula a la primera letra de todas las palabras. Ya Sabes, Algo Así.
- text-transform: lowercase; => Todas las letras se mostrarán en minúsculas.
- text-transform: none; => Para indicar que no queremos que aplique el text-transform al elemento, por si queremos eliminar esta propiedad de un elemento por el motivo que sea. Un ejemplo sería que estés usando una plantilla que aplica un text-transform en un lugar que no te interesa y que por algún motivo sería un problema simplemente retirar esa orden.
Ejemplos de Uso de la Orden
Ahora veremos algunos ejemplos para que se entienda mejor cómo se utiliza esta orden en casos reales en los que podría utilizarse.
Todos los Headings en Mayúsculas
Algo que yo suelo hacer porque me gusta bastante como quedan los headings (encabezados) en mayúsculas, aunque yo más bien suelo hacer lo que veremos en el siguiente ejemplo.
h1, h2, h3, h4, h5, h6 {
text-transform: uppercase;
}
Esto aplicaría el efecto «text-transform uppercase» a todos los headings desde el h1 hasta el h6. Por supuesto puedes personalizarlo si quieres que solo se aplique a algunos de ellos, de hecho es raro que una página web llegue a un nivel de heading tan profundo como lo es el h6, por lo que al final lo que yo suelo añadir es más bien lo siguiente:
Solo los H1, H2 y H3 en Mayúsculas
h1, h2, h3 {
text-transform: uppercase;
}
Pero claro, esto aplicaría a absolutamente TODOS los headings (del 1 al 3) de tu página, algo que puede no interesarte.
Solo Headings de una Sección Concreta en Mayúsculas
Si queremos que solo aplique a ciertos elementos de ciertos sitios, basta con que añadamos el selector CSS que queramos y listo.
Te daré como ejemplo un caso que me parece bastante práctico, que es aplicar el efecto únicamente a los headings que pertenezcan al contenido principal de tu sitio (el contenedor principal de contenido, ignorando el Header, Footer, Sidebar.. etc).
#main h1,
#main h2,
#main h3 {
text-transform: uppercase;
}
Aquí aclarar 2 cosas:
- #main no tiene por qué ser el selector de tu «main content», añade el selector que use tu página para el contenido principal.
- Como ves, en este ejemplo he aplicado un salto de línea tras cada selector en lugar de ponerlos todos seguidos. Realmente puedes hacerlo del modo que quieras, yo suelo hacerlo de este modo, pero para el ejemplo anterior me parecía más intuitivo hacerlo sin saltos de línea.
Headings (del 1 al 3) Capitalizados
h1, h2, h3 {
text-transform: capitalize;
}
Si quieres añadirlo a otros elementos ¡ya sabes!
Links siempre en minúsculas
Si por lo que sea quieres que TODOS tus enlaces siempre estén en minúsculas:
a {
text-transform: lowercase;
}
Si solo quieres que aplique a los enlaces que tú quieras, usa el selector penitente y listo.
Crear Clases para usar esta Orden
Algo bastante práctico que podrías hacer sobre todo si tienes intención de poder usar la orden text-transform de forma manual donde quieras y de forma rápida, es crear clases con dicha propiedad y luego usar esa clase a placer. Voy a hacer el ejemplo con las propiedades «uppercase» y «lowercase»:
.text-uppercase {
text-transform: uppercase;
}
.text-lowercase {
text-transform: lowercase;
}
Teniendo estas clases creadas, ahora solo tendrías que añadirlas al elemento que quieras de tu página tal que así por dar un ejemplo (esto será código HTML ya):
<div id="loquesea"> <h2 class="text-uppercase">Soy un encabezado de algo</h2> <p class="text-lowercase">Soy un texto de ejemplo que Silver está escribiendo rápidamente simplemente para rellenar, podría haber usado un Lorem Ipsum, pero ya es demasiado tarde como para echarse para atrás.</p> </div>
Al aplicar estas clases de este modo aplicaremos los efectos que ya hemos vinculado a dicha clase mediante CSS a los elementos HTML que queramos. En este caso, el «h2» siempre estará todo en mayúsculas y el «p» siempre en minúsculas.
No es lo que más te recomiendo, pero depende mucho de la situación, al final tienes que hacerlo del modo en el que te ahorres más líneas de código.
Esta sería la otra forma de hacerlo:
Primero el HTML: <div id="loquesea"> <h2>Soy un encabezado de algo</h2> <p>Soy un texto de ejemplo que Silver está escribiendo rápidamente simplemente para rellenar, podría haber usado un Lorem Ipsum, pero ya es demasiado tarde como para echarse para atrás.</p> </div>
Como ves, hemos quitado las clases y hemos dejado el id para usarlo como selector. Ahora el CSS:
#loquesea h2 {
text-transform: uppercase;
}
#loquesea p {
text-transform: lowercase;
}
A rasgos generales (hay infinitas posibilidades al final) es mejor usar una clase cuando pretendes luego usarla en muchos sitios distintos. Al crear la clase estás creando en cierto modo una utilidad que luego podrás usar a placer en el HTML.
Yo sé que este tipo de cosas son un poco complejas sobre todo para la gente que se está adentrando en el mundo de HTML y CSS, por lo que ni lo dudes, si tienes cualquier duda o quieres que añada algún otro ejemplo… déjame un comentario y si puedo lo haré. ¡Hasta otra!
He probado muchos proveedores de hosting a lo largo de mi carrera y este es sin ninguna duda el que más te recomiendo de todos ellos. Además, si adquieres algún plan de hosting con mi enlace me estarás ayudando enormemente ya que me darán una comisión por ello.
Más información aquí.
