Свечение текста css

Эффекты текста HTML и CSS | Свет и Тень

 

Текст (text) с тенью (shadow) ранее можно было встретить практически на всех сайтах, такое свойство было очень модным в свое время. Возьмем например графический редактор, в каждом редакторе используется данный эффект и выглядит он просто и стильно. Поэтому свойство text-shadow добавляли на сайты, вне зависимости от того было ли это проявлением необходимости и подходило ли к стилю самого сайта. Некоторое время спустя большинство браузеров начали поддерживать свойство текста и тени (text-shadow), но интерес к данному эффекту угас. И в наши дни встречается крайне редко. При том, что текст с тенью имеет много других способов применения и интересных свойств: свечение текста, контурные рамки, размытие текста, тиснение текста, трехмерный текст и др.

Нижеприведенные эффекты текста настраиваются в файлах .CSS или под тегами «style» в HTML страницах.

Использование text-shadow

Свойство используется в любом формате CSS и имеет 4 параметра: смещение по горизонтали и смещение по вертикали, радиус размытия и цвет тени. Полупрозрачную тень можно сделать применив формат rgba. Радиус размытия определяет резкость тени, т.е. чем больше радиус, тем мягче выглядит тень. Смещение тени вправо и вниз имеет положительное значение, обратно влево и вверх имеет отрицательное значение, при этом при необходимости добавить тень вокруг всего текста значение смещения должно равняться 0.


Главным достоинством свойства текста с тенью (text-shadow) является возможность применения нескольких теней, просто добавив дополнительные параметры через запятую. Такая особенность позволит разнообразить эффекты тени.

Как упоминалось выше эффект текста с тенью используется большинством браузеров, исключение составляют IE (internet explorer) до 10 версии.

Контурный текст

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

    Контурный текст создается 2 способами:

  1. Смещение тени равно 0, а радиус размытия 1-2 px (px — pix element — пиксель или пиксел);
  2. Если увеличить уровень размытия текста контур превратиться в эффект свечения.

Рассмотрим пример контурного текста

HTML5 CSS3 IE9 IE10
<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Текст</title>   <style>   .stroka {   font: 2em Arial, sans-serif;   text-shadow: red 0 0 2px;   }   </style>   </head>   <body>   <p class="stroka">Создание и продвижение сайтов в ИНТЕРНЕТЕ</p>   </body>  </html>

ОБРАТИТЕ ВНИМАНИЕ! В ПОСЛЕДУЮЩИХ ПРИМЕРАХ СТРУКТУРА HTML СТРАНИЦЫ   НЕ БУДЕТ ПОКАЗАНА, ТОЛЬКО НЕОБХОДИМЫЕ КОМАНДЫ.

Контур вокруг текста будет несколько размытым, если необходима четкая линия можно воспользоваться другим способом. Используя 4 резких тени одинакового цвета и смещение разных углов. Тем самым получая выразительный и четкий контур.

<style>   .stroka {   font: 2em Arial, sans-serif;   text-shadow: red 1px 1px 0, red -1px -1px 0,    red -1px 1px 0, red 1px -1px 0;   }   </style>

Трехмерный текст

Эффект 3D текста. В трехмерности текста используется смещение нескольких теней по горизонтали и вертикали. Что также в основном применимо в заголовках веб-страниц.

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

