Mastering Text Transform: The Key to Stunning Typography

Text transform - это CSS свойство, которое позволяет изменять регистр букв в тексте. С помощью этого свойства можно перевести текст в верхний, нижний или первую букву каждого слова в верхний регистр.

Синтаксис:

text-transform: uppercase|lowercase|capitalize|none;

uppercase - переводит все буквы в тексте в верхний регистр;

lowercase - переводит все буквы в тексте в нижний регистр;

capitalize - переводит первую букву каждого слова в тексте в верхний регистр;

none - не изменяет регистр букв в тексте и используется по умолчанию.

Пример кода:

HTML

  
Привет, Мир!

CSS

.text-transform p {
  text-transform: uppercase; 
  /* Весь текст переводится в верхний регистр */
}

Результат:

ПРИВЕТ, МИР!

Также можно использовать text-transform для создания акронимов. Допустим, у нас есть текст с названиями государств, и мы хотим сделать так, чтобы первые буквы каждого слова образовали акроним.

Пример кода:

HTML

Российская Федерация, Соединенные Штаты Америки, Французская Республика

CSS

.countries {
  text-transform: uppercase; 
}
.countries::first-letter {
  text-transform: none; 
}

Результат:

РФ, США, ФР

Здесь текст переводится в верхний регистр, а для первой буквы каждого слова используется значение none, чтобы оставить ее в изначальном регистре.