Блог

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

Анимированный объемный текст с тенью на одном 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

Понравилась статья? Поделитесь

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

  • Разработка дизайна страниц

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

  • Используем готовые шаблоны для сайтов

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

  • Тенденции Веб-Дизайна 2020: Высокие технологии и умопомрачительная визуализация

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

  • Варианты оформления поля Поиска по сайту на CSS

    Обычное поле Поиска по сайту можно оформить более оригинально, чем просто инпут с лупой. Например, благодаря анимационным эффектам на CSS3 поле для ввода поисковой фразы можно скрыть, чтобы освободить место для другого контента...

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

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

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

Наши услуги по созданию сайтов

Веб дизайн

Разработка дизайна и создание интернет-сайта.

Поддержка сайта

Поддержка работоспособности. Написание текстов и статей. Наполнение товарами.

Готовый дизайн

Готовые шаблоны интернет-магазинов и корпоративных сайтов на HostCMS.

Контекстная реклама

Настройка и ведение рекламной кампании в Директ