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

Подробное описание и демонстрация работы блока «Эффекты для текста» для сайта под номером №1 для библиотеки 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{
    text-transform: uppercase;
    color: #fff;
    font-weight: 900;
    font-size: 128px;
    opacity: 0.9;
    text-shadow: sienna .01em .01em 0, sienna .02em .02em 0, sienna .03em .03em 0, sienna .04em .04em 0, sienna .05em .05em 0, sienna .06em .06em 0, sienna .07em .07em 0, sienna .08em .08em 0, sienna .09em .09em 0, sienna .1em .1em 0;
    padding: 0 10px;
    text-align: center;
    display: block;
}
@media only screen and (max-width: 990px) {
    .text-effect{
        font-size: 90px;
    }
}
@media only screen and (max-width: 767px) {
    .text-effect{
        font-size: 60px;
    }
}
@media only screen and (max-width: 479px) {
    .text-effect{
        font-size: 40px;
    }
}

Теги: