Блог

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

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

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

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

  • Варианты создания логотипа сайта

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

  • Шаблон «Tutorials Universe»

    Шаблон подходит для сайта дизайн-студии или портфолио фрилансера.

  • Лучшие тенденции дизайна логотипов на 2019 год: новый взгляд на бренды

    9 трендов, которые будут диктовать правила брендинга и дизайна логотипа в 2019 году: яркие цвета, градиенты, минимализм и многое другое!

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

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

  • Красный цвет в дизайне сайтов

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

  • Тенденции веб-дизайна в 2018 году

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

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

WEB ДИЗАЙН

Разработка дизайна сайта. Использование шаблонов для "быстрых" проектов.

ПОДДЕРЖКА САЙТА

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

ШАБЛОНЫ САЙТОВ

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

ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ

Графический дизайн (разработка логотипа). Написание seo-текстов. Редизайн сайта. Замена CMS. Кодинг