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

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

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

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

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

Использование приглушённой цветовой палитры в веб-дизайне
Использование приглушённой цветовой палитры в веб-дизайне
В 2023 году пришло время отказаться от ярких цветов. Приглушенные и пастельные цвета сейчас незаметно доминируют в веб-дизайне. Хотя приглушенные цвета противоположны ярким и смелым, они все же могут эмоционально воздействовать на пользователя и передавать послание современности, безмятежности и спокойствия.

Как создать потрясающий логотип бесплатно
Как создать потрясающий логотип бесплатно
Хороший логотип - ценный актив, он создает узнаваемость бренда и устанавливает доверие, в то время как плохой логотип может нанести реальный ущерб бренду...

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

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

Психология шрифтов: вот, что вам нужно знать о шрифтах
Психология шрифтов: вот, что вам нужно знать о шрифтах
В мире насчитывается более полумиллиона шрифтов. Хотя большая часть Интернета построена на нескольких популярных типах шрифтов, есть много возможностей выбрать уникальный путь. Поскольку шрифты также являются визуальными элементами, вы можете использовать их в качестве психологических элементов для создания повествования, поддерживающего усилия вашего сайта.

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

QRcode

2010-2024 © Веб студия iNikSite.ru (г. Подольск). Все права сохранены.

Цены на сайте носят ознакомительный характер и не являются публичной офертой! Просим уточнять цены при отправке заявки в нашу компанию. У нас действуют специальные предложения и скидки на различные варианты исполнения заказа и 100% предоплату!

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