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

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

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

.text-effect{
    color: #e74c3c;
    font-size: 10em;
    font-family: 'Lobster', cursive;
    text-align: center;
    text-shadow: 1px 2px 6px #efefef , 1px 0 0 rgba(136,136,136,0.7);
    margin: 0 auto;
    transform: rotate(0) skew(0);
    position: relative;
}
.text-effect:before {
    content: attr(data-tip);
    color: rgba(0,0,0,0.2);
    width: 100%;
    transform: translateX(-50%) skew(0);
    position: absolute;
    left: 50%;
    z-index: -1;
    animation: animate 2s alternate infinite;
}
@keyframes animate{
    0%{ transform: translateX(-50%) skew(0); }
    30%{  transform: translateX(-50%) skew(39deg); }
    70%{ transform: translateX(-50%) skew(-39deg); }
    100%{ transform: translateX(-50%) skew(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; }
}

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

Теги: