Подробное описание и демонстрация работы блока «Эффекты для текста» для сайта под номером №30 для библиотеки Bootstrap. Html и CSS код для текстовых эффектов на сайте как на изображении.
Fokit.ru
.text-effect {
color: #555;
font-family: 'Lobster', cursive;
font-size: 100px;
text-transform: capitalize;
letter-spacing: 15px;
position: relative;
text-align: center;
transform: skew(15deg);
animation: animate 1.5s linear alternate infinite;
}
@keyframes animate{
100%{
text-shadow: -1px -1px #fff, 1px -1px #fff, -1px 1px #fff,
1px 1px #fff, -5px -5px #3498db, -6px -6px #fff,
-4px -4px #fff, -6px -4px #fff, -4px -6px #fff,
-10px -10px #2ecc71, -11px -11px #fff, -9px -9px #fff,
-11px -9px #fff, -9px -11px #fff, -15px -15px #f1c40f,
-16px -16px #fff, -14px -14px #fff, -16px -14px #fff,
-14px -16px #fff, -20px -20px #e056fd, -21px -21px #fff,
-19px -19px #fff, -21px -19px #fff, -19px -21px #fff,
9px 0px #e7e7e7, 8px 1px #e7e7e7, 7px 2px #e7e7e7,
7px 3px #e7e7e7, 6px 4px #e7e7e7, -6px 2px #e7e7e7,
6px 6px #e7e7e7, 0px 6px #e7e7e7, -6px 6px #e7e7e7,
-6px 0px #e7e7e7, -10px -10px #e7e7e7, -12px -23px #e7e7e7,
-9px -20px #e7e7e7, -6px -18px #e7e7e7, -2px -14px #e7e7e7,
2px -10px #e7e7e7, 5px -7px #e7e7e7, 7px -3px #e7e7e7,
-20px -14px #e7e7e7, -2px -14px #e7e7e7, -17px -26px #e7e7e7,
-20px -26px #e7e7e7, -12px -20px #e7e7e7, -27px -23px #e7e7e7,
-26px -20px #e7e7e7, -25px -18px #e7e7e7, -24px -17px #e7e7e7,
-24px -15px #e7e7e7, -22px -13px #e7e7e7, -20px -10px #e7e7e7,
-18px -8px #e7e7e7, -16px -7px #e7e7e7, -15px -3px #e7e7e7,
2px 2px 22px #fff, -22px -22px 22px #fff, -18px -12px 22px #fff,
-5px -15px 22px #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; }
}
<div class="demo">
<div class="text-effect">
<span>Best jQuery</span>
</div>
</div>