Эффекты для текста на Bootstrap — стиль 29

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

html разметка и css стили для реализации блока «Эффекты для текста»

<div class="demo">
    <div class="text-effect">
        <span>Best jQuery</span>
    </div>
</div>

.demo{ background: #b71540; }
.text-effect{
    color:transparent;
    font-family: 'Chewy', cursive;
    font-size: 100px;
    text-align: center;
    letter-spacing: 8px;
    text-shadow: #fff 0 0 10px, #FFC312 0 0 15px,
                #FFC312 0 0 20px, #FFC312 0 0 25px;
    margin: 0 auto;
    position: relative;
    animation: animate 1s ease-out infinite;
}
@keyframes animate{
    100%{
        color:transparent;
        text-shadow: -4px 4px hsla(0, 0%, 70%, .4), -3px 3px hsla(0, 0%, 60%, .2),
                    -2px 2px hsla(0, 0%, 70%, .2), -1px 1px hsla(0, 0%, 70%, .2),
                    0px 0px rgba(255,255,255,0.9), 1px -1px hsla(0, 0%, 30%, .6),
                    2px -2px hsla(0, 0%, 30%, .7), 3px -3px hsla(0, 0%, 32%, .8),
                    4px -4px hsla(0, 0%, 30%, .9), 5px -5px hsla(0, 0%, 30%, 1.0);
    }
}
@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; }
}

Теги: