Товаров: 0 (0р.)

Css эффекты текста: 61 CSS-эффект для текста — Записки преподавателя

Содержание

61 CSS-эффект для текста — Записки преподавателя

Коллекция эффектов текста на HTML и CSS с мизерными вставками JavaScript: 3D, анимация, глюки, эффекты наведение, тени, вращение и печать. Живые примеры, код можно загрузить (*zip).

3D CSS Typography

3D CSS typography with HTML and CSS(SCSS).
Автор: Noah Blon
Январь 6, 2017

CSS Text Stroke

Change the text to see the animation again.
Автор: Ignacio Correia
Апрель 27, 2015

3D Extrude Text Effect

HTML and CSS 3D extrude text effect
Автор: Pete Leidy
Июнь 29, 2014

3D Text Effect — Mousemove

Nice 3D Text effect with jQuery mousemove.
Автор: Dennis Garrn
Июль 12, 2013

Анимационный клип волны по тексту

Animated Wave Clipped By Text

Animated wave inside text with svg. Image in the background and gradient filling the wave.
Автор: web-tiki
Январь 5, 2017

Break/Animate Warping Text Paragraph Example

HTML, CSS and JavaScript break/animate warping text paragraph example.
Автор: James
Январь 2, 2017

Smoky Text

Combining text-shadow and CSS transforms (especially skew) for a smoky (or smokey?) effect.

Автор: Bennett Feely
Январь 1, 2017

Bubbling Text Effect

A jQuery powered example of how you can create a bubbling effect on a HTML heading. The bubbles appear as though they’re coming from behind the text, and then fade out and are removed.
Автор: html5andblog
Декабрь 1, 2016

Animated Text Fill

Fill your text with animated background images — no JavaScript required.
Автор: Daniel Riemer
Ноябрь 19, 2016

Pure CSS Text Animation

HTML and CSS text animation.
Автор: Robin Treur
Октябрь 29, 2016

Text Color Draw

Path drawing of text using greensock’s drawSVG plugin.
Автор: CJ Gammon
Октябрь 15, 2016

Animating SVG Text

HTML, CSS and SVG animating text.
Автор: Fabio Ottaviani

Сентябрь 22, 2016

Shaded Text

Shaded text, a SVG + CSS3 experiment about animated shadows. It isn’t optimized for mobile devices… yet.
Автор: Rafael González
Сентябрь 16, 2016

Text Animation: Montserrat

HTML and CSS text animation.
Автор: Claire Larsen
Январь 19, 2016

Squiggly Text

Squiggly text experiment with SVG filters.
Автор: Lucas Bebber
Октябрь 22, 2015

Shattering Text Animation

GSAP text animation. SVG path shattering. Slow motion on hover.
Автор: Arsen Zbidniakov
Сентябрь 17, 2015

Wave Text Effect (With SVG/Blend Mode)

Wave text effect with HTML and CSS.
Автор: Lucas Bebber
Сентябрь 4, 2015

GSAP Text Animation

Text effect using Greensock.
Автор: Nate Wiley

Август 28, 2015

Colorful Text Animation

Fluid and configurable colorful text animation module made with SCSS.
Автор: Hendry Sadrak
Июль 27, 2015

Animated Text With Snap.svg

Work with this feels like an old good Flash 🙂
Автор: Yoksel
Май 17, 2015

Animated Text Fill

Animated text fill with HTML(Pug), CSS(SCSS) and SVG.
Автор: Cesar C.
Февраль 17, 2015

SVG Path Animated Text

Animated the text «Design» based on one SVG path. Click to toggle animation
Автор: Tamino Martinius
Август 14, 2014

Animated «Text-Shadow» Pattern

Uses -webkit-background-clip: text & linear-gradient to simulate striped text shadow.
Автор: carpe numidium
Декабрь 21, 2013

Line Text

Animated text with HTML, CSS and JavaScript.
Автор: Johan Fagerbeg
Сентябрь 22, 2013

Глюки

VHS Text

VHS text with HTML, CSS and JavaScript.
Автор: Maria
Январь 12, 2017

Glitched Text

HTML, CSS and JavaScript glitched text.
Автор: Derek Palladino
Октябрь 17, 2016

Glitch Text

HTML(Pug) and CSS(SCSS) glitch text.
Автор: zoite
Сентябрь 30, 2016

Glitchy Text

Glitchy text with HTML and CSS(SCSS).
Автор: Matt Stvartak
Сентябрь 27, 2016

Glitch

Glitch text with HTML and CSS.
Автор: Christian Petersen
Май 6, 2016

CSS-Only Glitch Effect

Glitch sort of effect with CSS animation.
Автор: Justin
Февраль 5, 2015

CSS Glitched Text By Skew

HTML and CSS glitched text by skew.
Автор: naiting
Сентябрь 3, 2014

Ретроспектива — CSS-эффект наведения

CSS Perspective Text Hover

An experiment using webfonts in combination with CSS 3D transform tools.
Автор: James Bosworth
Август 22, 2016

3D Hover Text Effect

HTML, CSS and JavaScript 3d hover text effect.
Автор: Sascha Sigl
Ноябрь 20, 2015

Animated Highlighted Text

The idea is simple, it make used of linear gradient and transition.
Автор: Rian Ariona
Февраль 19, 2015

Happy Text

HTML and CSS happy text effect.
Автор: Bennett Feely
Декабрь 6, 2014

Peeled Text Transforms

This pen shows text that looks like it is peeled of the page. It has a smooth animation when hovered.
Автор: Michiel Bijl

Ноябрь 25, 2014

