Подробное описание и демонстрация работы блока «Эффекты для текста» для сайта под номером №16 для библиотеки Bootstrap. Html и CSS код для реализации блока forms на сайте как на изображении.

Fokit.ru
html разметка и css стили для реализации блока «Эффекты для текста»
<div class="demo">
    <span class="text-effect">Best jQuery</span>
</div>
.demo {background-color: #e7e7e7;}
.text-effect{
    color: white;
    font-size: 100px;
    font-family: 'Monoton';
    line-height: 50px;
    text-align: center;
    margin-top: 50px;
    display: block;
    animation: 1s effect infinite alternate linear;
}
@keyframes effect{
    0%   { text-shadow: 0 0 8px #04ce1f, 0 0 8px #04ce1f, 0 0 13px #04ce1f; }
    50%   { text-shadow: -5px -5px 15px #04ce1f, -5px 5px 15px #04ce1f, -5px -5px 40px #04ce1f; }
    100%   { text-shadow: 5px 5px 15px #04ce1f, 5px -5px 15px #04ce1f, 5px 5px 40px #04ce1f; }
}
@media only screen and (max-width: 990px){
    .text-effect{ font-size: 80px; }
}
@media only screen and (max-width: 767px){
    .text-effect{ font-size: 55px; }
}
@media only screen and (max-width: 479px){
    .text-effect{ font-size: 40px; }
}
@media only screen and (max-width: 359px){
    .text-effect{ font-size: 35px; }
}


Теги:
0

Оставить своё мнение

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