3D текст с помощью CSS

3D текстВидели ли вы сайт Дэвида Дэсандро? Сайт выглядит очень минималистично. А вот футер очень интересный: текст при наведении на него указателя мыши становится трехмерным. Техника создания таково эффекта очень проста. Давайте посмотрим как можно сделать такой эффект. Использовать мы будем несколько свойств 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 — именно тут вы сможете заказать онлайн сайт визитку. Рекомендуем!



Запись опубликована в рубрике CSS3 с метками , , , , . Добавьте в закладки постоянную ссылку.

4 комментария: 3D текст с помощью CSS

  1. Аноним говорит:

    Не 3d это…

    • Гилязетдинов Руслан говорит:

      а что по-вашему?) 3d больше всего подходит))) это скорее имитация 3d 

  2. Уведомление: Текст и CSS3: примеры эффектов с использованием text-shadow | RusDigi.org

  3. Уведомление: Текст и CSS3: примеры эффектов с использованием text-shadow | RusDigi.org

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *