Эффекты css для текста – 7 классных примеров с тенями для текста, которые вы просто не можете пропустить

Содержание

34 примера CSS анимации текста и изображения

Веб-дизайн admin 1 Комментарий HTML, вдохновение, дизайн

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

Анимация может влиять на эмоции пользователя, информировать его и направлять его внимание.

Ошибки в мобильном дизайне, которые не нравятся поисковикам

Содержание

  • 1 Handwritting Text Animation
  • 2 Terminal
  • 3 Smoky
  • 4 Peeled Text Transforms
  • 5 CSS Paper Text
  • 6 LOVE
  • 7 Colorful
  • 8 Rotating text
  • 9 Auto Typing
  • 10 Text Transform
  • 11 Transmission: Glowing Text Animation
  • 12 Emblem – Auto generate circular text
  • 13 CSS Perspective Text Hover
  • 14 Simple
  • 15 Title
  • 16 Image revealing from text on hover
  • 17 Glitch text with image background
  • 18 Animated highlighted text
  • 19 Fly in, fly out
  • 20 Floating Text
  • 21 Text Animation with background
  • 22 VelocityJS demo
  • 23 Particles write text
  • 24 Animated text fill
  • 25 Neon Text Effect
  • 26 motion graphic typeface
  • 27 Animated Type Loader
  • 28 Material Card with Animated Featured Image
  • 29 Fully Responsive Layout With Nice Animation
  • 30 Zoom + pan the image on hover & mouse move
  • 31 Shattering Images
  • 32 Building Images
  • 33 Image Overlay Slider
  • 34 Image hover effect
    • 34.1 ЭТО ИНТЕРЕСНО!

Handwritting Text Animation

34 примера CSS анимации текста и изображения

Terminal

34 примера CSS анимации текста и изображения

Smoky

34 примера CSS анимации текста и изображения

Peeled Text Transforms

34 примера CSS анимации текста и изображения

CSS Paper Text

34 примера CSS анимации текста и изображения

LOVE

34 примера CSS анимации текста и изображения

Colorful

34 примера CSS анимации текста и изображения

Rotating text

34 примера CSS анимации текста и изображения

Auto Typing

34 примера CSS анимации текста и изображения

Text Transform

34 примера CSS анимации текста и изображения

Transmission: Glowing Text Animation

34 примера CSS анимации текста и изображения

Emblem – Auto generate circular text

34 примера CSS анимации текста и изображения

CSS Perspective Text Hover

34 примера CSS анимации текста и изображения

Simple

34 примера CSS анимации текста и изображения

Title

34 примера CSS анимации текста и изображения

Image revealing from text on hover

34 примера CSS анимации текста и изображения

Glitch text with image background

34 примера CSS анимации текста и изображения

Animated highlighted text

34 примера CSS анимации текста и изображения

Fly in, fly out

34 примера CSS анимации текста и изображения

Floating Text

34 примера CSS анимации текста и изображения

Text Animation with background

34 примера CSS анимации текста и изображения

VelocityJS demo

34 примера CSS анимации текста и изображения

Particles write text

34 примера CSS анимации текста и изображения

Animated text fill

34 примера CSS анимации текста и изображения

Neon Text Effect

34 примера CSS анимации текста и изображения

motion graphic typeface

34 примера CSS анимации текста и изображения

Animated Type Loader

34 примера CSS анимации текста и изображения

Material Card with Animated Featured Image

34 примера CSS анимации текста и изображения

Fully Responsive Layout With Nice Animation

34 примера CSS анимации текста и изображения

Zoom + pan the image on hover & mouse move

34 примера CSS анимации текста и изображения

Shattering Images

34 примера CSS анимации текста и изображения

Building Images

34 примера CSS анимации текста и изображения

Image Overlay Slider

34 примера CSS анимации текста и изображения

Image hover effect

34 примера CSS анимации текста и изображения

15 примеров великолепного использования текстур бумаги

ЭТО ИНТЕРЕСНО!

Создание текстовых эффектов с использованием CSS3

В этом уроке мы покажем шесть удивительных текстовых эффектов CSS3: эффект трехмерности, созданный с помощью тени текста, эффекты с градиентами и масками изображений, эффекты с переходами и свойством background-clip и другие эффекты. Без сомнения все они могут пригодиться, так как с помощью CSS3 можно добиться по-настоящему впечатляющих результатов. Часть вышеописанных эффектов работает в большинстве браузеров, поддерживающих CSS3, но несколько примеров работает только на движке Webkit. Следовательно, что бы получить максимальное впечатления, посмотрите демонстрацию в браузерах, поддерживающих движок Webkit, таких как Chrome, Safari и Opera.

 

 


 