Text-Mask Background Moving On MouseMove

Trying the new feature «background-clip: text», with background moving.
Автор: Robert Borghesi
Сентябрь 23, 2014

Typography Text Neon

Text design (typography) with neon effect.
Автор: Prima Utama Apriansyah
Март 6, 2014

3D вращение

3D Quote Rotator

Using GreenSock and the SplitText plugin to create a 3D text effect.
Автор: Nate Wiley
Ноябрь 9, 2015

Rotating Text

HTML, CSS and JavaScript rotating text.
Автор: Rachel Smith
Май 14, 2015

Vertically Rotating Text

Vertically rotating text with HTML and CSS.
Автор: Jacob
Июль 23, 2014

Тени

Тени

Pretty Shadow

Pretty shadow with HTML and CSS.
Автор: Alex Moore
Август 24, 2016

Second Shadow

Styling text with SVG.
Автор: Code School
Апрель 21, 2016

Variable Longshadow With Gradients Mixin

«Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should.» This doesn’t need to exist. But now you can define long shadows with different colors and spreads with one Sass mixin.
Автор: Dario Corsi
Апрель 15, 2016

Shadow Parallax

Move your Mouse and Play words. Written by React, ES6, Babel transpiler.
Автор: Siamak Mokhtari
Январь 9, 2016

Awesome Text-Shadow

Awesome text-shadow with CSS3.
Автор: Nguyen Hoang Nam
Февраль 9, 2015

Text-Shadow

HTML and CSS text-shadow.
Автор: Майur Elbhar
Ноябрь 13, 2014

CSS Text Shadow

Taking a stab at a Lynda.com tutorial. CSS: Advanced Typographic Techniques using lettering.js
Автор: Chris Eisenbraun
Сентябрь 30, 2014

Long Shadow Gradient Mixin

A Sass (Scss) Mixin to quickly generate long shadow gradients. Suitable for both ‘text-shadow’ and ‘box-shadow’.
Автор: roikles
Май 20, 2014

CSS3 Text-Shadow Effects

HTML and CSS3 text-shadow effects.
Автор: Jorge Epuñan
Январь 14, 2014

CSS Dashed Shadow

Pure css hipster-ish typographic dashed shadow.
Автор: Lucas Bebber
Ноябрь 8, 2013

Печать (набор) текста

Typed Text

HTML, CSS and JavaScript typed text.
Автор: Alex
Январь 11, 2017

Auto Typing Text

Auto typing text with HTML, CSS and JavaScript.

Автор: Connor Gaunt
Ноябрь 8, 2016

LOVE Text Effect

Scrambled text effect inspired by the award winning Science Fiction film «LOVE».
Автор: Matthew Wagerfield
Ноябрь 2, 2016

Kinetic Type With Greensock

Kinetic Type with HTML, CSS and JavaScript (Greensock).
Автор: Nerdmanship
Октябрь 14, 2016

Text Scramble Effect

A little text decoding/scramble effect.
Автор: Justin Windle
Июль 6, 2016

Transmission: Glowing Text Animation

A little glowing text animation. First, some JS to wrap each letter in a span. Then a keyframe animation, with animation-delay mixin, lights up each letter in succession.
Автор: Stephen Scaff
Июнь 25, 2016

Futuristic Resolving/Typing Text Effect feat. GLaDOS

Futuristic resolving/typing text effect usually found in game or movie cut scenes to reveal text on screen.

Автор: Kevin
Ноябрь 28, 2015

Text Typing Thingamy

HTML, CSS and JavaScript text typing thingamy.
Автор: Jack Armley
Май 22, 2015

SVG Text: Animated Typing

HTML, CSS and SVG animated typing.
Автор: Tiffany Rayside
Февраль 12, 2015

Typing Text With Javascript

Typing text with HTML, CSS and Javascript.
Автор: Max
Май 19, 2014

 
Источник перевода: 61 CSS Text Effects

CC BY-NC 4.0 61 CSS-эффект для текста, опубликовано К ВВ, лицензия — Creative Commons Attribution-NonCommercial 4.0 International.


9 нравится это

Текстовые эффекты • Про CSS

В посте представлены некоторые эффекты на основе text-shadow.

text-shadow — это свойство, описывающее тень, отбрасываемую текстом. В отличие от box-shadow, тень не обрезается фигурой, ей нельзя задать размер (только радиус размытия) и она не поддерживает параметр inset, то есть нельзя сделать внутреннюю тень.

Тем не менее, используя несколько теней с различными параметрами можно сделать имитацию обводки (которую было бы проще получить, если бы тень поддерживала размер) и имитацию внутренней тени, что позволяет сделать вдавленный текст.

Сочетая тени, градиенты и псевдо-элементы можно сделать много интересного.

Проведите курсором над текстом примеров, чтобы увидеть эффекты при наведении.

Выпуклый текст

h2 {
  text-shadow:
    1px 1px 1px silver,
    -1px 1px 1px silver;
  color: white;
  transition: all .5s;
}

h2:hover {
  text-shadow:
    -1px -1px 1px silver,
    1px -1px 1px silver;
  color: white;
}

Вдавленный текст

h2 {
  text-shadow:
    -1px -1px #000,
    0 1px 0 #444;
  color: #222;
  transition: all 1s;
}

h2:hover {
  text-shadow:
    -1px -1px #000,
    0 1px 0 #444;
  color: #1A1A1A;
}

Размытие

h2 {
  font-size: 50px;
  font-weight: normal;
  cursor: pointer;
  text-shadow: 0 0 15px #999;
  color: transparent;
  transition: all .5s;
}

