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

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

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

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <span class="text-effect">Best jQuery</span>
        </div>
    </div>
</div>

.text-effect{
    display: block;
    text-align: center;
    font-size:100px;
    font-weight:bold;
    display: block;
    text-transform: uppercase;
    color: transparent;
    letter-spacing: .15em;
    text-shadow: 1px -1px 0 #fe6161, 1px 1px 1px #737272, 2px 2px 1px #767474, 3px 3px 1px #787777, 4px 4px 1px #7b7a7a, 5px 5px 1px #7f7d7d, 6px 6px 1px #828181, 7px 7px 1px #868585, 8px 8px 1px #8b8a89, 9px 9px 1px #8f8e8d, 10px 10px 1px #949392, 11px 11px 1px #999897, 12px 12px 1px #9e9c9c, 13px 13px 1px #a3a1a1, 14px 14px 1px #a8a6a6, 15px 15px 1px #adabab, 16px 16px 1px #b2b1b0, 17px 17px 1px #b7b6b5, 18px 18px 1px #bcbbba, 19px 19px 1px #c1bfbf, 20px 20px 1px #c6c4c4, 21px 21px 1px #cbc9c8, 22px 22px 1px #cfcdcd, 23px 23px 1px #d4d2d1, 24px 24px 1px #d8d6d5, 25px 25px 1px #dbdad9, 26px 26px 1px #dfdddc, 27px 27px 1px #e2e0df, 28px 28px 1px #f1f1f1;
}
@media only screen and (max-width: 990px) {
    .text-effect{
        font-size: 80px;
    }
}
@media only screen and (max-width: 767px) {
    .text-effect{
        font-size: 50px;
    }
}
@media only screen and (max-width: 479px) {
    .text-effect{
        font-size: 34px;
    }
}

Теги: