Introduction
Today I return to share with you a CSS3 property that until recently was unknown to me. This property will allow us to capitalize, upper case and lower case any text using CSS in this way we will avoid using Javascript for it by introducing a small optimization in our application.
Examples
capitalize
<p class="example-text-transform">
hello this is a sample text to be able to demonstrate the use of the CSS3 text-transform property
<p>
.example-text-transform {
text-transform: capitalize;
}
uppercase
<p class="example-text-transform">
hello this is a sample text to be able to demonstrate the use of the CSS3 text-transform property
<p>
.example-text-transform {
text-transform: uppercase;
}
lowercase
<p class="example-text-transform">
HELLO this is a sample text to be able to demonstrate the use of the CSS3 text-transform property
<p>
.example-text-transform {
text-transform: lowercase;
}
Property Values
| Value | Description |
|---|---|
| none | No capitalization. The text renders as it is. This is default |
| capitalize | Transforms the first character of each word to uppercase |
| uppercase | Transforms all characters to uppercase |
| lowercase | Transforms all characters to lowercase |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. |
Original source -> here
Thanks for reading me. 😊
Credits to the author of the icons for the banner.
Icons made by Vaadin from www.flaticon.com
Top comments (0)