h2:hover {
  text-shadow: 0 0 0 #333;
}

Контуры

h2 {
  text-shadow:
    1px 1px 0 orange,
    1px -1px 0 orange,
    -1px 1px 0 orange,
    -1px -1px 0 orange;
  color: white;
  transition: all 1s;
}

h2:hover {
  text-shadow:
    1px 1px 0 yellowgreen,
    1px -1px 0 yellowgreen,
    -1px 1px 0 yellowgreen,
    -1px -1px 0 yellowgreen;
  }
h2 {
  text-shadow:
    -1px -1px #FFF,
    -2px -2px #FFF,
    -1px 1px #FFF,
    -2px 2px #FFF,
    1px 1px #FFF,
    2px 2px #FFF,
    1px -1px #FFF,
    2px -2px #FFF,
    -3px -3px 2px #BBB,
    -3px 3px 2px #BBB,
    3px 3px 2px #BBB,
    3px -3px 2px #BBB;
  color: steelblue;
  transition: all 1s;
}

h2:hover {
  color: yellowgreen;
}

Для создания контура вокруг текста можно воспользоваться SCSS-функцией.

Длинные тени

h2 {
  text-shadow:
    1px 1px 0 hsl(20,100%,50%),
    2px 2px 0 hsl(20,100%,50%),
    3px 3px 0 hsl(35,100%,50%),
    4px 4px 0 hsl(35,100%,50%),
    5px 5px 0 hsl(45,100%,50%),
    6px 6px 0 hsl(45,100%,55%),
    7px 7px 0 hsl(55,100%,60%),
    8px 8px 0 hsl(55,100%,65%);
  color: hsl(0,100%,40%);
  transition: all 1s;
}

h2:hover {
  text-shadow:
    1px -1px 0 hsl(290,100%,40%),
    2px -2px 0 hsl(290,100%,40%),
    3px -3px 0 hsl(280,100%,60%),
    4px -4px 0 hsl(280,100%,60%),
    5px -5px 0 hsl(270,100%,75%),
    6px -6px 0 hsl(270,100%,80%),
    7px -7px 0 hsl(260,100%,85%),
    8px -8px 0 hsl(260,100%,90%);
  color: hsl(300,100%,30%);
}

Полосатая тень

h2 {
  display: inline-block;
  position: relative;
  letter-spacing: .05em;
  text-shadow:
    1px 1px mediumturquoise,
    -1px 1px mediumturquoise,
    -1px -1px mediumturquoise,
    1px -1px mediumturquoise;
  color: white;
  transition: all 1s;
}

h2:before {
  content: "";
  position: absolute;
  top: 10px;
  right: -15px;
  bottom: -15px;
  left: 0;
  z-index: -1;
  background: linear-gradient(
    -45deg,
    rgba(72, 209, 204, 0) 2px,
    mediumturquoise 3px,
    rgba(72, 209, 204, 0) 3px )
    repeat;
  background-size: 4px 4px;
}

h2:after {
  content: attr(data-name);
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: -2;
  text-shadow:
    1px 1px white,
    2px 2px white,
    3px 3px white,
    4px 4px white;
  color: white;
  transition: all 1s;
}

h2:hover {
  color: lemonchiffon;
}

h2:hover:before {
  animation: 5s move_lines infinite linear;
}

h2:hover:after {
  color: lemonchiffon;
  text-shadow:
    1px 1px lemonchiffon,
    2px 2px lemonchiffon,
    3px 3px lemonchiffon,
    4px 4px lemonchiffon;
}

@keyframes move_lines {
  100% {
    background-position: 40px 40px;
  }
}

Идея не моя, найдено тут: codepen.io/lbebber/pen/BzoHi

Живое подчеркивание

h2 {
  display: inline-block;
  text-shadow:
    1px 1px 1px white,
    1px -1px 1px white,
    -1px 1px 1px white,
    -1px -1px 1px white;
  color: steelblue;
  transition: all 1s;
}

h2:after {
  content: "";
  display: block;
  position: relative;
  z-index: -1;
  width: 100%;
  margin: auto;
  border-bottom: 3px solid steelblue;
  bottom: .15em;
  transition: all 1s;
}

h2:hover:after {
  width: 0%;
  border-bottom-width: 1px;
}

Подводка

h2 {
  text-shadow:
    1px 1px white,
    2px 2px #777;
  color: #333;
  transition: all 1s;
}

h2:hover {
  text-shadow:
    1px 1px white,
    2px 2px tomato;
  color: crimson;
}

Разъезжающийся текст

h2 {
  overflow: hidden;
  text-shadow:
    0 0 tomato,
    0 0 yellowgreen,
    0 0 skyblue;
  color: transparent;
  transition: all 1s;
}

h2:hover {
  text-shadow:
    -400px 0 tomato,
    400px 0 yellowgreen,
    0 0 skyblue;
  }

15 удивительных текстовых эффектов с помощью CSS3

Каждый веб-дизайнер хочет создавать только стоящие веб сайты, которые оценят все пользователи интернета.

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

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

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

Если вы любите цветы и вы хотите замечательный и полный цвета текста эффект, то это предложение идеальное решение для вас! Это очень подходит для отображения имени креативного агентства или для портфеля проектов. Конечно, он может быть использован для любого другого типа проектов – если вы хотите выделиться, то этот текстовый эффект-отличный выбор!

Волновой эффект действительно потрясающий! Это может использоваться, чтобы добавить немного таинственности. Было бы интересно использовать его для того, чтобы подчеркнуть скидку или специальное предложение, которое работает только в течение очень короткого периода времени.Что вы думаете?

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

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

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

