Делаем анимированный текст с тенью

Делаем анимированный текст с тенью

Анимированный объемный текст с тенью на одном CSS3.

ВАУ!!! СКАЧЕМ

HTML

<h3 class="one">ВАУ!!! СКАЧЕМ</h3>

CSS cтили

@import url(https://fonts.googleapis.com/css?family=Righteous);
h3.one {
 cursor: default;
 position: absolute;
 top: 30px;
 left: 0;
 right: 0;
 bottom: 0;
 height: 100px;
 margin: auto;
 display: block;
 -webkit-animation: bounce .3s ease infinite alternate;
 font-family: 'Chewy', cursive;
 font-size: 80px;
 color: #FFF;
 text-align: center;
 line-height: 100px;
 text-shadow: 0 1px 0 #CCC,
 0 2px 0 #CCC,
 0 3px 0 #CCC,
 0 4px 0 #CCC,
 0 5px 0 #CCC,
 0 6px 0 transparent,
 0 7px 0 transparent,
 0 8px 0 transparent,
 0 9px 0 transparent,
 0 10px 10px rgba(0, 0, 0, .6);
}@-webkit-keyframes bounce {
 100% {
 top: -30px;
 text-shadow: 0 1px 0 #CCC,
 0 2px 0 #CCC,
 0 3px 0 #CCC,
 0 4px 0 #CCC,
 0 5px 0 #CCC,
 0 6px 0 #CCC,
 0 7px 0 #CCC,
 0 8px 0 #CCC,
 0 9px 0 #CCC,
 0 30px 30px rgba(0, 0, 0, .3);
 }
}

dang!

HTML

<h3 class="two" data-shadow="dang!">dang!</h3>

CSS cтили

@import url(
   'https://fonts.googleapis.com/css?family=Chewy'
);
h3.two {
  display: inline-block;
  color: white;
  font-family: 'Righteous', serif;
  font-size: 12em; 
  text-shadow: .03em .03em 0 hsla(230,40%,50%,1);
  z-index: 10;
  }
  h1:after {
    content: attr(data-shadow);
    position: absolute;
    top: 10px; left:  10px;
    z-index: -1;
    text-shadow: none;
    background-image:
      linear-gradient(
        45deg,
        transparent 45%,
        hsla(48,20%,90%,1) 45%,
        hsla(48,20%,90%,1) 55%,
        transparent 0
        );
  background-size: .05em .05em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shad-anim 15s linear infinite;
  z-index: 10;
 }

@keyframes shad-anim {
  0% {background-position: 0 0}
  0% {background-position: 100% -100%}
  }

По материалам сайта freebiesupply.com

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

Варианты создания логотипа сайта
Варианты создания логотипа сайта
Фундаментом фирменного стиля является логотип. Непосредственно на логотип, в первую очередь, обращают внимание клиенты любой компании, к тому же, логотип должен быть обязательно размещён на такой имиджевой продукции, как ручки, чашки фирменные бланки и прочее.

Тенденции дизайна в июле 2022 года
Тенденции дизайна в июле 2022 года
В дизайне веб-сайтов сейчас много мрачных ретро-тенденций. Хотя все еще появляются некоторые легкие проекты, в том числе пастельный тренды, многое из того, что мы видим, выглядит довольно мрачно.

Красный цвет в дизайне сайтов
Красный цвет в дизайне сайтов
Вы неравнодушны к красному цвету? Тогда эта статья для вас. Смотрите и комментируйте.

Веб дизайн в 2021 году
Веб дизайн в 2021 году

Итак, что мы можем ожидать в веб-дизайне в 2021 году?

Многое будет меняться, и будут разработаны новые функции. Но одно можно сказать наверняка: наш опыт работы на большинстве веб-сайтов также изменится к лучшему.


Инновационные тенденции дизайна визитных карточек в 2022 году
Инновационные тенденции дизайна визитных карточек в 2022 году
Вопреки распространенному мнению, визитки до сих пор очень актуальны. Они продолжают служить важным бизнес продуктом, который вы можете использовать для предоставления нужного набора информации людям. Это может ваша личная информация или информация о вашей организации. Для корпораций и во многих бизнес-культурах обмен визитными карточками является обязательным ритуалом. Но, если все сделано неправильно, это также может испортить ваше первое впечатление...

Бесплатная альтернатива Adobe Photoshop
Бесплатная альтернатива Adobe Photoshop
Популярность Photoshop, как профессионального инструмента, заключается в его мощных функциях и многофункциональности, но есть несколько очень привлекательных бесплатных альтернатив...

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.