Блог

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

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

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

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

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

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

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

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

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

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

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

  • 12 тенденций дизайна логотипа в 2022 году

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

  • Тенденции дизайна в июле 2022 года

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

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

Веб дизайн

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

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

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

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

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

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

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