Демонстрация работы – Скачать исходный код

Для начала давайте добавим общие стили для всех дальнейших экспериментов:

#main div {
font-size: 120px;
font-weight:bold;
position: relative;
}

Здесь мы задали размер шрифта и его толщину. Теперь давайте начнем.

Эффект №1 — Трехмерный текст с помощью тени текста CSS3 

Сложно представить все возможности, которые предоставляет традиционное свойство тени текста. В CSS3 свойство тени текста применяет тень к тексту. Можно задать горизонтальный размер тени, вертикальный размер тени, расстояние размытие и цвет тени:

text-shadow: h-shadow v-shadow blur color;
/* пример: */
text-shadow: 2px 2px 5px #FF7777;

Чтобы добавить больше глубины тексту, нужно просто добавить несколько теней, например:

#eff1 {
color: #00b506;
text-shadow:
0px 0px 0 rgb(-28,153,-22),
1px 1px 0 rgb(-55,126,-49),
2px 2px 0 rgb(-83,98,-77),
3px 3px 0 rgb(-111,70,-105),
4px 4px 0 rgb(-139,42,-133),
5px 5px 0 rgb(-166,15,-160),
6px 6px 0 rgb(-194,-13,-188),
7px 7px 0 rgb(-222,-41,-216),
8px 8px 7px rgba(0,0,0,0.75),
8px 8px 1px rgba(0,0,0,0.5),
0px 0px 7px rgba(0,0,0,.2);
}

Эффект №2 — градиент текста CSS3 c помощью -webkit-mask-image для движка Webkit 

Этот эффект использует маски CSS3, свойство -webkit-mask-image. Пока что это свойство не поддерживается другими браузерами, но надеемся, оно будет поддерживаться в будущем:

#eff2 {
color: #00b506;
text-shadow: 1px 1px 1px #000000;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.3)), to(rgba(0,0,0,1)));
}

Эффект №3 — радужный фон текста CSS3 с помощью -webkit-text-fill-color для движка Webkit 

Чтобы добиться такого эффекта, используем свойство background-clip с нестандартным значением text, которое поддерживается только браузерами на движке Webkit:

#eff3 {
background-image: -webkit-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
background-image:    -moz-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
background-image:     -ms-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
background-image:      -o-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
background-image:         linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

Эффект №4 — Сияющий текст с помощью переходов CSS3 и -webkit-background-clip для движка Webkit 

В браузере на движке Webkit полоса света временами пробегает по тексту. Для достижения этого эффекта использовано то же свойство background-clip с нестандартным значением text:

#eff4 {
background: #00b506 -webkit-gradient(linear, left top, right top, from(#00b506), to(#00b506), color-stop(0.5, #ffffff)) 0 0 no-repeat;
color: rgba(255, 255, 255, 0.1);
font-size: 120px;
font-weight: bold;
position: relative;

-webkit-animation: shine 2s infinite;
-webkit-background-clip: text;
-webkit-background-size: 300px;
}
@-webkit-keyframes shine {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}

Эффект №5 — обведенный текст CSS3 с помощью свойства text-stroke для движка Webkit 

Можно легко добавить интересную плоскую обводку текста с помощью свойства -webkit-text-stroke:

#eff5 {
color: #00b506;
-webkit-text-stroke: 1px #000;
}

Эффект №6 — трехмерный поворот текста с помощью свойства трансформации поворота вокруг оси Y CSS3 

Можно повернуть текст с помощью переходов и трансформации поворота вокруг оси Y:

#eff6 {
color: #00b506;
}
#eff6 p {
color: #8A2BE2;
cursor: pointer;
display: inline-block;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
#eff6 p:hover {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-0-transform: rotateY(-180deg);
transform: rotateY(-180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2)
}

Демонстрация работы – Скачать исходный код

Заключение 

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

Автор урока Andrew Prikaznov

Перевод — Дежурка

Смотрите также:

Текстовые эффекты средствами CSS3

Типографика играет очень важную роль при создании сайта, и благодаря нововведениям в  CSS уже сейчас можно создавать потрясающие текстовые  эффекты. Они становятся всё более популярными с каждым днём. В этой статье мы будем рассматривать, как можно создать интересную типографику, используя только средства CSS. В уроке будет рассмотрена добавление градиента к тени, добавление эффекта рельефной тени к тексту с градиентом и добавление текстурной тени. Увы, эти эффекты будут работать только в браузерах Webkit. 

 

 

