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

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

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

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

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

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

12 тенденций дизайна логотипа в 2022 году
12 тенденций дизайна логотипа в 2022 году
Поскольку разработка логотипа является неотъемлемой частью графического дизайна (многие тенденции графического дизайна сводятся к разработке логотипа), дизайнерам необходимо постоянно быть в курсе этих тенденций, чтобы использовать их везде, где это необходимо.

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

Двадцать одна тенденция веб-дизайна на 2021 год
Двадцать одна тенденция веб-дизайна на 2021 год
В продолжение нашей предыдущей статьи, предлагаем вашему вниманию предполагаемые тенденции в веб дизайне в 2021 году по версии сайта webflow. com...

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

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

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


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

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