Самые требовательные клиенты-это дети, но это не должно заставить вас отказаться создании сайтов для них. Если вы работаете на малыша, связанных с проектом или смешной один, то вы можете использовать этот эффект для текста! В Jokerman шрифт имеет свою особую красоту, не так ли?

CSS3 и 3D-моделирования имеют общего больше, чем только цифра “3”! С помощью CSS3 позволяет создавать красивые 3D эффекты как один из этого фрагмента.Этот эффект подойдет для большой пул проектов и я думаю, что вы должны дать ему попробовать!

Иногда, играя с огнем может быть весело! Не волнуйся, я не пироман, я просто поражена этим прикольный текстовый эффект! Я не помню, чтобы видел этот текстовый эффект в макете других сайтов, так вот еще один повод использовать его и создать оригинальный сайт!

В ситуации, которую Вы цените больше дискретной текстовый эффект, этот “туманный эффект” — это моя рекомендация. Это правда, что он может негативно повлиять на юзабилити вашего сайта. С другой стороны, если Вы не рискуете, Вы не выиграете! Конечно, это могут быть переделаны, чтобы соответствовать Вашим требованиям!

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

Это очень дискретный эффект, но я думаю, что он может добавить “Вау” эффект в макеты. Металлические выглядят чудесно создан и появляющиеся/исчезающие моменты акцентировать.

Я может быть субъективна, потому что я большой фанат «Звездных Войн» фильм, но этот текстовый эффект действительно классный. Это делает ваши проекты более интересные и, несомненно, поклонники этого фильма влюбилась в ваш сайт из-за этого эффекта.

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

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

Те, которые все еще думают, что атрибуты CSS не достаточно, чтобы создать интересные текстовые эффекты должны дать прислушаться к этому! Она сочетает в себе несколько эффектов — анимация, 3D-перспективы, теней и текстовые настройки. Я думаю, что тени и обводки сочетание-это старомодно, но этот проект создан с целью показать, чего можно достичь с помощью “чистого CSS”.

15 потрясающих анимированных эффектов для текста на CSS

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

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

Спасибо большое http://www.hongkiat.com и обязательно посмотрите следующее:

Эластичная анимация

Этот эффект делается с помощью CSS и SVG, как видите, что результат получился потрясающим.

Перейти

Глюк с SVG

Хотите, чтобы Ваш текст на сайте имел популярный глюк аналогового телевидения? Это можно сделать с помощью CSS и SVG фильтров

Перейти

Ретро логотип

Данный логотип сделан на CSS, а также имеет бегунок, который позволит увеличить его.

Перейти

Эффект сдвига для текста

Как будто текст разрезали острым ножом. Этот эффект сделан с помощью 70 линий на CSS.

Перейти

Длинная тень для текста

Этот элегантный эффект длинной тени для текста создан только с помощью CSS, и смотрится он удивительно.

Перейти

Туманный эффект для текста

Отличный туманный эффект в основном для сайтов с тёмным дизайном. Работает данный эффект только в Webkit браузерах

Перейти

Маска для текста на SVG

Перейти

Анимация для текста

Это на вид простая анимация, но она сделана только на CSS и стоит Вашего внимания.

Перейти

3d текст

Это игра с CSS тенями, но как Вы можете видеть, результат получился очень классным.

Перейти

Текст с фоном

Вернее текст тут, как бы, получается прозрачным.

Перейти

Мигающий текст

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

Перейти

Анимированная подпись

Это необычный эффект для текста на CSS. Подойдёт для множества сайтов, и точно может привлечь посетителей.

Перейти

Глюк для страницы с 404 ошибкой

Совершенно необычный и красивый глюк, который можно установить на страницу с 404 ошибкой.

Перейти

Космос

Довольно интересный и хорошо продуманный логотип с анимацией, которая работает на CSS

Перейти

Загрузка

Это довольно интересный эффект, который можно поставить на предзагрузку Вашего сайта

Перейти

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

Веб-дизайн admin 2 Комментариев 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

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 анимации текста и изображения

25 дизайнов градиентных логотипов

Эффекты текста на CSS | Трепачёв Дмитрий

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

Давайте посмотрим, какие значения может принимать свойство text-decoration.

Значение underline

Значение underline добавляет подчеркивание тексту:

<p> Lorem ipsum dolor sit amet. </p> p { text-decoration: underline; }

:

Значение overline

Значение overline добавляет линию над текстом:

<p> Lorem ipsum dolor sit amet. </p> p { text-decoration: overline; }

:

Значение line-through

Значение line-through добавляет линию, перечеркивающую текст:

<p> Lorem ipsum dolor sit amet. </p> p { text-decoration: line-through; }

:

Значение none

Значение none отменяет все эффекты. Обычно используется для отмены подчеркивания ссылок.

Смотрите пример:

<a href="">ссылка</a> a { text-decoration: none; }

:

Практические задачи

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Создание текстовых эффектов с использованием 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

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

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

61 CSS-эффект для текста — Записки преподавателя

Коллекция эффектов текста на HTML и CSS с мизерными вставками JavaScript: 3D, анимация, глюки, эффекты наведение, тени, вращение и печать. Живые примеры, код можно загрузить (* zip).

3D CSS типографика

3D-типографика CSS с HTML и CSS (SCSS).
Автор: Ной Блон
Январь 6, 2017

Обводка текста CSS

Измените текст, чтобы снова увидеть анимацию.
Автор: Игнасио Коррейя
Апрель 27, 2015

Эффект 3D выдавливания текста

