Видели ли вы сайт Дэвида Дэсандро? Сайт выглядит очень минималистично. А вот футер очень интересный: текст при наведении на него указателя мыши становится трехмерным. Техника создания таково эффекта очень проста. Давайте посмотрим как можно сделать такой эффект. Использовать мы будем несколько свойств CSS3.
Посмотреть демо
Несколько теней text-shadow
Основной концепцией при создании 3D текста является концепция применения нескольких теней с использованием свойства text-shadow
.
Вот как выглядит синтаксис text-shadow
:
.shadow {
text-shadow: 2px 2px 4px #000;
}
Так же можно применять несколько теней к одному объекту. Синтаксис будет такой:
.shadow {
text-shadow: 1px 1px 0 black, 2px 2px 0 black;
}
Если хотите использовать несколько теней, просто перечислите их через запятую. В коде приведенном выше у нас 2 тени. Первая с отклонением по двум осям в 1 пиксель без размытия. Вторая тень с отклонением в 2 пикселя по обоим осям без размытия.
Вот таким образом мы можем применить несколько теней отстоящих друг от друга на 1 пиксель чтобы создать эффект «башни». Для эффекта 3D мы будем выводить тени только при наведении курсора мыши на текст. Таким образом текст будет как бы увеличиваться в объеме, а потом снова превращаться в обычный.
.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
Если мы оставим код, приведенный выше без изменений, то тени будут показываться очень резко. Поэтому мы применим свойство CSS3 transition
— анимация перехода элемента из одного состояния в другое. В случае с 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;
}
Масштабирование
В средней части футера мы видим немного другой эффект. Текст в ней масштабируется при наведении курсора мыши. Достигается этот с помощью другого свойства 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;
}
Посмотреть демо
На заметку: Сайт webercontrol.ru — именно тут вы сможете заказать онлайн сайт визитку. Рекомендуем!
Не 3d это…
а что по-вашему?) 3d больше всего подходит))) это скорее имитация 3d