Рубрика CSS
3D эффект текстовой башни
Вы видели сайт Дэвида Десэндро? В его футере присутствует очень интересный эффект:
Данная техника довольно проста. Давайте посмотрим.
Множество текстовых теней
Главную ключевую роль данного эффекта играет свойство CSS3 – text-shadow. Обычно это выглядит так:
.shadow {
text-shadow: 2px 2px 4px #000;
}Подробнее на примере:
.shadow {
text-shadow: [X отступ] [Y отступ] [размер размытия] [цвет];
}В данном примере отсутствуют префиксы. Вы также можете применить несколько теней к одному и тому же тексту:
.shadow {
text-shadow: 1px 1px 0 black, 2px 2px 0 black;
}
Множественные тени назначают с помощью запятой. В вышеуказанном примере две тени имеют отступ 1 пиксель по обеим осям без размытия, вторая по 2 пикселя без размытия.
Теперь ясно в чем трюк? Мы можем применить множественные тени с интервалом в один пиксель друг от друга создавая при этом «башню» из тени под текстом. По умолчанию данный эффект тени будет применяться все глубже за текстом, но мы можем сделать так, чтобы данный эффект был видим только при наведении курсора мыши.
.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;
}Переходы
Благодаря вышеуказанному коду реализуется эффект роста текстовой «башни». Но мы также можем изменить параметры анимации, так как большинство современных браузеров свойства transition (например, анимация из одного состояния в другое).
.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;
-moz-transition: all 0.12s ease-out;
-o-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;
}Примечание: свойство -moz-transition будет работать только в Firefox 3.7.
Средняя часть футера имеет немного другой эффект. По мере наведения курсора мыши на разные строки текста они растут в размере. Здесь используется другой эффект CSS3 – transform. И опять про префиксы:
div:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
text-shadow: 3px 3px 0 #333;
}Так что же происходит в Internet Explorer? Эффект текстовой тени работать не будет, только позиционирование.