HTML и CSS 3D эффект выдавливания текста
Автор: Пит Лейди
29 Июнь 2014 г.

Эффект 3D-текста — Mousemove

Красивый эффект трехмерного текста с помощью jQuery mousemove.
Автор: Деннис Гаррн
12 июля 2013 г.

Анимационный клип волны по тексту

Анимированная волна с обрезкой текста

Анимированная волна внутри текста с svg. Изображение на заднем плане и градиент, заполняющий волну.
Автор: web-tiki
Январь 5, 2017

Пример абзаца текста с разрывом / анимацией

HTML, CSS и JavaScript пример разбиения / анимации деформации текста абзаца.
Автор: Джеймс
Январь 2, 2017

Smoky Text

Объединение преобразований text-shadow и CSS (особенно перекоса) для создания дымчатого (или дымчатого?) Эффекта.
Автор: Беннетт Фили
Январь 1, 2017

Эффект всплывающего текста

Пример на основе jQuery того, как можно создать эффект всплывающей подсказки для заголовка HTML. Пузырьки выглядят так, как будто они появляются из-за текста, затем исчезают и удаляются.
Автор: html5andblog
1 декабря 2016 г.

Заливка анимированного текста

Заполните текст анимированными фоновыми изображениями — JavaScript не требуется.
Автор: Даниэль Ример
19 ноября 2016 г.

Анимация текста на чистом CSS

Анимация текста HTML и CSS.
Автор: Робин Треур
29 октября 2016 г.

Рисование цвета текста

Отрисовка текста по пути с помощью плагина drawSVG от greensock.
Автор: CJ Gammon
15 октября 2016 г.

Анимация текста SVG

HTML, CSS и SVG для анимации текста.
Автор: Фабио Оттавиани
22 сентября 2016 г.

Закрашенный текст

Закрашенный текст, эксперимент SVG + CSS3 с анимированными тенями. Он не оптимизирован для мобильных устройств… пока.
Автор: Рафаэль Гонсалес
16 сентября 2016 г.

Анимация текста: Монтсеррат

Анимация текста HTML и CSS.
Автор: Клэр Ларсен
Январь 19, 2016

Волнистый текст

Экспериментируйте с волнистым текстом с фильтрами SVG.
Автор: Лукас Беббер
22 октября 2015 г.

Разрывная анимация текста

Текстовая анимация GSAP. Разрушение пути SVG. Замедленное движение при наведении.
Автор: Арсен Збидняков
17 сентября 2015 г.

Эффект волнового текста (с SVG / режимом наложения)

Волновой текстовый эффект с HTML и CSS.
Автор: Лукас Беббер
4 сентября 2015 г.

Анимация текста GSAP

Текстовый эффект с использованием Greensock.
Автор: Нейт Уайли
28 августа 2015 г.

Анимация красочного текста

Гибкий и настраиваемый модуль цветной текстовой анимации, созданный с помощью SCSS.
Автор: Хендри Садрак
27 июля 2015 г.

Анимированный текст с Snap.svg

Работа с этим похожа на старый добрый Flash №
Автор: Yoksel
17 мая 2015 г.

Заливка анимированного текста

Анимированная заливка текста с помощью HTML (Pug), CSS (SCSS) и SVG.
Автор: Сезар К.
Февраль 17, 2015

Анимированный текст SVG Path

Анимированный текст «Дизайн» на основе одного пути SVG.Нажмите, чтобы переключить анимацию
Автор: Тамино Мартиниус
14 августа 2014 г.

Анимированный узор «Текст-Тень»

Использует -webkit-background-clip: text & linear-gradient для имитации полосатой тени текста.
Автор: carpe numidium
21 Декабря 2013

Текст строки

Анимированный текст с HTML, CSS и JavaScript.
Автор: Йохан Фагербег
22 сентября 2013 г.

Глюки

VHS Текст

текст VHS с HTML, CSS и JavaScript.
Автор: Мария
Январь 12, 2017

Текст с ошибками

HTML, CSS и JavaScript искаженный текст.
Автор: Дерек Палладино
17 октября 2016 г.

Текст сбоя

HTML (Pug) и CSS (SCSS) текст с ошибками.
Автор: zoite
30 сентября 2016 г.

Текст с ошибками

Текст с ошибками при использовании HTML и CSS (SCSS).
Автор: Мэтт Ствартак
27 сентября 2016 г.

глюк

Текст с ошибками при использовании HTML и CSS.
Автор: Кристиан Петерсен
6 мая 2016 г.

Эффект сбоя только для CSS

Эффект сбоя с CSS-анимацией.
Автор: Джастин
Февраль 5, 2015

CSS Glitched Text By Skew

HTML и CSS искажают текст перекосом.
Автор: naiting
3 сентября 2014 г.

Ретроспектива — CSS-эффект наведения

CSS Perspective Text Hover

Эксперимент с использованием веб-шрифтов в сочетании с инструментами преобразования CSS 3D.
Автор: Джеймс Босворт
22 августа 2016 г.

Эффект 3D-наведения текста

HTML, CSS и JavaScript текстовый эффект при наведении курсора.
Автор: Саша Сигл
20 ноября 2015 г.

Анимированный выделенный текст

Идея проста, в ней используются линейный градиент и переход.
Автор: Риан Ариона
Февраль 19, 2015

Счастливый текст

HTML и CSS эффект счастливого текста.
Автор: Беннетт Фили
6 декабря 2014 г.

Преобразование очищенного текста

Это перо показывает текст, который выглядит так, как будто он оторван от страницы. У него плавная анимация при наведении.
Автор: Michiel Bijl
25 ноября 2014 г.

