Текст на css3 — що з ним можна робити

19

Від автора: вітаю вас на сторінках нашого сайту. Сьогодні ми продовжуємо розглядати технологію css3. Цього разу давайте подивимося, як можна оформити текст на css3, які властивості для цього передбачені.

Текстові тіні

Звичайно, в css3 основним новим властивістю тексту стало text-shadow. Це властивість дуже схоже по своїй роботі на box-shadow, але все ж відмінності є. Текстової тіні не можна ставити розтягнення, всі інші параметри залишаються як є. Відповідно, з допомогою тіні можна створювати різні ефекти. Наприклад, створити його обведення. Давайте подивимося, як її можна реалізувати:

Текст
.shadow{
font-size: 40px;
color: red;
text-shadow: 1px 1px 0 black, -1px -1px 0 black;
}

Це все просто для прикладу. Слово отримало чорну підводку. Суть методу в тому, що потрібно записати кілька тіней. Спочатку ми поставили зсув вправо і вниз, потім – вліво і вгору.

Рельєфний текст

Ще один прийом, дуже простий в реалізації. Суть в тому, щоб вибрати колір для тексту такий же, як і фоновий колір блоку. Тоді він буде видний тільки за рахунок тіні, що виглядає досить непогано.

.shadow{
font-size: 50px;
color: #fff;
text-shadow: 1px 1px 0 black, -1px -1px 0 black, 2px 2px 0 black, -2px -2px 0 black;
}

Трохи поміняв стилі і ось він – рельєфний текст.

Світіння

Завдяки розмиття можна створити ілюзія, ніби текст світиться. Для цього достатньо буде не ставити зсув взагалі, а тільки розмиття.

.shadow{
text-shadow: 0 0 5px black;
}

До речі, це ж дозволяє реалізувати той самий рельєфний текст, тільки з менш чіткою обведенням. Розмиття іноді необхідно, щоб пом’якшити різку тінь і розширити область її дії.

Також по-новому можна задати в css3 колір тексту. Для цього використовуйте колірної rgba формат, в якому можна задавати чотири значення (останнє — прозорість). Таким чином, крізь літери може бути видно фонове зображення, що дозволяє створювати цікаві ефекти і автоматично давати тексту текстуру.

Трансформації

Інша група властивостей дозволяє змінити положення вмісту. Зокрема, можливо вас цікавить питання, як зробити поворот тексту в css3? Цього можна домогтися за допомогою властивості transform.

Поворот здійснюється за допомогою команди rotate, в дужках прописуються градуси, на які потрібно виконати поворот.

transform: rotate(10deg);

Зверніть увагу, що якщо ви повертаєте блоковий елемент, то перед цим краще обмежте його ширину, а також визначте абсолютне позиціонування, щоб він випав з потоку і не заважав іншим блокам нормально там стояти. В іншому випадку поворот може привести до непередбачуваних наслідків.

Анімація

Анімація тексту в css3 є дуже потужним засобом його управління, хоча найчастіше її застосовують для інших елементів. Щоб її створити, потрібно спочатку прописати для неї так звані кадри. Зараз я в подробиці не буду зупинятися на тому, як це робити, давайте я вам покажу на прикладі.

@keyframes pulse{
0%{font-size: 50px;}
50%{font-size: 60px;}}
100%{font-size: 50px;}
}

Ми створили набір кадрів під назвою pulse. На початковій стадії анімації розмір шрифту елемента повинен становити 5 — пікселів, до половині він повинен збільшитися до 60 пікселів, а в самому кінці знову зменшитися до потрібного розміру. Поки що це просто код, який нічого не додасть на сторінку і ніяк на неї не відобразиться. Щоб анімація запрацювала, її потрібно поставити в стилі одного з елементів. Це можна реалізувати так:

animation-name: pulse;
animation-duration: 2s;
animation-iteration-count: infinite;

Що це все значить? Спробую пояснити. За допомогою властивості animation-name ми пов’язуємо створені нами кадри (анімацію) з елементом, якому пишуться ці стилі. Крім цього, потрібно вказати кілька дуже важливих параметрів, без яких нічого не запрацює.

З допомогою duration задають час, за який виконується анімація. Нарешті, animation-iteration-count визначає, скільки разів повторити її. Властивість infinite вказує на те, що потрібно повторювати нескінченно. В якості значення тут може бути число від 0 до будь-якого значення. Якщо буде записаний 0, то анімація не виконається жодного разу.

Насправді тут є ще багато властивостей, які можна було б розібрати, але вам вже цілком вистачить для створення своїх анімацій. Спробуйте застосувати цей код до якого-небудь текстового елемента. Якщо все зроблено правильно, він почне плавно збільшуватися в розмірах, а потім повернеться до колишніх і так буде повторюватися до тих пір, поки вам не набридне на це дивитися).

Вертикальний текст css

Раз вже ми говоримо про різні можливості, які ви можете зробити з текстом, також хотілося б сказати, як зробити вертикальні написи, коли це необхідно. Загалом, алгоритм дуже простий – створюєте блок і ставите йому ширину, приблизно рівну ширині однієї букви потрібного вам розміру шрифту, після чого ставите йому властивість:

word-wrap: break-word;

Це змусить браузер розбивати слова, якщо вони не поміщаються повністю на батьківський елемент. Насправді можна зробити і по-іншому: просто ставити тег br після кожної букви, але мені здається, що це надто примітивний метод.

Власне, ми з вами розібрали деякі речі, які css3 дозволяє робити зі словами. Я думаю, вам також буде корисно заглянути в наші преміум-уроки за цією технологією, де ви зможете почерпнути додаткову інформацію по темі. На цьому я з вами прощаюся. Оформляйте текст красиво.