Как сделать переливающийся фон в html

Линейный градиент

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

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Линейный градиент для абзаца

В самом простом случае с двумя цветами продемонстрированном в примере 1 вначале пишется позиция, от которой будет начинаться градиент, затем начальный и конечный цвет.

Табл. 1. Типы градиента

Позиция	Угол	Описание	Вид
to top	0deg	Снизу вверх.
to left	270deg	Справа налево.
to bottom	180deg	Сверху вниз.
to right	90deg	Слева направо.
to top left	От правого нижнего угла к левому верхнему.
to top right	От левого нижнего угла к правому верхнему.
to bottom left	От правого верхнего угла к левому нижнему.
to bottom right	От левого верхнего угла к правому нижнему.

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

Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке. Отсчёт угла наклона градиентной линии показан ниже.

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

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

Пример 2. Полупрозрачные цвета

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Градиент с полупрозрачными цветами

Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию. В примере 3 показано создание градиентной кнопки, в которой положение второго цвета из трёх задано как 36%.

Пример 3. Градиентная кнопка

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера показан на рис. 3.

Рис. 3. Градиентная кнопка

За счёт задания положения цвета можно получить резкие переходы между цветами, что в итоге даёт набор однотонных полосок. Так, для двух цветов надо указать четыре цвета, первые два цвета одинаковы и начинаются от 0% до 50%, оставшиеся цвета также одинаковы меж собой и продолжаются от 50% до 100%. В примере 4 полоски добавляются в качестве фона веб-страницы. Из-за того, что крайние значения подставляются автоматически их можно не указывать, так что достаточно написать всего-лишь два цвета.

Пример 4. Однотонные полоски

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера показан на рис. 4. Обратите внимание, что один из цветов градиента задан прозрачным, поэтому он меняется косвенно через цвет фона веб-страницы.

Источник

Переливающаяся градиентная заливка фона

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

Другими словами, у Вас будет динамически изменяющийся фон, или проще говоря, цвет фона Вашего сайта будет постоянно плавно переливаться от одного цвета к другому. Но, хотим обратить Ваше внимание на то, что в некоторых браузерах, например Opera, фон будет просто плавно сменяться (градиентная заливка не работает).

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

Для того чтобы получить точно такой же переливающийся фон, как и на данной страничке, вставьте на свой сайт, следующий код:

var color_A = 0 ;
var color_B = 1 ;
var color_C = 1 ;
var color_D = 2 ;

color_A ++;
color_B ++;
color_C ++;
color_D ++;

if ( rgb_red_now > 255 ) rgb_red_now = 255 ;
if ( rgb_red_now 0 ) rgb_red_now = 0 ;
if ( rgb_green_now > 255 ) rgb_green_now = 255 ;
if ( rgb_green_now 0 ) rgb_green_now = 0 ;
if ( rgb_blue_now > 255 ) rgb_blue_now = 255 ;
if ( rgb_blue_now 0 ) rgb_blue_now = 0 ;

if ( rgb_red_now_b > 255 ) rgb_red_now_b = 255 ;
if ( rgb_red_now_b 0 ) rgb_red_now_b = 0 ;
if ( rgb_green_now_b > 255 ) rgb_green_now_b = 255 ;
if ( rgb_green_now_b 0 ) rgb_green_now_b = 0 ;
if ( rgb_blue_now_b > 255 ) rgb_blue_now_b = 255 ;
if ( rgb_blue_now_b 0 ) rgb_blue_now_b = 0 ;

if ( browser_ok ) translate_rgb ();

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

Источник

Переливающийся текст на CSS

Переливающийся текст c помощью анимации линейного градиента

Простой пример как анимировать линейный градиент, выступающим фоном текста

Пример:

Чем крупнее и жирнее шрифт, тем интереснее и красивее можно настроить эффект переливания.

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

Вертикальное выравнивание текста

Универсальные способы выравнивания текста по вертикали

Смежные кнопки на CSS

Вариант оформления смежных кнопок с меняющейся шириной

Hover-эффект для каждой буквы

jQuery скрипт, который накладывает ховер-эффект на каждую букву в тексте

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

Комментарии:

Здравствуйте
А как сделать чтобы фон было видео?
И на нем данный CSS код с переливающимся текстом

Общий контейнер ставится в relative, а текст накладывается через absolute;
Тут можно посмотреть пример, только вместо канваса у вас будет видео, и соотв. другое оформление текста.

Как сделать фон прозрачный вообще только текст чтобы был

Не понял, какой фон?
Сейчас фон блока — белый, фон текста переливается.

а если фон не белый?? Черный фон не получается сделать..

Источник

Делаем градиент текста css стилями, а также переливающийся текст для акцентрирования внимания

Доброго времени суток всем, кто обожает узнавать необычные и новые возможности css. Эта публикация как раз для вас. И я вам гарантирую, она будет очень интересной и полезной. Сегодня я расскажу, как можно создать градиент текста css-средствами.

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

Ах, какие цвета, какой стиль!

Я решил начать с самого простого. С появлением нового стандарта css3 возможности стилевых таблиц значительно расширились. Теперь стало легче управлять градиентами и применять их непосредственно к тексту. Это смотрится очень эффектно.

В инструментах как html, так и css нет независимого элемента, который бы отвечал за градиент. Поэтому переход цветов происходит за счет использования такого параметра, как

, который применяют или к background или конкретно к background- image.

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

Порядок определения значений выглядит так:

linear-gradient (угол наклона или позиция, цвет 1, …,цвет n)

Что касается первого параметра, то его можно задавать как в градусах (например, 88deg), так и специальными словами, которые называются ключевыми.

Угол можно описать положительным или отрицательным числом.

Что касается ключевых слов, то чтобы установить позицию перелива цветов, нужно вначале написать to, а после добавить указание или стороны блока (к примеру, to right), или одного из углов (to bottom right).

В первом примере я хочу показать, как будет выглядеть описанный способ создания градиента. Напоминаю, что запустить код вы можете через «Блокнот» или через онлайн-редактор.

Источник

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

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

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

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

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

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

Глюк с SVG

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

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

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

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

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

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

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

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

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

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

See the Pen SVG text mask by Marco Barría (@fixcl) on CodePen.

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

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

3d текст

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

Текст с фоном

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

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

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

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

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

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

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

Космос

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

See the Pen COSMOS by Patrick Brosset (@captainbrosset) on CodePen.

Загрузка

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

See the Pen ByVYZK by Ian Gloude (@igloude) on CodePen.

Источник