Фон текстовой маски, перемещающийся при перемещении мыши

Пробуем новую функцию «background-clip: text» с движением фона.
Автор: Роберт Боргези
23 сентября 2014 г.

Типографский текст Neon

Текстовый дизайн (типографика) с неоновым эффектом.
Автор: Прима Утама Априансях
6 марта 2014 г.

3D вращение

3D Quote Rotator

Использование GreenSock и плагина SplitText для создания эффекта трехмерного текста.
Автор: Нейт Уайли
9 ноября 2015 г.

Вращающийся текст

Вращающийся текст HTML, CSS и JavaScript.
Автор: Рэйчел Смит
14 мая 2015 г.

Вертикально вращающийся текст

Вертикально вращающийся текст с HTML и CSS.
Автор: Яков
23 Июля 2014 г.

Тени

Тени

Pretty Shadow

Красивая тень с HTML и CSS.
Автор: Алекс Мур
Августа 24, 2016

Вторая тень

Стилизация текста с помощью SVG.
Автор: Code School
Апрель 21, 2016

Variable Longshadow с градиентами Mixin

«Ваши ученые были так озабочены тем, смогут ли они или нет, что они не остановились, чтобы подумать, стоит ли им». Этого не должно быть.Но теперь вы можете определять длинные тени с разными цветами и размахами с помощью одного микшина Sass.
Автор: Дарио Корси
Апрель 15, 2016

Параллакс тени

Двигайте мышью и играйте слова. Написано React, ES6, транспайлером Babel.
Автор: Сиамак Мохтари
Январь 9, 2016

Потрясающая тень текста

Потрясающая тень текста с CSS3.
Автор: Нгуен Хоанг Нам
Февраль 9, 2015

Тень текста

HTML и CSS тень текста.
Автор: Майур Эльбхар
13 ноября 2014 г.

Тень текста CSS

Опираясь на учебник Lynda.com. CSS: передовые методы типографики с использованием lettering.js
Автор: Chris Eisenbraun
30 сентября 2014 г.

Смесь с градиентом длинных теней

Миксин Sass (Scss) для быстрой генерации длинных теневых градиентов. Подходит как для text-shadow, так и для box-shadow.
Автор: roikles
20 мая 2014 г.

CSS3 Эффекты текста и тени

HTML и CSS3 текстовые эффекты тени.
Автор: Хорхе Эпуньян
Январь 14, 2014

CSS Пунктирная тень

Чистая css хипстерская типографская штриховая тень.
Автор: Лукас Беббер
8 ноября 2013 г.

Печать (набор) текста

Печатный текст

Печатный текст HTML, CSS и JavaScript.
Автор: Алекс
Январь 11, 2017

Автоматический ввод текста

Автоматический ввод текста с помощью HTML, CSS и JavaScript.
Автор: Коннор Гонт
8 ноября 2016 г.

Текстовый эффект LOVE

Эффект зашифрованного текста, вдохновленный отмеченным наградами научно-фантастическим фильмом «LOVE».
Автор: Мэтью Вагерфилд
2 ноября 2016 г.

Кинетический тип с Greensock

Кинетический тип с HTML, CSS и JavaScript (Greensock).
Автор: Nerdmanship
14 октября 2016 г.

Эффект шифрования текста

Небольшой эффект декодирования / скремблирования текста.
Автор: Джастин Виндл
6 Июля 2016

Передача: анимация светящегося текста

Немного светящейся текстовой анимации. Во-первых, какой-нибудь JS, чтобы обернуть каждую букву в диапазон. Затем анимация по ключевым кадрам с миксином с задержкой анимации последовательно высвечивает каждую букву.
Автор: Стивен Скафф
25 Июнь 2016

Futuristic Resolving / Typing Text Effect feat. ГЛаДОС

Футуристический эффект разрешения / набора текста, обычно встречающийся в вырезанных сценах игр или фильмов для отображения текста на экране.
Автор: Кевин
28 ноября 2015 г.

Набор текста Thingamy

HTML, CSS и JavaScript для набора текста.
Автор: Джек Армли
22 мая 2015 г.

Текст SVG: анимированный ввод

Анимированная типизация HTML, CSS и SVG.
Автор: Тиффани Рэйсайд
Февраль 12, 2015

Ввод текста с помощью Javascript

Набор текста с помощью HTML, CSS и Javascript.
Автор: Max
19 мая 2014 г.


Источник перевода: 61 CSS Text Effects

CC BY-NC 4.0 61 CSS-эффект для текста, опубликовано К ВВ, лицензия — Creative Commons Attribution-NonCommercial 4.0 International.


9 нравится это.

15 потрясающих анимированных эффектов для текста на CSS

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

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

Спасибо большое http://www.hongkiat.com и обязательно посмотрите следующее:

Эластичная анимация

Этот эффект создается с помощью CSS и SVG, как видно, что результат получился потрясающим.

Перейти

Глюк с SVG

Хотите, чтобы Ваш текст на сайте имел популярный глюк аналогового телевидения? Это можно сделать с помощью CSS и SVG фильтров

Перейти

Ретро логотип

Данный логотип сделан на CSS, а также имеет бегунок, который позволит увеличить его.

Перейти

Эффект сдвига для текста

Как текст разрезали острым ножом. Этот эффект сделан с помощью 70 линий на CSS.

Перейти

Длинная тень для текста

Этот элегантный эффект длинной тени для текста создан только с помощью CSS, и смотрится он удивительно.

Перейти

Туманный эффект для текста

