Текст на css3 — что с ним можно делать

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

Текстовые тени

Конечно, в css3 основным новым свойством для текста стало text-shadow. Это свойство очень похоже по своей работе на box-shadow, но все же отличия есть. Текстовой тени нельзя задавать растяжение, все остальные параметры остаются как есть. Соответственно, с помощью тени можно создавать различные эффекты. Например, создать его обводку. Давайте посмотрим, как ее можно реализовать:

Это все просто для примера. Слово получило черную обводку. Суть метода в том, что нужно записать несколько теней. Сначала мы задали смещение вправо и вниз, потом – влево и вверх.

Рельефный текст

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

Немного поменял стили и вот он – рельефный текст.

Свечение

Благодаря размытию можно создать иллюзия, будто текст светится. Для этого достаточно будет не задавать смещение вообще, а только размытие.

Кстати, это же позволяет реализовать тот же самый рельефный текст, только с менее четкой обводкой. Размытие иногда необходимо, чтобы смягчить резкую тень и расширить область ее действия.

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

Трансформации

Другая группа свойств позволяет изменить положение содержимого. В частности, возможно вас интересует вопрос, как сделать поворот текста в css3? Этого можно добиться с помощью свойства transform.

Поворот осуществляется с помощью команды rotate, в скобочках прописываются градусы, на которые нужно выполнить поворот.

Обратите внимание, что если вы поворачиваете блочный элемент, то перед этим лучше ограничьте его ширину, а также задайте абсолютное позиционирование, чтобы он выпал из потока и не мешал остальным блокам нормально там стоять. В противном случае поворот может привести к непредсказуемым последствиям.

Анимация

Анимация текста в css3 является очень мощным средством его управления, хотя чаще всего ее применяют для других элементов. Чтобы ее создать, нужно сначала прописать для нее так называемые кадры. Сейчас я в подробностях не буду останавливаться на том, как это делать, давайте я вам покажу на примере.

Мы создали набор кадров под именем pulse. На начальной стадии анимации размер шрифта элемента должен составлять 5- пикселей, к половине он должен увеличиться до 60 пикселей, а в самом конце опять уменьшиться до нужного размера. Пока что это просто код, который ничего не добавит на страницу и никак на ней не отобразится. Чтобы анимация заработала, ее нужно задать в стили одному из элементов. Это можно реализовать так:

Что это все значит? Попробую объяснить. С помощью свойства animation-name мы связываем созданные нами кадры (анимацию) с элементом, которому пишутся эти стили. Кроме этого, нужно указать несколько очень важных параметров, без которых ничего не заработает.

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

На самом деле здесь есть еще много свойств, которые можно было бы разобрать, но этих вам уже вполне хватит для создания своих анимаций. Попробуйте применить этот код к какому-нибудь текстовому элементу. Если все сделано правильно, он начнет плавно увеличиваться в размерах, а потом вернется к прежним и так будет повторяться до тех пор, пока вам не надоест на это смотреть).

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

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

Это заставит браузер разбивать слова, если они не помещаются полностью в родительский элемент. На самом деле можно сделать и по-другому: просто ставить тег br после каждой буквы, но мне кажется, что это слишком примитивный метод.

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

Комментарии Вконтакте: