W3.CSS Текст
Вирівнювання тексту
Класи w3-left-align та w3-right-align використовуються для вирівнювання тексту.
Вирівняний по лівому краю текст.
Вирівняний по правому краю текст.
Приклад
<div class="w3-container w3-border w3-large">
<div class="w3-left-align"><p>Вирівняний по лівому краю текст.</p></div>
<div class="w3-right-align"><p>Вирівняний по правому краю текст.</p></div>
</div>
Спробуйте самі »
Центрування елементів
Клас w3-center використовується для вирівнювання елементів по центру (центрування):
Відцентрований контент
Якийсь відцентрований текст.
Приклад
<div class="w3-container w3-center">
<h2>Відцентрований контент</h2>
<img src="img_car.jpg" alt="Автомобіль" style="width:80%;max-width:320px">
<p>Якийсь відцентрований текст.</p>
</div>
Спробуйте самі »
Широкий текст
Клас w3-wide визначає більш широкий текст:
Цей текст звичайний.
Цей текст більш широкий.
Непрозорість тексту
Клас w3-opacity використовується для роботи з усіма кольорами:
Непрозорість тексту
Непрозорість тексту
Непрозорість тексту
Непрозорість тексту
Приклад
<div class="w3-panel w3-pink">
<h2 class="w3-opacity">Непрозорість тексту</h2>
</div>
Спробуйте самі »
Тінь тексту
Властивість CSS3 text-shadow можна використовувати для додавання до тексту ефектів тіні або розмиття:
Тінь тексту
Тінь тексту
Тінь тексту
Тінь тексту
Спецефекти для тексту
Непрозорість тексту + Жирний текст
Жовтий текст + Тінь + Жирний текст
Помаранчевий текст + Тінь + Жирний текст
Приклад
<div class="w3-panel w3-pink">
<h1 class="w3-opacity">
<b>Непрозорість тексту + Жирний текст</b></h1>
</div>
<div class="w3-panel w3-amber">
<h1 class="w3-text-yellow" style="text-shadow:1px 1px 0 #444">
<b>Жовтий текст + Тінь + Жирний текст</b></h1>
</div>
<div class="w3-panel w3-blue">
<h1 class="w3-text-orange"
style="text-shadow:1px 1px 0 #444">
<b>Помаранчевий текст + Тінь + Жирний текст</b></h1>
</div>
Спробуйте самі »
Тінь тексту не працює в IE 9 і більш ранніх версіях.