Отличный туманный эффект в основном для сайтов с тёмным дизайном. Работает данный эффект только в Webk браузерах

Перейти

Маска для текста на SVG

Перейти

Анимация для текста

Это на вид простая анимация, но она сделана только на CSS и стоит Вашего внимания.

Перейти

3д текст

Это игра с CSS тенями, но как Вы можете видеть, результат получился очень классным.

Перейти

Текст с фоном

Вернее текст тут, как бы, получается прозрачным.

Перейти

Мигающий текст

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

Перейти

Анимированная подпись

Это необычный эффект для текста на CSS.Подойдёт для множества сайтов, и точно может привлечь посетителей.

Перейти

Глюк для страницы с 404 ошибкой

Совершенно необычный и красивый глюк, который можно установить на страницу с 404 ошибкой.

Перейти

Космос

Довольно интересный и хорошо продуманный логотип с анимацией, которая работает на CSS

Перейти

Загрузка

Это довольно интересный эффект, который можно поставить на предзагрузку Вашего сайта

Перейти

.

Текстовые эффекты • Про CSS

В посте представлены некоторые эффекты на основе text-shadow .

text-shadow — это свойство, описывающее тень, отбрасываемую текст. В отличие от box-shadow , тень не обрезается фигурой, ей нельзя задать размер (только размытие) и она не поддерживает параметр inset , то есть нельзя сделать внутреннюю тень.

Тем не менее, используя несколько теней, которые можно сделать вдавленный текст, можно сделать имитацию обводки (это было бы проще получить, если бы тень поддерживала размер) и имитацию внутренней тени.

Сочетая тени, градиенты и псевдо-элементы можно сделать много интересного.

Проведите курсором над текстами примеров, чтобы увидеть эффекты при наведении.

Выпуклый текст 

  h2 {
  текстовая тень:
    1px 1px 1px серебро,
    -1px 1px 1px серебро;
  цвет белый;
  переход: все .5s;
}

h2: hover {
  текстовая тень:
    -1px -1px 1px серебро,
    1px -1px 1px серебро;
  цвет белый;
}

Вдавленный текст 

  h2 {
  текстовая тень:
    -1px -1px # 000,
    0 1px 0 # 444;
  цвет: # 222;
  переход: все единицы;
}

h2: hover {
  текстовая тень:
    -1px -1px # 000,
    0 1px 0 # 444;
  цвет: # 1A1A1A;
}

Размытие 

  h2 {
  размер шрифта: 50 пикселей;
  font-weight: нормальный;
  курсор: указатель;
  тень текста: 0 0 15px # 999;
  цвет: прозрачный;
  переход: все.5 с;
}

h2: hover {
  тень текста: 0 0 0 # 333;
}

Контуры 

  h2 {
  текстовая тень:
    1px 1px 0 оранжевый,
    1px -1px 0 оранжевый,
    -1px 1px 0 оранжевый,
    -1px -1px 0 оранжевый;
  цвет белый;
  переход: все единицы;
}

h2: hover {
  текстовая тень:
    1px 1px 0 желто-зеленый,
    1px -1px 0 желто-зеленый,
    -1px 1px 0 желто-зеленый,
    -1px -1px 0 желто-зеленый;
  }  
  h2 {
  текстовая тень:
    -1px -1px #FFF,
    -2px -2px #FFF,
    -1px 1px #FFF,
    -2px 2px #FFF,
    1px 1px #FFF,
    2px 2px #FFF,
    1px -1px #FFF,
    2px -2px #FFF,
    -3px -3px 2px #BBB,
    -3px 3px 2px #BBB,
    3px 3px 2px #BBB,
    3px -3px 2px #BBB;
  цвет: стально-голубой;
  переход: все единицы;
}

h2: hover {
  цвет: желто-зеленый;
}

Для создания контура вокруг текста можно воспользоваться SCSS-функцией.

Длинные тени 

  h2 {
  текстовая тень:
    1px 1px 0 hsl (20,100%, 50%),
    2px 2px 0 hsl (20,100%, 50%),
    3px 3px 0 hsl (35,100%, 50%),
    4px 4px 0 hsl (35,100%, 50%),
    5px 5px 0 hsl (45,100%, 50%),
    6px 6px 0 hsl (45,100%, 55%),
    7px 7px 0 hsl (55,100%, 60%),
    8px 8px 0 hsl (55,100%, 65%);
  цвет: hsl (0,100%, 40%);
  переход: все единицы;
}

h2: hover {
  текстовая тень:
    1px -1px 0 hsl (290,100%, 40%),
    2px -2px 0 hsl (290,100%, 40%),
    3px -3px 0 hsl (280,100%, 60%),
    4px -4px 0 hsl (280,100%, 60%),
    5px -5px 0 hsl (270,100%, 75%),
    6px -6px 0 hsl (270,100%, 80%),
    7px -7px 0 hsl (260,100%, 85%),
    8px -8px 0 hsl (260,100%, 90%);
  цвет: hsl (300,100%, 30%);
}

Полосатая тень 

  h2 {
  дисплей: встроенный блок;
  положение: относительное;
  Межбуквенное расстояние: .05em;
  текстовая тень:
    1px 1px средний бирюзовый,
    -1px 1px средний бирюзовый,
    -1px -1px средний бирюзовый,
    1px -1px mediumturquoise;
  цвет белый;
  переход: все единицы;
}

h2: before {
  содержание: "";
  позиция: абсолютная;
  верх: 10 пикселей;
  вправо: -15 пикселей;
  внизу: -15 пикселей;
  слева: 0;
  z-индекс: -1;
  фон: линейный градиент (
    -45град,
    rgba (72, 209, 204, 0) 2 пикселя,
    средний бирюзовый 3px,
    rgba (72, 209, 204, 0) 3 пикселя)
    повторение;
  размер фона: 4px 4px;
}

