Подробное описание и демонстрация работы блока «Эффекты для текста» для сайта под номером №15 для библиотеки Bootstrap. Html и CSS код для реализации блока forms на сайте как на изображении.
Fokit.ru
html разметка и css стили для реализации блока «Эффекты для текста»
<div class="demo">
<span class="text-effect">Best jQuery</span>
</div>
.demo {background-color: #e7e7e7;}
.text-effect {
color: #ff3258;
font-family: 'Work Sans', sans-serif;
font-size: 100px;
font-weight: 800;
text-align: center;
display: block;
text-shadow: 0 3px 20px #ba0929, 0 0 20px #ba0929, 0 0 10px #e03151,
4px -5px 6px #fc4e6e, -4px -10px 10px #fc4e6e, 0 -10px 30px #fc4e6e;
animation: 2s text-effect infinite alternate linear;
}
@keyframes text-effect {
0% { text-shadow: 0 3px 20px #ba0929, 0 0 20px #ba0929, 0 0 10px #e03151,
0 0 0 #fc4e6e, 0 0 5px #fc4e6e, -2px -5px 5px #fc4e6e, 4px -10px 10px #fc4e6e;
}
25% { text-shadow: 0 3px 20px #ba0929, 0 0 30px #ba0929, 0 0 20px #e03151,
0 0 5px #fc4e6e, -2px -5px 5px #fc4e6e, 3px -10px 10px #fc4e6e, -4px -15px 20px #fc4e6e;
}
50% { text-shadow: 0 3px 20px #ba0929, 0 0 20px #ba0929, 0 -5px 10px #e03151,
-2px -5px 5px #fc4e6e, 3px -10px 10px #fc4e6e, -4px -15px 20px #fc4e6e, 2px -20px 30px #f9a7a7;
}
75% { text-shadow: 0 3px 20px #ba0929, 0 0 20px #ba0929, 0 -5px 10px #e03151,
3px -5px 5px #fc4e6e, -4px -10px 10px #fc4e6e, 2px -20px 30px #f9a7a7, 0px -25px 40px rgba(255,255,0,0);
}
100%{ text-shadow: 0 3px 20px #ba0929, 0 0 20px #ba0929, 0 0 10px #e03151,
0 0 0 #fc4e6e, 0 0 5px #fc4e6e, -2px -5px 5px #fc4e6e, 4px -10px 10px #fc4e6e;
}
}
@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; }
}