Нам понравился эффект выдвигающегося текста, когда текст выпрыгивает в направлении пользователя и изменяет толщину, как трехмерная башня. Этот способ изящен в своей простоте. Давайте рассмотрим его подробней.

Несколько теней текста

Основной работающий прием здесь — это свойство CSS3 тени текста. Обычно оно записывается так:

.shadow {
   text-shadow: 2px 2px 4px #000;
}

Эти четыре значения определяют:

[расстояние по оси X] [расстояние по оси Y] [расстояние размытия] [цвет]

Обратите внимание, что этому свойству не нужны приставки производителей, что удобно. Также можно применить несколько теней к одному тексту:

.shadow {
   text-shadow: 1px 1px 0 black,
                2px 2px 0 black;
}

Несколько теней задаются с помощью отделения запятой значений первой тени от второй. В коде выше указаны значения для двух тени, первая с расстоянием по обеим осям в 1px без размытия, вторая с расстоянием по обеим осям в 2px без размытия.

Понимаете, в чем секрет? Можно применить множество теней, каждая с расстоянием по обеим осям, увеличивающимся на 1px от предыдущей, чтобы создать трехмерную тень в виде башни под текстом. По умолчанию эти тени будут появляться все глубже и глубже под текстом, но можно создать выпрыгивающий эффект, чтобы тени появлялись только при наведении указателя мыши и текст выдвигался вверх и влево на расстояние, равное глубине тени.

.shadow {
   color: white;
   font: bold 52px Helvetica, Arial, Sans-Serif;
   text-shadow: 1px 1px #fe4902,
                2px 2px #fe4902,
                3px 3px #fe4902;
}
.shadow:hover {
   position: relative;
   top: -3px;
   left: -3px;
   text-shadow: 1px 1px #fe4902,
                2px 2px #fe4902,
                3px 3px #fe4902,
                4px 4px #fe4902,
                5px 5px #fe4902,
                6px 6px #fe4902;
}

Переходы 

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

Современные версии браузеров поддерживают переходы без приставок производителей, кроме браузера UC для Android, которому нужна приставка производителя -webkit-:

.shadow {
   color: white;
   font: bold 52px Helvetica, Arial, Sans-Serif;
   text-shadow: 1px 1px #fe4902,
                2px 2px #fe4902,
                3px 3px #fe4902;
   -webkit-transition: all 0.12s ease-out;
   transition:         all 0.12s ease-out;
}
.shadow:hover {
   position: relative;
   top: -3px;
   left: -3px;
   text-shadow: 1px 1px #fe4902,
                2px 2px #fe4902,
                3px 3px #fe4902,
                4px 4px #fe4902,
                5px 5px #fe4902,
                6px 6px #fe4902;
}

Обратите внимание: Текущую поддержку браузерами свойства переходов CSS и необходимость в приставках производителей можно посмотреть на сайте CanIUse.com.

Изменение размера 

У надписей ниже есть другой интересный эффект. При наведении указателя мыши на них, они увеличиваются в размере. Это достигается с помощью другого эффекта CSS3 – трансформаций.

И опять современные версии браузеров поддерживают переходы без приставок производителей, кроме браузера UC для Android и Blackberry Browser, которым нужна приставка  -webkit-, еще для поддержки браузера Internet Explorer версии 9 можно добавить приставку производителя -ms-:

div:hover {
   -webkit-transform: scale(1.1);
   -ms-transform:     scale(1.1);
   transform:         scale(1.1);
   text-shadow: 3px 3px 0 #333;
}

Обратите внимание: Текущую поддержку браузерами свойства трансформаций CSS и необходимость в приставках производителей можно посмотреть на сайте CanIUse.com.

Старые версии браузеров 

Как эти эффекты будут выглядеть в старых версиях браузеров, не поддерживающих эти свойства? Функциональность не потеряется:

Это не так красиво, но вполне приемлемо. 

Демонстрация работы и исходный код 

Демонстрация работы – Скачать исходный код

Если Вам понравились эти эффекты, поэкспериментируйте с этими свойствами, создайте свой неповторимый дизайн.

Автор урока Chris Coyier

Смотрите также:

• Задаем уникальный цвет выделения текста с использованием CSS
• Использование свойства CSS выравнивания текста
• Создание текста произвольной формы с использованием CSS3