h2: after {
  содержимое: attr (имя-данных);
  позиция: абсолютная;
  верх: 2 пикселя;
  слева: 2 пикселя;
  z-индекс: -2;
  текстовая тень:
    1px 1px белый,
    2px 2px белый,
    3px 3px белый,
    4px 4px белый;
  цвет белый;
  переход: все единицы;
}

h2: hover {
  цвет: лимонно-шифон;
}

h2: hover: before {
  анимация: 5 секунд move_lines бесконечная линейная;
}

h2: hover: after {
  цвет: лимонно-шифон;
  текстовая тень:
    1px 1px лимонно-шифон,
    2px 2px лимонно-шифон,
    Лимонно-шифон 3px 3px,
    Лимонно-шифон 4px 4px;
}

@keyframes move_lines {
  100% {
    background-position: 40px 40px;
  }
}

Идея не моя, найдено тут: codepen.io / lbebber / ручка / BzoHi

Живое подчеркивание 

  h2 {
  дисплей: встроенный блок;
  текстовая тень:
    1px 1px 1px белый,
    1px -1px 1px белый,
    -1px 1px 1px белый,
    -1px -1px 1px белый;
  цвет: стально-голубой;
  переход: все единицы;
}

h2: after {
  содержание: "";
  дисплей: блок;
  положение: относительное;
  z-индекс: -1;
  ширина: 100%;
  маржа: авто;
  нижняя граница: твердый стальной синий цвет 3 пикселя;
  внизу: .15em;
  переход: все единицы;
}

h2: hover: after {
  ширина: 0%;
  ширина нижней границы: 1 пиксель;
}

Подводка 

  h2 {
  текстовая тень:
    1px 1px белый,
    2px 2px # 777;
  цвет: # 333;
  переход: все единицы;
}

h2: hover {
  текстовая тень:
    1px 1px белый,
    2px 2px помидор;
  цвет: малиновый;
}

Разъезжающийся текст 

  h2 {
  переполнение: скрыто;
  текстовая тень:
    0 0 помидор,
    0 0 желто-зеленый,
    0 0 небесно-голубой;
  цвет: прозрачный;
  переход: все единицы;
}

h2: hover {
  текстовая тень:
    -400px 0 помидор,
    400px 0 желто-зеленый,
    0 0 небесно-голубой;
  }
.

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

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

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

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

Цветовые слои (оверлеи) в веб-дизайне

Содержание

  • 1 Анимация рукописного текста
  • 2 Терминал
  • 3 Дымчатый
  • 4 Преобразование очищенного текста
  • 5 Бумажный текст CSS
  • 6 LOVE
  • 7 Цветной
  • 8 Вращающийся текст
  • 9 Автоматический ввод
  • 10 Преобразование текста
  • 11 Передача: Анимация светящегося текста
  • 12 Эмблема — Автоматическое создание кругового текста
  • 13 Наведение текста в перспективе CSS
  • 14 Простой
  • 15 Заголовок
  • 16 Изображение, открывающееся из текста при наведении
  • 17 Текст с ошибками на фоне изображения
  • 18 Анимированный выделенный текст
  • 19 Заливка, вылет
  • 20 Плавающий текст
  • 21 Анимация текста с фоном
  • 22 Демонстрация VelocityJS
  • 23 Частицы пишут текст
  • 24 Заливка анимированным текстом
  • 25 Эффект неонового текста
  • 26 шрифт анимированной графики
  • 27 Загрузчик анимированных шрифтов
  • 28 Карточка материалов с анимированными элементами Изображение
  • 29 Полностью адаптивный макет с красивой анимацией
  • 30 Масштабирование + панорамирование изображения при наведении и перемещении мыши
  • 31 Разрушение изображений
  • 32 Строительные изображения
  • 33 Ползунок наложения изображений
  • 34 Эффект наведения изображения

Анимация рукописного текста

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

Терминал

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

Дымчатый

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

Преобразование очищенного текста

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

Текст статьи CSS

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

ЛЮБОВЬ

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

Цветной

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

Вращающийся текст

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

Автоматический ввод

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

Преобразование текста

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

Передача: анимация светящегося текста

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

Эмблема — Автоматическое создание кругового текста

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

CSS Перспективный текст при наведении

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

Простой

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

Название

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

Изображение появляется из текста при наведении курсора

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

Текст с ошибкой на фоне изображения

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

Анимированный выделенный текст

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

Прилет, вылет

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

Плавающий текст

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

Анимация текста с фоном

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

Демо VelocityJS

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

Частицы записывают текст

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

Заливка анимированным текстом

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

Эффект неонового текста

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

шрифт анимированной графики

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

Погрузчик анимированного типа

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

Карта материала с анимированным изображением

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

Полностью адаптивный макет с красивой анимацией

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

Масштабирование + панорамирование изображения при наведении и перемещении мыши

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

Разрушающие изображения

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

Изображения зданий

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

Ползунок наложения изображений

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

Эффект наведения изображения

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

25 дизайнов градиентных логотипов .

No related posts.

Как часто можно делать клизму грудничку: рекомендации педиатров

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Как успокоить плачущего ребенка: 10 эффективных способов

Что нужно новорожденному на первое время: полный список необходимых вещей

Пеленки для новорожденных: виды, размеры и способы использования

Детская кроватка для новорожденного: как правильно выбрать

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *