Подробное описание и демонстрация работы блока «Эффекты для текста» для сайта под номером №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; } }