<style>   .stroka {   font: bold 3em Arial, sans-serif;   color: #0d3967;   text-shadow: #cad5e2 1px 1px 0, #cad5e2 2px 2px 0,    #cad5e2 3px 3px 0, #cad5e2 4px 4px 0,    #cad5e2 5px 5px 0;   }   </style>

Рельеф текста

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


<style>   body {   background: #f0f0f0; /* Цвет фона веб-страницы */   }   .stroka {   font: bold 3em Arial, sans-serif;   color: #f0f0f0; /* Цвет текста, совпадает с цветом фона */   text-shadow: #fff -1px -1px 0,    #333 1px 1px 0;   }   </style>

Свечение текста

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

<style>   .light {   text-shadow: #5dc8e5 0 0 10px; /* Свечение голубого цвета */   color: #0083bd;   }   .dark {   text-shadow: red 0 0 10px; /* Свечение красного цвета */   }   </style>   </head>   <body>   <h2 class="light">Светлая сторона</h2>   <h2 class="dark">Тёмная сторона</h2>   </body>

Размытие текста

Эффект размытия текста очень прост, ведь тень имеет данное свойство, поэтому необходимо скрыть сам текст. Используя команду для цвета transparent делаем текст прозрачным и на месте букв остается только тень, а регулируя радиус размытия выбираем степень резкости текста.


<style>   .stroka {   text-shadow: #000 0 0 5px;   color: transparent; /* Прозрачный цвет текста */   }   </style>

Тень и псевдоклассы

Используя псевдоклассы :hover и :first-letter можно получить великолепные эффекты: свечение при наведении курсора или контурная первая буква абзаца. А свойство текста с тенью (text-shadow) отлично с ними работает.

<style>   a:hover { /* Вид ссылки при наведении на неё курсора */   text-shadow: #5dc8e5 0 0 5px;   color: #000;   }   p:first-letter { /* Первая буква абзаца */   font-size: 2em;   text-shadow: red 1px 1px 0, red -1px -1px 0,    red -1px 1px 0, red 1px -1px 0;   }   </style>
  • < Назад

kell4.ru

Владыка света и тьмы

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

Однако несмотря на это, главный инструмент, который я буду использовать, это text-shadow.

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

Итак, text-shadow позволяет создать тень позади контента, а также описать ее характеристики: цвет, радиус размытия и сдвиг по отношению к тексту.


Свет и тьма

Синтаксис объявления перечисленных параметров выглядит следующим образом:

text-shadow: [горизонтальный сдвиг] [вертикальный сдвиг] [размытие] [цвет тени];

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

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

Хочу отметить еще одну маленькую деталь. Не злоупотребляйте количеством теней, ведь они могут влиять на производительность браузеров. К примеру, Opera более 9 параметров не поддерживает. А если вы еще зададите большой радиус размытия тени (более 100px), то она бедненькая вообще загнется.

10 интересных интерпретации внешнего вида контента при помощи text-shadow

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

Начнем с самого простого.


  1. В этом примере я показал, как выглядит обычное свечение контента.
  2. Далее в примерах я буду описывать только существенный для реализации программный код, поэтому вам придется дописывать doctype и обрамление в парный тег верхнего уровня – <html>. Несколько изменим задачу и создадим эффект неонового свечения.
  3. Еще один мой любимый эффект – это вдавленный текст.
  4. Вот теперь я создал объемный шрифт со свечением.
  5. Тисненный шрифт может стать визиткой новостных сайтов.
  6. Интересная интерпретация свечения в виде пылающих букв.
  7. Символы начинают подсвечиваться, если курсор оказывается в области объекта.
  8. В этом варианте буквы выглядят так, будто отбрасывают тень на какую-то поверхность.
  9. Здесь я реализовал более сложный механизм. Текст отражается зеркально. К тому же для затухающего отражения используется градиент.
  10. И последнее на сегодня творческое решение. Я создал анимацию, в которой изначально текст размыт, но поле наведения на него символы увеличиваются, становятся четкими и отсвечивают.

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

Пока-пока!

С уважением, Роман Чуешов

romanchueshov.ru

совесть
Наташа, здравствуйте.
Просмотрел весь ваш блог.
Но кода баннера так и не нашел. Пожалуста создайте, а то у меня начинают спрашивать, где я все это набрался, а виновница торжества как бы не причем. Нужно наверное исправить досадную оплошность 🙂
NMitra
Отличная тема для статьи! Надо будет обдумать тонкости.
совесть
Понятно. Значит будем ждать.

Наташа, у меня на блоге в шапке уже стоит картинка http://myrussiammm.blogspot.com/
Можно ли поверх нее поставить еще одну картинку ?
Спасибо.
dd>

NMitra
Посмотрите здесь. Не получиться — спрашивайте
совесть
Пытался сделать как написано, но ни чего вообще не отобразилось.
Хотел поставить скруджа (с прозрачным фоном) справа от названия блога. но ни чего не вышло.
http://myrussiammm.blogspot.com/
NMitra
Пойдём другим путём.

Добавьте дополнительный гаджет: http://shpargalkablog.ru/2011/01/dobavit-blok-v-zagalovok-blogger.html.

А вместо кода баннера — изо Скруджа.

совесть
вроде картинка появилась. только она *столкнула* название блога вниз.
А как скруджа переместить вправо и вернуть весь текст обратно ?
совесть
http://shpargalkablog.ru/2011/01/dobavit-blok-v-zagalovok-blogger.html.
гаджет не находится поисковиком.
dd>
совесть
Кое как воткнул картинку в шапку. Название вниз сьехало. Ну да ничего и так не плохо.
Спасибо Наташенька за помощь.
NMitra
Да, вижу, но не пойму в чём дело. Нужен код шаблона блога. Попробовала на тестовом блоге. Название не уползает вниз, а ложиться поверх картинки.
совесть
Да я просто код картинки вставил в очередь к баннерам. И поменял гаджеты местами — название с картинкой. вот название и ушло вниз.
Наташа, а куда вам можно отправить код шаблона блога ?
NMitra
На почту. См. "Контакты" из меню.
Анонимный
как изменить стиль главного заголовка в блоге? спасибо.
NMitra
.Header h1 {…..}
NMitra
Для страниц, кроме главной

.Header h1 a {…..}

Анонимный
Слоенный текст , понравился как его сделать .
p {color: #FE6602;
font-family: 'Aclonica',serif;
font-size: 7em;
margin: 20px auto;
text-shadow: 0 1px 0 #000000, 0 2px 0 #888888, 0 3px 0 #777777, 0 4px 0 #FFFFFF, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px #001135;
}
Вот это вставляю не чего нет . И еще бы Белый с черной тенью.
NMitra
Куда вставляете-то? Мне не понятно какой платформой вы пользуетесь, что ждёте от текста — будет ли это заголовок статьи или название блога. В целом посмотрите тут http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
Николай Коваль
Спасибо автору за статью!
На своем портале http://www.kovnik.com/ применил текстовый
объемный логотип по вашей технологии. Все нормально отображается в многих браузерах, кроме IE. А жаль…
(ОС Win8, IE 10).
NMitra
На сайте IE уже есть соответствующие инструкции http://msdn.microsoft.com/en-us/library/windows/apps/hh441185.aspx , предполагаю до реализации осталось не так много времени.
Артём Викторович
Здравствуйте, подскажите как сделать неоновую подсветку для названия и описания блога. Блог находится на Блогспот.
NMitra
Здравствуйте, добавьте CSS http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html

h1, h3 {text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;}

Анонимный
Очень хорошая статья! Спасибо! 🙂
Анонимный
Ну наконец то нашёл, всё нравится, отлично, на примере генератора разобрался во всём. Как говорил герой известного фильма: — Достаточно одной таблэтки )))))))! Спасибо большое за помощь!
NMitra
Угу, генератор здесь не повредит
Marina Voronova
Наталья я просто тащусь от вас! спасибо вам большое! ;))
NMitra
Я тоже )) Спасибо, что напомнили 🙂
Анонимный
По поводу зеркального отражение лучше использовать урок из http://htmlbook.ru/blog/matritsa-preobrazovanii
{
-moz-transform: matrix(1, 0, 0, -1, 0, 0);
-webkit-transform: matrix(1, 0, 0, -1, 0, 0);
-o-transform: matrix(1, 0, 0, -1, 0, 0);
-ms-transform: matrix(1, 0, 0, -1, 0, 0);
opacity: 0.3;
}
NMitra
Есть ещё более вкусный вариант background: -moz-element; https://developer.mozilla.org/en-US/docs/Web/CSS/element?redirectlocale=en-US&redirectslug=CSS%2Felement Но поддерживается только Мозилой.
Сергей
Здравствуйте NMitra!
Скажите пожалуйста,как сделать,что бы вместо цвета надписи (color: #FE6602),вставить картинку-фон, например картинку-фон кирпичной стены?
span style="color: #FE6602; font-family: 'Aclonica',serif;font-size: 5em; margin: 20px auto;text-shadow: 0 1px #000000, 0 2px #888888, 0 3px #777777, 0 4px #FFFFFF, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px #001135;" Слоёный
NMitra
Здравствуйте, Сергей!
Добавьте в стили
background: url(http://….jpg);
Подробнее http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html (переключайте вкладки, чтобы увидеть результат)
Сергей
да, но это получается надпись на желаемом фоне(картинке), а мне хотелось бы, что бы желаемым фоном(картинкой),залились сами буквы надписи, а не цветом,…то есть, вместо оранжевого цвета букв слова Слоёный, была картинка
<span style="color: #FE6602; font-family:'Aclonica',serif; font-size: 7em; margin: 20px auto; text-shadow: 0 1px #000000, 0 2px #888888, 0 3px #777777, 0 4px #FFFFFF, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px #001135;"> Слоёный </span>
возможно ли такое с кодом HTML ???
NMitra
Есть -webkit-background-clip: text; ( http://shpargalkablog.ru/2013/11/gradient-text.html ), есть SVG (см. http://codepen.io/yoksel/pen/fsdbu и http://tympanus.net/codrops/2015/02/16/create-animated-text-fills/ )
Сергей
Это не работает в HTML, даже не отображается в HTML редакторах….нужно для оформления дневника на LiRu , http://www.liveinternet.ru/users/sergg62/
NMitra
К сожалению, пока только так или логотип нарисуйте в Фотошопе
Ремонт Компьютеров
Херня какая то.Куда че вставлять?
NMitra
http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
http://shpargalkablog.ru/p/comments-blog.html (см. про админку)

shpargalkablog.ru

Использование text-shadow

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

Параметры text-shadow

Рис. 1. Параметры text-shadow

Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.

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

К сожалению, IE до версии 10.0 не поддерживает text-shadow, так что в этом браузере мы никаких красивостей не увидим.

Контурный текст

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

Контурный текст

Рис. 2. Контурный текст

Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.

Пример 1. Контурный текст

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Текст</title>  <style>  .stroke {  font: 2em Arial, sans-serif;  text-shadow: red 0 0 2px;  }  </style>  </head>  <body>  <p class="stroke">Контурный текст</p>  </body> </html>

Контур, сделанный этим методом, продемонстрирован на рис. 1. Контур получается слегка размытым, поэтому для тех, кто хочет получить чёткую линию, предназначен второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (пример 2).

Пример 2. Четыре тени для контура

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Текст</title>  <style>  .stroke {  font: 2em Arial, sans-serif;  text-shadow: red 1px 1px 0, red -1px -1px 0,   red -1px 1px 0, red 1px -1px 0;  }  </style>  </head>  <body>  <p class="stroke">Контурный текст</p>  </body> </html>

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

Контур с помощью четырёх теней

Рис. 3. Контур с помощью четырёх теней

Трёхмерный текст

Для добавления эффекта трёхмерного текста показанного на рис. 4 применяется одновременно несколько теней которые смещаются относительно друг друга на один пиксел по горизонтали и вертикали.

Трёхмерный текст

Рис. 4. Трёхмерный текст

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

Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В примере 3 используется пять теней одного цвета.

Пример 3. Тень для добавления трёхмерности

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Текст</title>  <style>  .stroke {  font: bold 3em Arial, sans-serif;  color: #0d3967;  text-shadow: #cad5e2 1px 1px 0, #cad5e2 2px 2px 0,   #cad5e2 3px 3px 0, #cad5e2 4px 4px 0,   #cad5e2 5px 5px 0;  }  </style>  </head>  <body>  <h1 class="stroke">Десятикамерный холодильник</h1>  </body> </html>

Для всех теней ставим нулевой радиус размытия и одинаковый цвет. Различаются тени только значениями смещения.

Тиснение текста

Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв словно освещена, другая же часть находится в тени (рис. 5).

Рельефный текст

Рис. 5. Рельефный текст

Для добавления подобного эффекта нам понадобится две тени — белую тень мы смещаем влево вверх на один пиксел, а тёмно-серую вправо вниз (пример 4).

Пример 4. Рельефный текст

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Текст</title>  <style>  body {  background: #f0f0f0; /* Цвет фона веб-страницы */  }  .stroke {  font: bold 3em Arial, sans-serif;  color: #f0f0f0; /* Цвет текста, совпадает с цветом фона */  text-shadow: #fff -1px -1px 0,   #333 1px 1px 0;  }  </style>  </head>  <body>  <h1 class="stroke">Рельефный текст</h1>  </body> </html>

Рельеф выигрышнее всего смотрится именно на сером фоне, поэтому эффект подойдёт не для каждой цветовой схемы сайта. Кстати, легко получить вдавленный, а не выдавленный текст, достаточно поменять местами цвета тени.

 text-shadow: #333 -1px -1px 0,   #fff 1px 1px 0;

Свечение

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

Свечение текста css

Рис. 6. Свечение текста

Пример 5. Свечение

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Текст</title>  <style>  .light {  text-shadow: #5dc8e5 0 0 10px; /* Свечение голубого цвета */  color: #0083bd;  }  .dark {  text-shadow: red 0 0 10px; /* Свечение красного цвета */  }  </style>  </head>  <body>  <h1 class="light">Светлая сторона</h1>  <h1 class="dark">Тёмная сторона</h1>  </body> </html>

Размытие

Тень сама по себе размывается, так что если оставить только тень, а сам текст скрыть, то мы получим размытые буквы (рис. 7), причём степень размытия легко регулировать через параметр text-shadow.

Текст с размытием

Рис. 7. Текст с размытием

Для сокрытия оригинального текста достаточно задать цвет как transparent (пример 6). Цвет тени после этого выступает цветом текста, а радиус размытия устанавливает степень нерезкости букв.

Пример 6. Размытие текста

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Текст</title>  <style>  .blur {  text-shadow: #000 0 0 5px;  color: transparent; /* Прозрачный цвет текста */  }  </style>  </head>  <body>  <h1 class="blur">Нерезкий текст</h1>  </body> </html>

Тень и псевдоклассы

Тень не обязательно добавлять непосредственно к тексту, свойство text-shadow прекрасно сочетается с псевдоклассами :hover и :first-letter. За счёт этого получаются интересные эффекты с текстом вроде контурной первой буквы абзаца или свечения ссылки при наведении на неё курсора мыши. В примере 7 показаны такие приёмы.

Пример 7. Использование псевдоклассов

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Текст</title>  <style>  a:hover { /* Вид ссылки при наведении на неё курсора */  text-shadow: #5dc8e5 0 0 5px;  color: #000;  }  p:first-letter { /* Первая буква абзаца */  font-size: 2em;  text-shadow: red 1px 1px 0, red -1px -1px 0,   red -1px 1px 0, red 1px -1px 0;  }  </style>  </head>  <body>  <p>Нишевый проект тормозит <a href="1.html">традиционный канал</a>, не считаясь с   затратами. Структура рынка, отбрасывая подробности, стабилизирует   департамент маркетинга и продаж, используя опыт предыдущих кампаний.   Построение бренда, безусловно, спонтанно отталкивает конвергентный   PR, отвоевывая рыночный сегмент. Инвестиция синхронизирует ролевой   социальный статус, повышая конкуренцию. Торговая марка естественно   обуславливает план размещения, используя опыт предыдущих кампаний.</p>  </body> </html>

htmlbook.ru

Здесь расскажу о текстовых эффектах, которые можно создать с помощью CSS, Javascript, онлайн сервисов.

Скачать исходники для статьи можно ниже

1. CSS эффекты с текстом.

1.1. Неоновое свечение текста.

Свечение текста css

Или такое:
Свечение текста css

Для того, чтобы создать данный эффект нам нужно в файл стилей style.css добавить следующий код (панель управления – пункт “Внешний вид” – подпункт “Редактор” – справа в списке шаблонов находим файл style.css):

  h8 {   text-shadow: 0 0 10px #fff,   0 0 20px #fff,   0 0 30px #fff,   0 0 40px #ff00de,   0 0 70px #ff00de,   0 0 80px #ff00de,   0 0 100px #ff00de,   0 0 150px #ff00de;  }  

Далее достаточно открыть редактор любой записи или странички и во вкладке HTML (не в визуальном редакторе) вставить нужный текст, обвернутый в тег h8:

  <h8>Mnogoblog</h8>  

 

1.2. 3D текст

 
Свечение текста css

Или такой:
Свечение текста css

Пример кода вышеуказанного эффекта:
Для того, чтобы создать данный эффект нам нужно в файл стилей style.css добавить следующий код (панель управления – пункт “Внешний вид” – подпункт “Редактор” – справа в списке шаблонов находим файл style.css):

  h7 {   font-size: 60px;   color: #909090;   text-shadow: 0 1px 0 #bbb,   0 2px 0 #bbb,   0 3px 0 #aaa,   0 4px 0 #aaa,   0 5px 0 #999,   0 6px 1px #000,   0 0px 3px #000,   0 1px 3px #000,   0 3px 5px #000,  	 0 5px 10px #000,  	 0 5px 20px #000;  }  

Далее достаточно открыть редактор любой записи или странички и во вкладке HTML (не в визуальном редакторе) вставить нужный текст, обвернутый в тег h7:

  <h7>Привет это 3D текст</h7>  

 
О других текстовых эффектах, которые можно создать с помощью CSS можете прочитать по следующим ссылкам:
http://ruseller.com/lessons.php?rub_id=2&id=810
http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects

2. Использование javascript для создания эффектов.

Прыгающий волной текст.
Свечение текста css

Демо-пример можете посмотреть тут:
http://www.yaldex.com/FSTextEffects/PushingText.htm
Здесь же расположен его код:

  <script language="JavaScript" type="Text/JavaScript">  //Made by 1st JavaScript Editor  //http://www.yaldex.com  //Come and get more (free) products    fifteenth="Your Text Here";sixteenth=1;var nineteenth=document.getElementById && document.all;seventeenth=new Array();seventeenth[0]=-1;seventeenth[1]=-3;seventeenth[2]=-6;seventeenth[3]=-10;seventeenth[4]=-8;seventeenth[5]=-3;seventeenth[6]=-2;eighteenth=0;twentieth=0;first2="";  function second2(){  if (nineteenth && !sixteenth){third2.innerHTML=fifteenth;return;}  if(fifteenth.length > 6){  for(fourth2=0; fourth2 != fifteenth.length;fourth2++){first2=first2+"<span style='position:relative;' id='n"+fourth2+"'>"+fifteenth.charAt(fourth2)+"</span>"};third2.innerHTML=first2;first2="";fifth2();}  else{alert("Too short message!");}}  function fifth2(){sixth2=(document.getElementById)? document.getElementById("n0") : document.all.n0;sixth2.style.left=-twentieth;  if(twentieth != 9){twentieth=twentieth+3;setTimeout("fifth2()",30);}  else{fifteenth3();}}  function fifteenth3(){sixth2.style.left=-twentieth;  if(twentieth != 0){twentieth=twentieth-3;setTimeout("fifteenth3()",30)}  else{seventeenth3();}}  function seventeenth3(){first2="";  for(fourth2=0;fourth2 != fifteenth.length;fourth2++){  if(fourth2+eighteenth > -1 && fourth2+eighteenth < 7){first2=first2+"<span style='position:relative;top:"+seventeenth[fourth2+eighteenth]+"'>"+fifteenth.charAt(fourth2)+"</span>";}  else{first2=first2+"<span>"+fifteenth.charAt(fourth2)+"</span>";}}third2.innerHTML=first2;first2="";  if(eighteenth != (-fifteenth.length)){eighteenth--;setTimeout("seventeenth3()",30);}  else{eighteenth=0;setTimeout("second2()",30);}}  </script>  <h1><div align="center" id="eighteenth3" style="color:red"></div></h1>  <script language="javascript" type="text/javascript">  if (document.all||document.getElementById){third2=(document.getElementById)? document.getElementById("eighteenth3") : document.all.eighteenth3;second2();}else document.write(fifteenth);  </script>  

О том как вставить Javascript на свой сайт можете прочитать в моей предыдущей статье:
https://mnogoblog.ru/kak-podklyuchit-javascript-v-wordpress

Данный скрипт я попробовал вставить в индивидуальный шаблон страницы на своем тестовом сайте – получилось, можете посмотреть: http://mnogoblog2.16mb.com/java/

Другие интересные javascript эффекты можно найти на следующих сайтах:
http://www.yaldex.com/FSTextEffects.htm
http://catalogsv-3dn.narod.ru/tecst.html

3. Онлайн сервисы

http://csswarp.eleqtriq.com/ – онлайн ресурс, позволяющий расположить текст по кривой линии, по кругу, по спирали,..

Свечение текста css

Где можно применить данный текст, ну например, в шапке.

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

Расположение текста выстраивается аналогично программе Adobe Illustrator.

С лева представлено четыре блока:

– TEXT – здесь вводите текст, который будете располагать по кривой, можно писать по-русски и нажимаете на кнопку “warp it”.

– CURVE – здесь задаете расположение текст по кривой, по кругу, либо добавляете еще точек и превращаете кривую в нужную вам фигуру.

– TYPE – здесь задаете расстояние между буквами, их расположение внутри или снаружи кривой, размер шрифта, отдаленность шрифта от кривой.

– POINT – здесь можно удалять точки и изменять их углы.

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

Свечение текста css

После того, как вы нарисовали нужную вам фигуру или кривую жмите на кнопку “GENERATE HTML” (расположена вверху над правым блоком).

Свечение текста css

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

Теперь разберемся с кодом, здесь нам понадобится только часть кода, а именно:

То что заключено между тегами <style type=’text/css’> и до </style> мы должны будем вставить в файл стилей style.css. То есть входим в панель управления вашим сайтом, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов находим файл style.css, спускаемся в конец его кода и вставляем код, который находится между вышеуказанными тегами, например у меня он выглядел так:

 

   #warped {position: relative; display: block; width:313px; height:168px;}     #warped>span[class^=w]:nth-of-type(n+0){display:block; position:absolute;   -moz-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -o-transform-origin:50%   100%; -ms-transform-origin:50% 100%; transform-origin:50% 100%; }     #warped span{font-family:'ABeeZee';font-size:38px;font-weight:regular;font-style:normal;   line-height:1; white-space:pre; overflow:visible; padding:0px;}     #warped .w0 {-moz-transform: rotate(4.74rad);-webkit-transform: rotate(4.74rad);-o-transform:   rotate(4.74rad);-ms-transform: rotate(4.74rad); transform: rotate(4.74rad);   width: 32px; height: 38px; left: 35.04px; top: 104.97px;}     #warped .w1 {-moz-transform: rotate(5.08rad);-webkit-transform: rotate(5.08rad);-o-transform:   rotate(5.08rad);-ms-transform: rotate(5.08rad); transform: rotate(5.08rad);   width: 23px; height: 38px; left: 46.45px; top: 71.35px;}     #warped .w2 {-moz-transform: rotate(5.38rad);-webkit-transform: rotate(5.38rad);-o-transform:   rotate(5.38rad);-ms-transform: rotate(5.38rad); transform: rotate(5.38rad);   width: 23px; height: 38px; left: 61.44px; top: 45.49px;}     #warped .w3 {-moz-transform: rotate(5.68rad);-webkit-transform: rotate(5.68rad);-o-transform:   rotate(5.68rad);-ms-transform: rotate(5.68rad); transform: rotate(5.68rad);   width: 22px; height: 38px; left: 83.48px; top: 25.49px;}     #warped .w4 {-moz-transform: rotate(5.97rad);-webkit-transform: rotate(5.97rad);-o-transform:   rotate(5.97rad);-ms-transform: rotate(5.97rad); transform: rotate(5.97rad);   width: 23px; height: 38px; left: 109.41px; top: 12.63px;}     #warped .w5 {-moz-transform: rotate(6.27rad);-webkit-transform: rotate(6.27rad);-o-transform:   rotate(6.27rad);-ms-transform: rotate(6.27rad); transform: rotate(6.27rad);   width: 23px; height: 38px; left: 138.94px; top: 8px;}     #warped .w6 {-moz-transform: rotate(6.52rad);-webkit-transform: rotate(6.52rad);-o-transform:   rotate(6.52rad);-ms-transform: rotate(6.52rad); transform: rotate(6.52rad);   width: 13px; height: 38px; left: 168.69px; top: 10.97px;}     #warped .w7 {-moz-transform: rotate(6.77rad);-webkit-transform: rotate(6.77rad);-o-transform:   rotate(6.77rad);-ms-transform: rotate(6.77rad); transform: rotate(6.77rad);   width: 23px; height: 38px; left: 186.95px; top: 19.97px;}     #warped .w8 {-moz-transform: rotate(7.07rad);-webkit-transform: rotate(7.07rad);-o-transform:   rotate(7.07rad);-ms-transform: rotate(7.07rad); transform: rotate(7.07rad);   width: 22px; height: 38px; left: 210.99px; top: 37.57px;}     #warped .w9 {-moz-transform: rotate(7.3rad);-webkit-transform: rotate(7.3rad);-o-transform:   rotate(7.3rad);-ms-transform: rotate(7.3rad); transform: rotate(7.3rad);   width: 11px; height: 38px; left: 230.94px; top: 56.03px;}     #warped .w10 {-moz-transform: rotate(7.5rad);-webkit-transform: rotate(7.5rad);-o-transform:   rotate(7.5rad);-ms-transform: rotate(7.5rad); transform: rotate(7.5rad);   width: 15px; height: 38px; left: 237.56px; top: 74.04px;}     #warped .w11 {-moz-transform: rotate(7.76rad);-webkit-transform: rotate(7.76rad);-o-transform:   rotate(7.76rad);-ms-transform: rotate(7.76rad); transform: rotate(7.76rad);   width: 23px; height: 38px; left: 239.12px; top: 99.37px;}  

 
Далее нам нужно вставить на наш сайт еще один кусок, предлагаемого нам кода, а именно тот, который заключен между тегами <body> и </body>, например у меня он выглядел так:

   <div id='warped'>   <span class='w0'>M</span><span class='w1'>n</span><span class='w2'>o</span><span class='w3'>g</span><span class='w4'>o</span><span class='w5'>b</span><span class='w6'>l</span><span class='w7'>o</span><span class='w8'>g</span><span class='w9'>.</span><span class='w10'>r</span><span class='w11'>u</span>   </div>  

 
Его нужно вставить там, где вам нужно расположить ваш текст.
Например можно вставить его в саму запись, но только в HTML вкладке редактора записи или же в виджет (выбирите виджет с названием “Текст”, перенесите его в сайдбар и вставьте внутри вышеуказанный код), или же непосредственно в код нужного вам шаблона, например для вставки в шапку вам необходимо вставить его в файл header.php (где-то после тега body).
 

mnogoblog.ru

p {text-shadow:2px 2px 4px rgba(0,0,0,1); 
<p>Обычная черная тень</p>

 Комбинированный набор теней

p {text-shadow:2px 2px 4px rgba(0,0,0,1), -5px 0 3px rgba(0,255,0,1), 0 -5px 3px rgba(0,0,255,1); 
<p>Комбинированный набор теней</p>

 Эффект свечения текста CSS

p {text-shadow:0 0 10px rgba(255,255,0,0.3), 0 0 6px rgba(255,255,0,0.4), 0 0 10px rgba(255,255,0,0.3); 
<p>Эффект свечения текста CSS</p>

Для создания равномерного эффекта свечения используйте следующие правила: не задавайте сдвигов, задавайте значения размытия в диапазоне от 8-30px, используйте не полностью непрозрачные цвета.

Свойство box-shadow (тень блока через CSS)

Аналогично свойству text-shadow, за исключением того, что задается для тень для всего блока, а не просто текста. Еще одно отличие — возможность задавать внутреннюю тень блокам.

В качестве значения свойство box-shadow принимает составное свойство:

box-shadow:<тип тени> <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>;

  • <тип тени> — позволяет задавать внутреннюю тень, не обязательное значение. При задании inset, делает тень внутри блока
  • <сдвиг по x> — сдвигает тень по оси X, задается чаще всего в px. При задании положительного расстояния сдвиг идет вправо, отрицательное — влево
  • <сдвиг по y> — сдвигает тень по оси Y, задается чаще всего в px. При задании положительного расстояния сдвиг идет вниз, отрицательное — вверх
  • <радиус размытия> — отвечает за степень размытия тени, задается чаще всего в px
  • <растяжение>— отвечает за степень растяжения тени, задается чаще всего в px, при положительном значение растягивает тень, при отрицательном сжимает её
  • <цвет> — соответственно выбирает цвет тени, задается в любом из возможного формата цвета в CSS

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

Различные примеры использования box-shadow

Блок с обычной тенью
div { 	height:100px; 	background:#33FF66; 	width:250px; 	box-shadow: 0 0 8px 0 rgba(0,0,0,1); } 

www.web.cofp.ru

Как сделать тень для текста

  • Содержание:
  • 1. Синтаксис свойства text-shadow
  • 2. Примеры тени для текста
  • 3. Эффекты для тени при наведении
  • 4. Анимация тени

Поддержка браузерами

IE: 10.0
Edge: 12.0
Firefox: 3.5
Chrome: 4.0
Safari: 4.0
Opera: 10.1
iOS Safari: 3.2
Android Browser: 2.1
Chrome for Android: 55.0

1. Синтаксис свойства text-shadow

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

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

Первая длина задаёт смещение по оси Х, вторая — смещение по оси Y. Если значения длин отрицательные, то тень смещается влево и вверх от текста.

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

text-shadow-syntax
Рис. 1. Синтаксис свойства text-shadow
text-shadow
Значения:
x-offset Обязательное значение. Смещение тени по горизонтали относительно текста. Может принимать как положительные, так и отрицательные значения.
y-offset Обязательное значение. Смещение тени по вертикали относительно текста. Может принимать как положительные, так и отрицательные значения.
blur Необязательное значение. Определяет радиус размытия тени. Чем больше радиус, тем сильнее размыта тень.
цвет Необязательное значение. По умолчанию принимает цвет текста. Для установления значения можно использовать следующие форматы записи цвета: #RRGGBB, rgb(red, green, blue), rgba(red, green, blue, alpha).
none Значение по умолчанию, означает отсутствие тени текста. Убирает тень элемента из группы элементов с заданным свойством.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

2. Примеры тени для текста

2.1. Плакатная тень

Тень текста

.text-shadow-1 {   background: #77F7DE;   color: white;   text-shadow: -2px -2px 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px 2px 0 #4D4644, 4px 4px 0 white, 5px 5px 0 white, 6px 6px 0 white;   letter-spacing: 0.1em;  }

2.2. 3D тень

Тень текста

.text-shadow-2 {   background: linear-gradient(-45deg, #FEE864, #F5965E);   color: #f4f4f4;   text-shadow: -1px -1px white, 1px 1px gray, 2px 2px #7a7a7a, 3px 3px #757575, 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757, 10px 10px #525252, 11px 11px #4d4d4d, 18px 18px 30px rgba(0, 0, 0, .4), 18px 18px 10px rgba(0, 0, 0, .4);  }

2.3. Тень-текст

Тень текста

.text-shadow-3 {   background: #FFE6DB;   color: #FFE6DB;   letter-spacing: .1em;   text-shadow: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142, .4), 9px 0 rgba(250, 111, 142, .3), 12px 0 rgba(250, 111, 142, .2), 15px 0 rgba(250, 111, 142, .1);  }

2.4. Ретро-тень

Тень текста

.text-shadow-4 {   color: #FB631E;   letter-spacing: .1em;   text-shadow: 4px 4px white, 6px 6px #D7CC88;  }

2.5. Многослойная тень

Тень текста

.text-shadow-5 {   background: #f1f1f1;   color: #fcc105;   letter-spacing: .1em;   text-shadow: 4px 4px #ff981d, 7px 7px rgba(200, 120, 22, .2);  }

2.6. Прозрачная тень

Тень текста

.text-shadow-6 {   color: transparent;   text-shadow: 4px -4px rgba(157, 217, 227, .7), -2px -2px rgba(159, 141, 105, .7), 0 2px rgba(254, 216, 21, .7);  }

2.7. Тень-зебра

Тень текста

.text-shadow-7 {   background: #E02A91;   color: white;   text-shadow: 2px 2px black, 4px 4px white, 6px 6px black, 8px 8px white, 10px 10px black, 12px 12px white, 14px 14px black, 16px 16px white, 18px 18px black, 20px 20px white, 22px 22px black, 24px 24px white, 26px 26px black;  }

2.8. Неоновая тень

Тень текста

.text-shadow-8 {   background: black;   color: white;   text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px crimson, 0 0 35px crimson, 0 0 40px crimson, 0 0 50px crimson, 0 0 75px crimson;  }

2.9. Тень-обводка

Тень текста

.text-shadow-9 {   color: white;   text-shadow: 1px 1px #732372, 1px -1px #732372, -1px 1px #732372, -1px -1px #732372, 3px 3px 6px rgba(0,0,0,.5);  }

2.10. Стиль LETTERPRESS

Тень текста

.text-shadow-10 {   background: #F9C941;   color: #F9C941;    letter-spacing: 2px;   text-shadow: 1px 1px #F3E7CF, -1px -1px #56433D;  }

2.11. Стиль ТВИТТЕР

Тень текста

.text-shadow-11 {   color: #3CF;    text-shadow: -1px 0 1px white, 0 -1px 1px white, 0 1px 1px white, 1px 0 1px white, 0 0 8px white, 0 0 8px white, 0 0 8px white, 2px 2px 3px black;  }

2.12. Тень с обводкой

Тень текста

.text-shadow-12 {   color:#E34C38;   text-shadow: 1px 1px white, 2px 2px white, -1px -1px white, -2px -2px white, -1px 1px white, 1px -1px white, -2px 2px white, 2px -2px white, -3px -3px 4px rgba(0,0,0,.3), -3px 3px 4px rgba(0,0,0,.3), 3px 3px 4px rgba(0,0,0,.3), 3px -3px 4px rgba(0,0,0,.3);   }

3. Эффекты для тени при наведении

See the Pen ENjrvy by Elena (@html5book) on CodePen.

See the Pen yVYOdY by Elena (@html5book) on CodePen.

html5book.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector