Подробное описание и демонстрация работы блока «Эффекты для текста» для сайта под номером №17 для библиотеки Bootstrap. Html и CSS код для реализации блока forms на сайте как на изображении.
Fokit.ru
html разметка и css стили для реализации блока «Эффекты для текста»
<div class="demo">
<span class="text-effect">Best jQuery</span>
</div>
.demo { background: #c0392b; }
.text-effect{
color: white;
font-size: 100px;
font-family: 'Pacifico', cursive;
line-height: 50px;
text-align: center;
margin-top: 50px;
display: block;
text-shadow: 1px 1px 0px #343434, 2px 2px 0px #343434, 3px 3px 0px #343434, 4px 4px 0px #343434, 5px 5px 0px #343434, 6px 6px 0px #343434, 7px 7px 0px #343434, 8px 8px 0px #343434, 9px 9px 0px #343434, 10px 10px 0px #343434;
animation: effect 600ms infinite ease;
}
@keyframes effect {
10%{ text-shadow:1px 1px 0px #fff,
2px 2px 0px #343434, 3px 3px 0px #343434, 4px 4px 0px #343434,
5px 5px 0px #343434, 6px 6px 0px #343434, 7px 7px 0px #343434,
8px 8px 0px #343434, 9px 9px 0px #343434, 10px 10px 0px #343434;
}
20%{ text-shadow: 1px 1px 0px #343434,
2px 2px 0px #fff, 3px 3px 0px #343434, 4px 4px 0px #343434,
5px 5px 0px #343434, 6px 6px 0px #343434, 7px 7px 0px #343434,
8px 8px 0px #343434, 9px 9px 0px #343434, 10px 10px 0px #343434;
}
30%{ text-shadow: 1px 1px 0px #343434,
2px 2px 0px #343434, 3px 3px 0px #fff, 4px 4px 0px #343434,
5px 5px 0px #343434, 6px 6px 0px #343434, 7px 7px 0px #343434,
8px 8px 0px #343434, 9px 9px 0px #343434, 10px 10px 0px #343434;
}
40%{ text-shadow: 1px 1px 0px #343434,
2px 2px 0px #343434, 3px 3px 0px #343434, 4px 4px 0px #fff,
5px 5px 0px #343434, 6px 6px 0px #343434, 7px 7px 0px #343434,
8px 8px 0px #343434, 9px 9px 0px #343434, 10px 10px 0px #343434;
}
50%{ text-shadow: 1px 1px 0px #343434,
2px 2px 0px #343434, 3px 3px 0px #343434, 4px 4px 0px #343434,
5px 5px 0px #fff, 6px 6px 0px #343434, 7px 7px 0px #343434,
8px 8px 0px #343434, 9px 9px 0px #343434, 10px 10px 0px #343434;
}
60%{ text-shadow: 1px 1px 0px #343434,
2px 2px 0px #343434, 3px 3px 0px #343434, 4px 4px 0px #343434,
5px 5px 0px #343434, 6px 6px 0px #fff, 7px 7px 0px #343434,
8px 8px 0px #343434, 9px 9px 0px #343434, 10px 10px 0px #343434;
}
70%{ text-shadow: 1px 1px 0px #343434,
2px 2px 0px #343434, 3px 3px 0px #343434, 4px 4px 0px #343434,
5px 5px 0px #343434, 6px 6px 0px #343434, 7px 7px 0px #fff,
8px 8px 0px #343434, 9px 9px 0px #343434, 10px 10px 0px #343434;
}
80%{ text-shadow: 1px 1px 0px #343434,
2px 2px 0px #343434, 3px 3px 0px #343434, 4px 4px 0px #343434,
5px 5px 0px #343434, 6px 6px 0px #343434, 7px 7px 0px #343434,
8px 8px 0px #fff, 9px 9px 0px #343434, 10px 10px 0px #343434;
}
90%{ text-shadow: 1px 1px 0px #343434,
2px 2px 0px #343434, 3px 3px 0px #343434, 4px 4px 0px #343434,
5px 5px 0px #343434, 6px 6px 0px #343434, 7px 7px 0px #343434,
8px 8px 0px #343434, 9px 9px 0px #fff, 10px 10px 0px #343434;
}
100%{ text-shadow: 1px 1px 0px #343434,
2px 2px 0px #343434, 3px 3px 0px #343434, 4px 4px 0px #343434,
5px 5px 0px #343434, 6px 6px 0px #343434, 7px 7px 0px #343434,
8px 8px 0px #343434, 9px 9px 0px #343434, 10px 10px 0px #fff;
}
}
@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; }
}