CSS text-transform — великі літери, малі й капітель

HTML

<p class="uppercase">Це речення стане великими літерами.</p>
<p class="lowercase">ЦЕ РЕЧЕННЯ СТАНЕ МАЛИМИ.</p>
<p class="capitalize">кожне слово почнеться з великої.</p>

CSS

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

HTML

<p class="none">ІВАН петренко, менеджер з ПРОДАЖУ</p>
<p class="up">ІВАН петренко, менеджер з ПРОДАЖУ</p>
<p class="low">ІВАН петренко, менеджер з ПРОДАЖУ</p>
<p class="cap">ІВАН петренко, менеджер з ПРОДАЖУ</p>

CSS

p {
    margin: 0 0 6px;
    padding: 6px 8px;
    border-left: 4px solid #0172ad;
    background: #f2f6f9;
    font-size: 17px;
}

p::before {
    display: block;
    font: 12px monospace;
    color: #666;
    text-transform: none;
}

.none::before { content: "text-transform: none"; }
.up::before   { content: "text-transform: uppercase"; }
.low::before  { content: "text-transform: lowercase"; }
.cap::before  { content: "text-transform: capitalize"; }

.up  { text-transform: uppercase; }
.low { text-transform: lowercase; }
.cap { text-transform: capitalize; }

HTML

<p>Вибери потрібне значення для <code>text-transform</code>:</p>

<select id="form">
  <option value="capitalize" name="value2" selected>capitalize</option>
  <option value="uppercase" name="value2">uppercase</option>
  <option value="lowercase" name="value2">lowercase</option>
</select>
<p id="text">Перший символ кожного слова в реченні буде заголовним. Примітка: Іншу символи свій регіст не змінять.</p>
<hr>
<p id="block">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos magnam dolores quam eum veritatis esse non. Maxime, culpa. Doloribus, sit!
</p>

CSS

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}


#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  margin: 75px auto 0 auto;
  background: gold;
  padding: 16px;
  font-size: 18px;
  color: #222;
  text-align: left;
  text-transform: capitalize;
}

#text {
  height: 100px;
  background-color: #eee;
  padding: 16px 0;
}

JS

var block = document.getElementById('block');
var form = document.getElementById('form');
var text = document.getElementById('text');

var textArray = { 'capitalize': 'Перший символ кожного слова в реченні буде заголовним. Примітка: Іншу символи свій регіст не змінять.',
  'uppercase': 'Всі символи тексту стають великими (верхній регістр).',
  'lowercase': 'Всі символи тексту стають малими (нижній регістр).' };

form.onchange = function change() {

  var newVal = getNewValue();
  block.style.textTransform = newVal;
  text.innerHTML = textArray[newVal];

};

function getNewValue() {

  var result = '';

  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (form.options[i].selected == true) {
      result = form.options[i].value;
    }
  }window.CP.exitedLoop(0);

  return result;

}
//# sourceURL=pen.js

HTML

<p class="up">Я просто текст, нічого незвичного</p>
<p class="low">Я просто текст, нічого незвичного</p>
<p class="cap">Я просто текст, нічого незвичного</p>

CSS

body {
	font-size: 18px;
	font-family: sans-serif;
	line-height: 1.45;
}

p {
	background-color: #f1f1f1;
	padding: 8px;
}

p.low {
	text-transform: lowercase;
}

p.up {
	text-transform: uppercase;
}

p.cap {
	text-transform: capitalize;
}