Подробное описание и демонстрация работы блока «Эффекты для текста» для сайта под номером №14 для библиотеки Bootstrap. Html и CSS код для реализации блока forms на сайте как на изображении.
Fokit.ru
html разметка и css стили для реализации блока «Эффекты для текста»
<div class="demo">
<span class="text-effect">Best jQuery</span>
</div>
.demo{ background-color: #530808; }
.text-effect {
color: #530808;
font-size: 130px;
font-family: 'Work Sans', sans-serif;
text-align: center;
margin: 10px 0;
display: block;
animation: animate 2s infinite linear;
}
@keyframes animate{
0%{
text-shadow: transparent 0 0 0;
}
50%{
text-shadow: white 0.02em 0 0, white 0 0.02em 0, white -0.02em 0 0,
white 0 -0.02em 0, #530808 0.06em 0 0, #530808 0.06em 0.06em 0,
#530808 0 0.06em 0, #530808 -0.06em 0.06em 0, #530808 -0.06em 0 0,
#530808 -0.06em -0.06em 0, #530808 0 -0.06em 0, #530808 0.06em -0.06em 0,
white 0.08em 0 0, white 0.08em 0.08em 0, white 0 0.08em 0,
white -0.08em 0.08em 0, white -0.08em 0 0, white -0.08em -0.08em 0,
white 0 -0.08em 0, white 0.08em -0.08em 0;
}
100%{
text-shadow: transparent 0 0 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; }
}