Градиент

Это работает точно так же, как и создание градиентного фона с  помощью CSS3, но мы будем накладывать фон на текст. Вот пример кода:

CSS: 

h2#gradient {
    color: #FF0052; /* Fallback Color */
    text-transform: uppercase;
    font-weight: bold;
    font-family: helvetica;
    text-align:center;
    font-size: 70px;
    letter-spacing: -4px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    h2#gradient {
    background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
}

HTML: 

<h2>CSS3 Rocks!</h2>

Unfortunately, This technique only works on webkit browsers. The problem with Firefox is that there’s no properties that allow background-clip to work with text, so when viewing on other browsers, it will fall back to a normal color. I also wrapped the effect with @media screen and (-webkit-min-device-pixel-ratio:0) to prevent the background gradient showing up on unsupported browsers.

К сожалению, этот метод работает только в браузерах WebKit. Проблема с Firefox является то, что нет никаких свойств, которые позволяют <span><span> <code>background-clipработать с текстом, так что при просмотре в других браузерах текст будет иметь нормальный цвет.  Также  браузеры не поддерживают эффект <span><span><code>@media screen и (-webkit-min-device-pixel-ratio:0).

Эффект рельефной тени

К градиенту можно добавить некоторую глубину, применив эффект рельефной тени. Эффект рельефной тени — достаточно популярная техника, которая демонстрирует достаточно четкое разделение между самой буквой и тенью. Этот эффект может быть достигнут с помощью использования 2 значений oftext-shadow. Цвет первой тени должен совпадать с цветом фона, чтобы создать расстояние между второй тенью и текстом. Вот пример кода: 

CSS: 

body {
    background: #441369;
}
h2#gradient {
    text-align:center;
}
h2#gradient span {
    position:relative;
    display: inline-block;
    color: #FF0052; /* Fallback Color */
    text-transform: uppercase;
    font-weight: bold;
    font-family: helvetica;
    text-align:center;
    font-size: 70px;
    letter-spacing: -4px;
    text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1);  /* Fallback Shadow */
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    h2#gradient span{
        background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow:none !important;
    }
    h2#gradient span:after {
        background: none;
        content: attr(data-text);
        left: 0;
        position: absolute;
        text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1); //relief shade effect
        top: 0;
        z-index: -1;
    }
}

HTML: 

<h2><span data-text="CSS3 Rocks!">CSS3 Rocks!</span></h2>

Эта часть является сложнее. Проблема возникла,  с тем, что text-shadow и градиент не совсем хорошо смотрелись вместе. Был добавлен селектор :after и значение  z-index -1 , чтобы тень не перекрывала текст. Но такое решение не обеспечит нормальное отображение, если у нас будет выравнивание ext-align: center. Эффект в :after будет отображаться неровно, и чтобы решить эту проблемы, нужно для текста прописать: position: relative и display: inline-block. Добавляем HTML атрибут  data-text и  надпись «CSS3 Rocks!» в теге span и в css прописываем acontent: attr(data-text) в селекторе :after. после селектора. Вот мы и получили эффект рельефной тени совместно с градиентом. 

Эффект текстурной тени

Добавляем небольшие изменения к предыдущему коду:

CSS: 

body {
    background: #441369;
}
h2#gradient {
    text-align:center;
}
h2#gradient span {
    position:relative;
    display: inline-block;
    color: #FF0052; /* Fallback Color */
    text-transform: uppercase;
    font-weight: bold;
    font-family: helvetica;
    text-align:center;
    font-size: 70px;
    letter-spacing: -4px;
    text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1);  /* Fallback Shadow */
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    h2#gradient span{
      background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow:none !important;
    }
    h2#gradient span:after {
        content: attr(data-text);
        left: 8px;
        position: absolute;
        background: url(http://i.imgur.com/RkDRMcJ.png); /* image source for your texture */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: -4px -4px 0px #441369, -1px 0px 0px rgba(255, 255, 255, 0.1);
        top: 8px;
        z-index: -1;
        width: 100%;
    }
}

HTML: 

<h2><span data-text="CSS3 Rocks!">CSS3 Rocks!</span></h2>

С помощью нескольких изменений text-shadow и добавления изображения для текстуры мы смогли получить удивительную типографику для сайта, даже не открывая Photoshop. 

 

 

 

Автор:  Pete R.

Перевод — Дежурка

Красивая анимация текста на CSS3 — анимация текста css

Лого SiteHere.ru