Эффект 3D наклона текста / Эффекты / Сниппеты Bootstrap

Версия: v1.0

Каталог: Сниппеты Bootstrap

Категория: Эффекты

Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 1227

Количество символов:

Посмотрели: 1785 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: http://goo.gl/vXONp0

Информация: Пользователям

Информация: Правообладателям

Теги: эффект, text-shadow, Snippet, Effect, сниппет, Bootstrap, Glow, html, text, 3D

Поделился: BootstrapТема

Добавлено: 2016-08-20 в 23:15

Метка: 1581111122

⇄ ⇅

.text-effect {
 display: block;
 text-align: center;
 font-size: 75px;
 font-weight: 700;
 line-height: 0.8;
 color: #fb2a2a;
 margin: 10px 0 30px;
 text-shadow: 0 -1px 15px rgba(0, 0, 0, 0.9), 0 1px 0 #7f6303, 0 3px 0 #846703, 0 5px 0 #896b03, 0 7px 0 #8e6f03, 0 9px 0 #937203, 0 6px 50px rgba(252, 223, 92, 0.8);
 -webkit-transform: perspective(2.5em) rotateX(15deg) scaleY(0.8);
 -moz-transform: perspective(2.5em) rotateX(15deg) scaleY(0.8);
 transform: perspective(2.5em) rotateX(5deg) scaleY(0.8);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 transition: all 0.5s;
}
@media only screen and (max-width: 767px) {
 .text-effect{ font-size: 60px; }
}
@media only screen and (max-width: 479px) {
 .text-effect{
 font-size: 48px;
 line-height: 1.2;
 }
}
</style>

<h1 class="text-effect">BootstrapTema</h1>
<h2 class="text-effect">Material catalog Bootstrap</h2>

</div>
</div>
</div>

BootstrapTema

Эффект 3D наклона текста

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0