Text Transform
The Art of Text Transformation
With a snap of your fingers and a little CSS magic, you can change the case of your text however you please. A spell that gives your words a certain flair. Let them shine in majestic uppercase or add a gentle touch with soft lowercase letters — all without rewriting the text itself.
It’s like placing a crown on a regal heading or turning a sentence into a whispered secret. The possibilities are endless — and who knows, maybe your headline will soon be politely sipping tea and chatting about its elegant new style! Whether you’re creating a dramatic proclamation or a subtle aside, this spell ensures your text always speaks in the tone you choose. Let your creativity run wild, and transform even the simplest words into something enchanting.
Typography with Character
Give Your Text Personality!
Uppercase
The Loud Call
Uppercase letters are like market criers, demanding attention with booming voices. They give your text a commanding presence and make every message impossible to ignore.
h1 {
text-transform: uppercase;
}The uppercase transformation turns every letter into uppercase, ensuring your words stand tall and proud.
Lowercase
The Gentle, Intimate Whisper
Lowercase letters are like a secret whispered in a quiet garden. They give your words an air of intimacy and charm, creating a serene and understated elegance.
h1 {
text-transform: lowercase;
}The lowercase transformation turns all the letters in your text into soft lowercase characters, perfect for a calm and tranquil vibe.
Capitalize
An Air of Elegance and Refinement
Each word begins with an artful capital letter, giving your text a sense of polished care. This transformation makes every word feel like a small story, adding a touch of sophistication to your writing.
h1 {
text-transform: capitalize;
}The capitalize transformation changes the first letter of every word into a capital letter, making your text look like a refined headline or a storybook title.
Small Caps
A Message From Ancient Times
Small caps evoke the grandeur of ancient inscriptions, exuding dignity, timelessness, and tradition. They add a touch of classical elegance, as though your words were etched in stone for eternity.
h1 {
font-variant: small-caps;
}This transformation converts lowercase letters into smaller uppercase ones, while the original uppercase letters retain their full majesty.
In this lesson, you have learned…
- How to use text-transform: uppercase to turn all letters into uppercase, creating attention and authority.
- Why text-transform: lowercase creates a softer, calmer effect by converting all letters into lowercase.
- How text-transform: capitalize capitalizes the first letter of each word to achieve an elegant and refined look.
- Why font-variant: small-caps produces classic small capitals, giving text a dignified and traditional appearance.
- How to use these text styles to deliberately steer emotions and styles, adjusting your text’s character to the desired effect.
Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!
The Runes of Transformation
Hidden along the secret trails are tablets that shift and change at will – almost as if they had minds of their own. To grasp the magic behind these transformations, you must learn how to digitally reshape text. With CSS, you can breathe life into the runes, transforming letters into new forms – and who knows, they might even whisper a secret or two in the process.
Your Task: Applying Text Transformations
- Uppercase and Lowercase (text-transform):
- Assign the .uppercase class to display text in uppercase letters.
- Use the .lowercase class to render the text in lowercase letters.
- Capitalizing Initial Letters (capitalize):
- Apply the .capitalize class to capitalize the first letter of each word in the text.
- Small Caps (font-variant: small-caps):
- Utilize the .small-caps class and set the font-variant property to small-caps to give the text a timeless, engraved style.
Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}
.small-caps {
font-variant: small-caps;
}
.lowercase {
text-transform: lowercase;
}