Css свечение: Как создать эффект свечения с CSS3

Содержание

Кроссбраузерные отражения, свечения и размытия CSS.

От автора: отражения способны добавить объектам интересную размерность, ссужая их оттенком реализма и наделяя внутри окружающей среды некоторым контекстом. Давайте рассмотрим достижение эффекта отражения с помощью CSS, а также для сравнения исследуем свечение и кроссбраузерное размытие..

Предпосылки

Изучение данного материала предполагает, что:

— Вы знаете HTML;

— Вы знакомы с селекторами CSS и CSS2;

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

— Если хотите в точности воспроизвести образец, то должны знать, как работает тень блока box-shadow. Она в этом учебнике не является ключевой, так что вам придется постигать ее самим. Если понадобится объяснение, предлагаю вам взглянуть на статью CSS3 vs. Photoshop : закругленные углы и тени блока.

Box-reflect vs. «Свой метод»

Box-reflect — свойство CSS, как раз предназначенное для этой цели: создания отражений. Мы не станем применять box-reflect и mask-image, потому что:

— На момент написания этой статьи оба свойства поддерживаются только webkit (Chrome и Safari).

— Реализация кишит ошибками, если не сказать более.

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

Сейчас, в век Chrome 17, webkit сделал ту же ошибку. Рисунки маски, ключ к -webkit-box-reflect, делают некий вид динамического снэпшота внутри граничного блока, вставляют его снизу и меняют непрозрачность. Я постарался восстановить демо-образец с помощью -webkit-box-reflect:

Я его не закончил, но проблема ясна. У отображаемого элемента (будем называть его ETBR — Element to be Reflected) есть border-radius и box-shadow. Тень блока видна внутри, а не снаружи граничного блока.

В моем собственном методе матрица видоизменяется, вставленная тень блока и непрозрачность заменят box-reflect и mask-image. Ограничения:

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

— Встроенная тень блока не влияет на текст отображаемого элемента (ETBR). Это происходит, если цвет текста не такой же, как фоновый цвет поверхности.

Поиграть с образцом | Полноэкранное изображение

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

Выбор…

Кстати говоря, о матрицах и отражениях…

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

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

Дополнительно: подготовка

Демо-образец начинается с шаблона HTML5…

index.html

<!DOCTYPE html>

<html>

<head>

<title>CSS3 Reflections</title>

</head>

<body>

</body>

</html>

…и этого файла CSS.

style.css

html { height: 100%; } body { text-align: center; line-height: 1; margin: 0; padding: 0; height: 100%; } p { line-height: 1.2; }

html {

height: 100%;

}

body {

text-align: center;

line-height: 1;

margin: 0;

padding: 0;

height: 100%;

}

p {

line-height: 1.2;

}

И, конечно, в таблицу стилей добавим ссылку:

<head> <meta charset=»utf-8″ /> <meta http-equiv=»X-UA-Compatible» content=»IE=edge,chrome=1″ /> <title>CSS reflections!</title> <meta name=»description» content=»» /> <meta name=»author» content=»Bob» /> <meta name=»viewport» content=»width=device-width; initial-scale=1.0″ /> <link rel=»stylesheet» href=»style.css» /> <link rel=»shortcut icon» href=»/favicon.ico» /> <link rel=»apple-touch-icon» href=»/apple-touch-icon.png» /> </head>

<head>

<title>CSS reflections!</title>

</head>

2D, но 3D

Демо-образец двухмерный. Ни единого 3D-элемента. Мы об этом знаем, но наша цель – заставить их считать, что мы это создали, а затем сфотографировали фронтальный вид.

Если мы хотим заставить их поверить, что это 3D, то должны определить, как объекты располагаются и вращаются в трехмерном пространстве. У демо-образца есть горизонт. Верхние 10% — это черное «небо», прочие 90% — фальшивая трехмерная плоскость. Отображаемый элемент и плоскость перпендикулярны друг другу (под углом 90°), отражение должно быть параллельно отображаемому элементу.

Шаг 1: дополнительный Плоскость и отображаемый элемент

HTML:

<body> <div> <header><span>reflection</span></header> </div> </body>

<body>

<div>

<header><span>reflection</span></header>

</div>

</body>

Отражаемый элемент (ETBR) – потомок плоскости. Таким образом, он остается в одном и том же положении видимым с плоскости, а свечение остается на плоскости.

body { text-align: center; line-height: 1; margin: 0; padding: 0; background-color: #000; height: 100%; } p { line-height: 1.2; } #plane { left: 0; top: 10%; width: 100%; bottom: 0; min-width: 1080px; min-height: 600px; position: absolute; overflow: hidden; overflow-x: visible; }

body {

text-align: center;

line-height: 1;

margin: 0;

padding: 0;

background-color: #000;

height: 100%;

}

p {

line-height: 1.2;

}

#plane {

left: 0;

top: 10%;

width: 100%;

bottom: 0;

min-width: 1080px;

min-height: 600px;

position: absolute;

overflow: hidden;

overflow-x: visible;

}

Примечание:

— У плоскости есть минимальная ширина min-width и минимальная высота min-height, поэтому отражаемый элемент всегда виден.

— Переполнение overflow-y установлено на hidden, поэтому свечение отражаемого элемента остается на плоскости. (Небо должно быть непроглядно черным.)

— У плоскости нет фонового цвета, она получает свою окраску от свечения, что совершенно бессмысленно, но смотрится лучше всего.

Шаг 2: разметка отражения

Определите место отражаемого объекта (ETBR), скопируйте его, вставьте внутрь самого себя и переименуйте в refl:

<span>reflection<span>reflection</span></span>

Теперь внутри css создайте селектор объекта. Добавьте к селектору #refl, чтобы наши стили применялись к обоим элементам:

По существу, CSS и HTML отражения должны быть такими же, как CSS и HTML отражаемого элемента ETBR. Мы разместим, зеркалируем и приукрасим отражение, начиная с шага 5. А сейчас мы скроем отражение.

#ETBR, #refl { } #refl { display: none; }

#ETBR, #refl {

}

#refl {

display: none;

}

Internet Explorer – это всегда Internet Explorer, так что нам придется добавить немного условного HTML:

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″ /> <meta http-equiv=»X-UA-Compatible» content=»IE=edge,chrome=1″ /> <title>CSS3 Reflections</title> <meta name=»description» content=»Reflection…» /> <meta name=»author» content=»Bob de Ruiter» /> <meta name=»viewport» content=»width=device-width; initial-scale=1.0″ /> <link rel=»stylesheet» href=»style.css» /> <link rel=»shortcut icon» href=»/favicon.ico» /> <link rel=»apple-touch-icon» href=»/apple-touch-icon.png» /> </head> <!—[if lt IE 9 ]> <body> <![endif]—> <!—[if IE 9 ]> <body> <![endif]—> <!—[if (gt IE 9)|!(IE)]><!—> <body> <!—<![endif]—> <div> <header><span>reflection<span>reflection</span></span></header> </div> </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 Reflections</title>

</head>

<!—[if lt IE 9 ]> <body> <![endif]—>

<!—[if IE 9 ]> <body> <![endif]—>

<!—[if (gt IE 9)|!(IE)]><!—> <body> <!—<![endif]—>

<div>

<header><span>reflection<span>reflection</span></span></header>

</div>

</body>

</html>

Вы можете спросить «почему?», просто немного потерпите. Так как вы нетерпеливы, первый раздел Поиграть с образцом будет совершенно черным. Хотите увидеть влияние плоскости? Измените размер.

Поиграть с образцом | Полноэкранное изображение

Шаг 3: дополнительный Основные стили

Здесь объяснения не нужны:

#ETBR, #refl {

color: #004;

font-family: Impact, ‘Arial Black’, Helvetica, Arial, sans-serif;

text-transform: uppercase;

font-size: 200px;

background-color: #FFE;

font-weight: bold;

padding: 30px;

display: inline-block;

}

#refl {

display: none;

}

Ну хорошо, немного объясню. Сочетание text-align: center; и display: inline-block; располагает элемент по центру, но это – не поиски Святого Грааля; встраиваемые элементы не могут содержать элементы блоков. Я применил это, потому что не хотел добавлять к образцу тысячи «плавающих» контейнеров. Хотя в общем, это – то, что нужно.

Поиграть с образцом | Полноэкранное изображение

Шаг 4: дополнительный Закругленные углы и свечение

Свечение состоит из трех теней: большой растянутой тени (которая выглядит больше похожей на отражение света на поверхности), настоящего свечения (белой тени с более коротким диапазоном размытия) и черной вставленной тени (которая дает возможность отражаемому элементу ETBR выглядеть, как будто он светится). Как я уже говорил, я не собираюсь объяснять, как работает тень блока box-shadow, а уж радиус угла border-radius сейчас уже говорит сам за себя.

#ETBR, #refl { color: #004; font-family: Impact, ‘Arial Black’, Helvetica, Arial, sans-serif; text-transform: uppercase; font-size: 200px; background-color: #FFE; font-weight: bold; padding: 30px; display: inline-block; box-shadow: rgba(255,255,240,.2) 0 0 200px 100px, rgba(255,255,240,.3) 0 0 40px, inset rgba(0,0,0,.8) 0 0 20px; border-radius: 30px; }

#ETBR, #refl {

color: #004;

font-family: Impact, ‘Arial Black’, Helvetica, Arial, sans-serif;

text-transform: uppercase;

font-size: 200px;

background-color: #FFE;

font-weight: bold;

padding: 30px;

display: inline-block;

box-shadow: rgba(255,255,240,.2) 0 0 200px 100px, rgba(255,255,240,.3) 0 0 40px, inset rgba(0,0,0,.8) 0 0 20px;

border-radius: 30px;

}

Поиграть с образцом | Полноэкранное изображение

Шаг 5: размещаем отражение

Отобразите селектор #refl, чтобы отражение стало видимым. Так как отражения «ненастоящие», наше отражение не станет частью тракта обработки документов; оно должно «плавать». Очевидный выбор – установить абсолютное позиционирование, это значит, элемент размещается относительно своего родительского элемента. Так как у родительского элемента отражения не существует, он будет расположен относительно тэга body.

Гораздо легче установить отражение относительно реального текста, который тоже является родителем отражения (совпадение?). Чтобы сделать это, сначала нужно «установить» ETBR:

#ETBR, #refl {

color: #004;

font-family: Impact, ‘Arial Black’, Helvetica, Arial, sans-serif;

text-transform: uppercase;

font-size: 200px;

background-color: #FFE;

font-weight: bold;

padding: 30px;

display: inline-block;

box-shadow: rgba(255,255,240,.2) 0 0 200px 100px, rgba(255,255,240,.3) 0 0 40px, inset rgba(0,0,0,.8) 0 0 20px;

border-radius: 30px;

position: relative;

Неоновое свечение CSS3

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

6 CSS3 эффекта неонового свечения: красный, голубой, желтый, зеленый, оранжевый и фиолетовый. Эффект применяется к тексту и свечение происходит при наведении. Свечение анимированное, создает эффект затухания и вспыхивания.

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

В основе эффекта лежат атрибуты:


 -webkit-animation:

 -moz-animation:

 animation:

К каждому примеры применен определенный шрифт (Monoton, Iceland, Pacifico, PressStart, Audiowide и Vampiro One в той последовательности как они показаны на скрине). Скорее всего эти шрифты не поддерживают кириллицу, поэтому советую сразу подумать о своем шрифте.

Чтобы подключить эффекты, нужно

1. Скачать архив

2. Разархивировать его

3. Закачать на сервер файл neon.css

4. Придумать свои стили

И вместо нумерации псевдоклассом nth-child (nth-child1, nth-child2 и т.д.) можно поставить class red, blue и так далее

5. Присвоить class стилизуемому элементу

например:


<h2>Добро пожаловать</h2>

где атрибут text-effect имеет css:


.text-effect {
  color: #fff;
  font-family: Monoton;
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -moz-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate;
}

.text-effect:hover {
  color: #FF1177;
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
}

Это пример самого первого эффекта (RED)

Вам нужно просто повнимательнее изучить css файл и все станет понятно. Спасибо за внимания, надеюсь помог. Пока

Помогла статья? Угости чашечкой кофе =)

Как добавить эффект свечения (тень) для SVG при наведении

Простой пример, как добавить эффект свечения для svg-элемента с помощью добавления тени.

Итак, у нас есть такой svg-файл с градиентом:

Первым делом, кидаем файл в SVGOMG для того, чтобы оптимизировать и убрать все лишнее из кода svg. По итогу получим такой вычищенный код svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 222.4 109">
<linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="54.5" x2="222.392" y2="54.5">
  <stop offset="0" stop-color="#40b99d"/>
  <stop offset="1" stop-color="#2ed8de"/>
</linearGradient>
<path d="M208.2 105c.6-.1 1.1-.6 1.1-1.2V51.3c0-.7-.5-1.2-1.2-1.2h-64.4V3.6c0-2-1.6-3.6-3.6-3.6h36.4c-2 0-3.6 1.6-3.6 3.6v70.6c0 2 1.6 3.6 3.6 3.6h54.7v.5c0 9.5-22.1 8.3-23 8.5H58c-.1 0-.1.1-.1.2v1c0 .1 0 .1.1.2h50.4c.1 0 .1-.1.1-.2v-1c0-.1 0-.1-.1-.2h-.1c-.9-.2-23 .7-23-8.5v-.5h224v26.1c0 .6.5 1.1 1.1 1.2h211v1.9s1.7 2.1 6.7 2.1h315.8c5 0 6.7-2.1 6.7-2.1v-2h-14.3zM83.3.8c.6 0 1 .5 1 1 0 .6-.5 1-1 1-.6 0-1-.5-1-1 0-.6.5-1 1-1zM124 51.3v8.6h40.9v-9h224v.4zm-95.1-2.4v13h224v1.9h36.5V3.6h213.6v46.5h-1.8v-1.2h38.9zm177 52.3h-78.5V53.1h78.5v48.1zm-58.5-34.7h-18v22.3h28V66.5zm-2 20.3h-14V68.5h24v18.3zM1.7 102.6h5.5V75.9h2.7v26.7zm2-24.7h.5v22.7h-.5V77.9zM7 82.7h20v-6.8H7v6.8zm2-4.8h6v2.8H9v-2.8zm-2 24.7h5V97H7v5.6zM9 99h2v1.7H9V99zm-2-2.9h5V83.5H7v12.6zm2-10.6h2v8.6H9v-8.6zm3.7 17.1h27V83.5h-4.3v19.1zm2-17.1h.3v15.1h-.3V85.5zm166.9 4.3h-52.2v9.7h52.2v-9.7zm-2 7.7h-48.2v-5.7h58.2v5.7zM28.9 47.1h40.6V5.5h38.9v41.6zm2-39.6h36.6v37.6h40.9V7.5zm31 39.6h41.2V35.7H61.9v11.4zm2-9.4h37.2v7.4H63.9v-7.4zm31.5 9.4h24.7V35.7H95.4v11.4zm2-9.4h20.7v7.4H97.4v-7.4zm41-18.6h-25.8v28h35.8v-28zm-2 26h-21.8v-24h31.8v24zm12 43.7h43.2v-12h-33.2v12zm2-10h39.2v8h-29.2v-8zm-2-3h43.2v-9.3h-33.2v9.3zm2-7.3h39.2v5.3h-29.2v-5.3zM16 69.3h3.7c-1.5 0-2.7 1.2-2.7 2.8v34.2c0 1.5 1.2 2.7 2.7 2.7h26c1.5 0 2.7-1.2 2.7-2.7V72.1c0-1.5-1.2-2.8-2.7-2.8zm1.6 34.2c0 .1-.1.2-.2.2h2.3c-.1 0-.2-.1-.2-.2V75c0-.1.1-.2.2-.2h26.2c.1 0 .2.1.2.2v28.5zm92.5-84.4H61.9v14.8h58.2V19.1zm-2 12.8H63.9V21.1h54.2v10.8zm95.8 23h-74.5v10.6h74.5V54.9zm-2 8.6h-70.5v-6.6h70.5v6.6zm-63.5-58H61.9v11.8h76.5V5.5zm-2 9.8H63.9V7.5h72.5v7.8zm46.2 84.2h31.3v-33h-21.3v33zm2-31h27.3v29h-17.3v-29z" fill="url(#a)"/></svg>

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

На выходе получился такой код, который я буду использовать в HTML:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -15 252.4 139">

  <defs>
    <filter>
      <feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="#00c6a0" />
    </filter>

    <linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="54.5" x2="222.392" y2="54.5">
      <stop offset="0" stop-color="#40b99d" />
      <stop offset="1" stop-color="#2ed8de" />
    </linearGradient>
  </defs>

  <path d="M208.2 105c.6-.1 1.1-.6 1.1-1.2V51.3c0-.7-.5-1.2-1.2-1.2h-64.4V3.6c0-2-1.6-3.6-3.6-3.6h36.4c-2 0-3.6 1.6-3.6 3.6v70.6c0 2 1.6 3.6 3.6 3.6h54.7v.5c0 9.5-22.1 8.3-23 8.5H58c-.1 0-.1.1-.1.2v1c0 .1 0 .1.1.2h50.4c.1 0 .1-.1.1-.2v-1c0-.1 0-.1-.1-.2h-.1c-.9-.2-23 .7-23-8.5v-.5h224v26.1c0 .6.5 1.1 1.1 1.2h211v1.9s1.7 2.1 6.7 2.1h315.8c5 0 6.7-2.1 6.7-2.1v-2h-14.3zM83.3.8c.6 0 1 .5 1 1 0 .6-.5 1-1 1-.6 0-1-.5-1-1 0-.6.5-1 1-1zM124 51.3v8.6h40.9v-9h224v.4zm-95.1-2.4v13h224v1.9h36.5V3.6h213.6v46.5h-1.8v-1.2h38.9zm177 52.3h-78.5V53.1h78.5v48.1zm-58.5-34.7h-18v22.3h28V66.5zm-2 20.3h-14V68.5h24v18.3zM1.7 102.6h5.5V75.9h2.7v26.7zm2-24.7h.5v22.7h-.5V77.9zM7 82.7h20v-6.8H7v6.8zm2-4.8h6v2.8H9v-2.8zm-2 24.7h5V97H7v5.6zM9 99h2v1.7H9V99zm-2-2.9h5V83.5H7v12.6zm2-10.6h2v8.6H9v-8.6zm3.7 17.1h27V83.5h-4.3v19.1zm2-17.1h.3v15.1h-.3V85.5zm166.9 4.3h-52.2v9.7h52.2v-9.7zm-2 7.7h-48.2v-5.7h58.2v5.7zM28.9 47.1h40.6V5.5h38.9v41.6zm2-39.6h36.6v37.6h40.9V7.5zm31 39.6h41.2V35.7H61.9v11.4zm2-9.4h37.2v7.4H63.9v-7.4zm31.5 9.4h24.7V35.7H95.4v11.4zm2-9.4h20.7v7.4H97.4v-7.4zm41-18.6h-25.8v28h35.8v-28zm-2 26h-21.8v-24h31.8v24zm12 43.7h43.2v-12h-33.2v12zm2-10h39.2v8h-29.2v-8zm-2-3h43.2v-9.3h-33.2v9.3zm2-7.3h39.2v5.3h-29.2v-5.3zM16 69.3h3.7c-1.5 0-2.7 1.2-2.7 2.8v34.2c0 1.5 1.2 2.7 2.7 2.7h26c1.5 0 2.7-1.2 2.7-2.7V72.1c0-1.5-1.2-2.8-2.7-2.8zm1.6 34.2c0 .1-.1.2-.2.2h2.3c-.1 0-.2-.1-.2-.2V75c0-.1.1-.2.2-.2h26.2c.1 0 .2.1.2.2v28.5zm92.5-84.4H61.9v14.8h58.2V19.1zm-2 12.8H63.9V21.1h54.2v10.8zm95.8 23h-74.5v10.6h74.5V54.9zm-2 8.6h-70.5v-6.6h70.5v6.6zm-63.5-58H61.9v11.8h76.5V5.5zm-2 9.8H63.9V7.5h72.5v7.8zm46.2 84.2h31.3v-33h-21.3v33zm2-31h27.3v29h-17.3v-29z" fill="url(#a)" filter="url(#shadow)" />
</svg>

И такие правила в CSS для эффекта сияния при наведении:

svg defs stop{
  transition: .4s;
}
svg:hover defs stop{
  stop-color: #b6fff1;
}
svg defs feDropShadow {
  transition: .4s;
  flood-color: transparent;
}
svg:hover feDropShadow{
  flood-color: #06deb5;
}

Немного разберу важные моменты, а рабочий пример будет ниже.

Для эффекта тени добавили фильтр

<filter>
  <feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="#00c6a0" />
</filter>

И вызвали этот фильтр в элементе path:

<path ... filter="url(#shadow)" />

Для плавного эффекта свечения задали фильтру прозрачный цвет, а при наведении нужный цвет #06deb5 – это цвет нашей тени:

svg defs feDropShadow {
  transition: .4s;
  flood-color: transparent;
}
svg:hover feDropShadow{
  flood-color: #06deb5;
}

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

Так же в стилях добавили правило для смены цвета нашего svg-элемента. Если просто указать fill="b6fff1" вместо fill="url(#a)", то плавного изменения цвета не будет, поэтому в стилях зададим для градиента stop-color: #b6fff1; – на самом деле, я без понятия, насколько это правильно, но это работает:

svg defs stop{
  transition: .4s;
}
svg:hover defs stop{
  stop-color: #b6fff1;
}

Важные нюансы:

если подключать svg как файл, а не добавлением кода в HTML, то правила CSS не будут влиять на код svg.
если на странице используется несколько одинаковых иконок со схожими фильтрами, тогда у каждой иконки должны быть уникальные ID фильтров и событий, иначе срабатывать эффекты будут на всех элементах при наведении на самый первый в коде элемент:

<filter ...
<linearGradient ...
...
... fill="url(#a)" filter="url(#shadow)" />

или для аналогичных элементов с одинаковыми инструкциями внутри <defs> можно применять уже однажды объявленные инструкции. Элемент <defs> содержит идентифицируемые инструкции, которые могут быть использованы несколько раз по всему документу; он устанавливает определение, которое не будет отображаться, пока оно не будет вызвано. Еще раз. Можно один раз у первого элемента указать инструкции для градиента и теней внутри <defs>, а у остальных элементов просто вызвать нужные эффекты через идентификатор … fill="url(#a)" filter="url(#shadow)" />.
простой совет – сначала добавить нужные эффекты, а затем уже привязать их к событию hover

Пример работы анимированной подсвечивающейся svg – просто наведите курсор на иконку:

See the Pen Glowing Gradient Button Animation Effects on Hover Using Html and CSS by Denis (@deniscreative) on CodePen.dark

Подробнее про svg градиенты здесь – https://www.sitepoint.com/getting-started-svg-gradients/

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

В предыдущем уроке по CSS мы создали размытие текста, используя свойство тени текста и прозрачный цвет текста. В этом уроке мы воспользуемся подобным способом, чтобы создать анимированные светящиеся ссылки. Тень текста — это многогранное свойство CSS3, которое поддерживается в браузерах без приставок производителей. Но оно не работает в браузере Internet Explorer версий 9 и ниже. Однако, это свойство можно использовать не только для создания теней. На темном фоне белая тень создает эффект свечения.

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

Давайте запишем код. Начнем с кода HTML, применив класс “glow” к ссылке:

<a href="#">Glowing Link</a>

Сначала зададим свойства для начального состояние и свойства перехода с приставками производителей. Переход начнется сразу и продолжится полсекунды. Нам больше всего понравилось использовать значение временной характеристики перехода “linear”, оно создает наиболее естественный эффект, но попробуйте и другие значения, такие как “ease”, “ease-in”, “ease-out”, “ease-in-out”, “cubic-bezier”, Вы можете узнать о них больше в уроке о переходах CSS3:

a.glow, a.glow:hover, a.glow:focus
{
	text-decoration: none;
	color: #aaf;
	text-shadow: none;
	-webkit-transition: 500ms linear 0s;
	-moz-transition: 500ms linear 0s;
	-o-transition: 500ms linear 0s;
	transition: 500ms linear 0s;
	outline: 0 none;
}

Теперь можно задавать свойства свечения текста. Нам показалось, что одна тень текста со значениями 0 0 8px #fff выглядит слишком тонкой. Две тени дают более интересный эффект, если одна тень белая, а другая — ярко-желтая, и у них немного разные смещения:

a.glow:hover, a.glow:focus
{
	color: #fff;
	text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}

Посмотрите демонстрацию работы светящихся ссылок.

Поэкспериментируйте с разными анимациями и значениями свойства тени текста.

Этот анимированный эффект работает в браузерах Firefox, Chrome и Safari всех версий.

Браузер Internet Explorer поддерживает свойство тени текста, только начиная с версии 10. При этом и у поддерживающих версий бывают проблемы с отображением.

Браузер Opera старых версий поддерживает переходы CSS3, но только у некоторых свойств. Цвета поддерживаются, но тени текста не поддерживаются, так что анимация получается скачкообразной. Но в современных версиях этой проблемы нет.

Второй набор ссылок в нашем примере показывает эффект подсветки сзади, создаваемый с помощью изменения цвета текста на цвет фона. Но это делает текст невидимым в браузере Internet Explorer версии 9 и ниже. Чтобы решить эту проблему, можно или воспользоваться библиотекой JavaScript Modernizr, или написать свой код для определения поддержки браузером свойства тени текста, например:

if (document.createElement("detect").style.textShadow === "") {
	document.getElementsByTagName("html")[0].className += " textshadow";
}

Надеемся, Вам понравился этот способ.

Автор урока Craig Buckler

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

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

Мигающий текст на сайт CSS стилями

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

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

Первый вариант


<style>
#blink {
	-webkit-animation: blink 2s linear infinite; 
	animation: blink 2s linear infinite; 
	font-weight: bold; 
	color: color: #F00; 
}

@-webkit-keyframes blink { 
	0% { color: #F00; }
	50% { color: #FBB; }
	100% { color: #F00; }
}

@keyframes blink {  
	0% { color: #F00; }
	50% { color: #FBB; }
	100% { color: #F00; } 
}
</style>

<p>Первый вариант</p>

В примере мы создали плавный переход от красного цвета шрифта к розовому и обратно. Блок @-webkit-keyframes blink и @keyframes повторяет фреймы, это из-за того что разные браузеры поддерживают разные свойства css анимации.

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

Второй вариант


<style>
#blink-2{
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  animation:blur .75s ease-out infinite;
  text-shadow:text-shadow: 0 0 5px #abc, 0 0 7px #abc;
}

@keyframes blur{
  from{
      text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #7B96B8,
      0px 0px 150px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8,
      0px -10px 100px #7B96B8;}
}
</style>
<p>Второй вариант</p>

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

Режимы наложения CSS3: свойство background-blend-mode

Karina | 13.10.2014

Большинство людей для обработки изображений используют Adobe Photoshop. Помимо всех преимуществ, в этой программе есть еще один весомый плюс, который дает ей возможность опережать конкурентов – режимы наложения слоев, или blending modes.

Такие режимы позволяют создавать интересные эффекты, смешивая несколько слоев. Кто хоть раз пользовался этой функцией в Adobe Photoshop, знает, какие широкие возможности она предоставляет. Но знаете ли вы, что режимы смешивания также доступны и в CSS? Сегодня мы рассмотрим это на примерах.

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

На сегодняшний день около 50% используемых браузеров поддерживают свойство background-blend-mode, включая новые версии Google Chrome, Opera и Mozilla Firefox. Браузер Internet Explorer на данный момент не отображает эти эффекты. Список версий браузеров можно просмотреть на сайте caniuse.com.

Как использовать режим наложения CSS3

С помощью свойства background-blend-mode можно смешать два изображения либо изображение и фон. Термин «основной цвет» означает исходный в изображении цвет, «совмещенный» – цвет, который накладывается, «результирующий» – цвет, полученный в результате наложения. Мы будем смешивать фотографию caracal.jpg и однотонный фон #eac071. Для этого зададим класс blend и создадим основной «каркас» CSS:


.blend {
width:680px;
height:423px;
background:#eac071 url("caracal.jpg") no-repeat center center;
}

Теперь можно создавать режимы смешивания, добавляя еще один класс и стиль. Ниже приведено 15 примеров.

Color Burn (затемнение основы)

Этот режим затемняет базовые цвета, делая картинку более контрастной. Создаем класс burn и прописываем стиль:


.blend.burn {
background-blend-mode: color-burn;
}

Результат:

Color (цвет)

Яркость основного цвета + насыщенность и цветовой тон совмещенного цвета = результат режима Color.
Color проявляет себя лучше всего при раскраске монохромных изображений.


.blend.color {
background-blend-mode: color;
}

Darken (замена темным)

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


.blend.darken {
background-blend-mode: darken;
}

Difference (разница)

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


.blend.difference {
background-blend-mode: difference;
}

Color Dodge (осветление основы)

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


.blend.dodge {
background-blend-mode: color-dodge;
}

Exclusion (исключение)

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


.blend.exclusion {
background-blend-mode: exclusion;
}

Hard Light (жесткий свет)

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


.blend.hard {
background-blend-mode: hard-light;
}

Hue (цветовой тон)

Режим Hue сочетает насыщенность и яркость основного цвета с цветовым тоном совмещенного.


.blend.hue {
background-blend-mode: hue;
}

Lighten (замена светлым)

В этом режиме картинка становится светлее. Выбираются те цвета, которые являются более светлыми.


.blend.lighten {
background-blend-mode: lighten;
}

Luminosity (яркость)

Luminosity – противоположность режиму Color. Здесь сочетается яркость совмещенного цвета с цветовым тоном и насыщенностью основного.


.blend.luminosity {
background-blend-mode: luminosity;
}

Multiply (умножение)

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


.blend.multiply {
background-blend-mode: multiply;
}

Overlay (перекрытие)

При смешивании основного и совмещенного цветов яркие цвета осветляются, а темные – затемняются.


.blend.overlay {
background-blend-mode: overlay;
}

Saturation (насыщенность)

Светимость и цветовой тон основного цвета сочетается с насыщенностью совмещенного цвета.


.blend.saturation {
background-blend-mode: saturation;
}

Screen (осветление)

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


.blend.screen {
background-blend-mode: screen;
}

Soft Light (мягкий свет)

В зависимости от совмещенного цвета, изображение станет либо светлее, либо темнее. Работа режима схожа с Hard Light, только здесь в результате получается более мягкий свет.


.blend.soft {
background-blend-mode: soft-light;
}

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

15 CSS Glow Effects

Коллекция бесплатных HTML и CSS Glow Effect примеров кода.

Автор

Дэйв Броган
27 ноября 2019 г.

О коде

Треугольник с эффектом неонового свечения

Эффект неонового свечения

CSS с использованием падающих теней и clip-path .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Буква Gradient Glow

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Quangdao
14 сентября 2019 г.

О коде

Карта Внешний GLow Effect

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: fontawesome.js

О коде

Сканирующие линии свечения

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Кевин Миранда
20 мая 2019 г.

О коде

Пуговицы с неоновым свечением

Реализация только для CSS стеклянных кнопок неонового свечения с текстовыми градиентами и box-shadow s.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Йеспер Лауридсен
7 мая 2019 г.

О коде

Кнопка с подсветкой при наведении

Кнопка градиентного цвета с подсветкой.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

Эффекты свечения

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Жан-Пьер Бартелеми
8 января 2018 г.

О коде

The Glow, издание 60-х

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Келли Ковальски
15 ноября 2017 г.

О коде

Светящийся материал

Исследование эффектов пульсирующего свечения для анимации баннера.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Джордж Гастингс
8 января 2017 г.

О коде

Анимированное обратное свечение

Псевдоэлемент + анимация градиента фона + размытие.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Мэтт Бенсон
11 октября 2016 г.

О коде

Свечение лампочки

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Мэтт Соррентино
29 апреля 2014 г.

О коде

CSS Волшебный эффект свечения

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

Круги и штабелирование

Простой пример наложения box-shadow s на круглый элемент для создания эффекта свечения.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

Светящийся полупрозрачный мрамор

Показывает, как применить различные box-shadow s вместе к одному элементу, чтобы создать эффект красочного свечения.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Феликс Риллинг
1 марта 2014 г.

О коде

Неоновое свечение

Наведите их.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

10 CSS Glow Text Effects

Коллекция отобранных вручную бесплатных HTML и CSS светящихся (неоновых) текстовых эффектов примеров кода.Обновление ноябрьской коллекции 2018 г. 1 новый предмет.

Текстовые эффекты CSS
Эффекты тени текста CSS
CSS 3D текстовые эффекты
Анимация текста CSS
Эффекты сбоя текста CSS

Автор

Парк Джорджа У.
9 октября 2018 г.

О коде

Черный зеркальный текст с потрескавшимся эффектом

В этом примере показано, как можно использовать чистый CSS для воссоздания эффекта потрескавшегося текста из вступления к телешоу «Черное зеркало».

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Мерцающий неоновый текст

Мерцающий неоновый текст на чистом CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор

Парк Джорджа У.
21 декабря 2017 г.

О коде

Эффект мерцающего неонового знака с использованием текста CSS и тени

Это перо показывает, как свойства CSS text-shadow и box-shadow могут быть анимированы для создания эффекта мерцающей неоновой вывески.Неоновый текст и цвет границы можно индивидуально изменить, обновив соответствующие переменные CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

Марк Хегган
23 августа 2017 г.

О коде

CSS Неон

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

Мэтт Смит
21 августа 2017 г.

О коде

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

Я увидел эту цитату, написанную неоном в фильме «Взрывная блондинка», и меня вдохновило.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

Йохан Жирод
23 марта 2017 г.

О коде

Неоновый текст, мерцающий свет

Неоновое мерцание текста с помощью HTML, CSS и JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

Еще один Крис
1 марта 2017 г.

Сделано с

HTML (мопс) / CSS (SCSS) / JavaScript

О коде

Bill 🚀👽 🌀 Paxton Tribute — светящийся текст

Величайший человек, сражавшийся с Терминатором, Хищником, Ксеноморфом и Торнадо F5.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор

Беннет Фили
9 августа 2016 г.

О коде

Светящийся текст

Светящийся текст HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

Томас Тринка
7 июля 2016 г.

О коде

Неоновый поток

Пульсирующая неоновая вывеска, сделанная с использованием множества наложенных text-shadow s.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

Эрик Юнг
28 февраля 2016 г.

О коде

Неоновый эффект тени для текста

Эффект неоновой тени для текста в HTML, CSS и JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Как создать светящиеся ссылки в CSS3

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

Text-shadow — это универсальное свойство CSS3, которое поддерживается во всех браузерах без префиксов поставщика. Кроме одного. Извините, пользователи IE9, вам придется подождать еще несколько месяцев для IE10. Однако это полезно не только для теней. На более темном фоне появляется белая «тень», заставляющая текст светиться:

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

 
 Светящаяся ссылка

Наше первое объявление CSS3 определяет начальное состояние и свойства перехода с префиксом поставщика. Переход начинается сразу и длится полсекунды. Я обнаружил, что «линейная» синхронизация дает наиболее естественный эффект, но вы можете поэкспериментировать с другими (легкость, легкость входа, легкость выхода, легкость выхода, кубическая кривая Безье):

 
а.свечение, свечение: наведение, свечение: фокус
{
текстовое оформление: нет;
цвет: #aaf;
тень текста: нет;
-webkit-transition: линейные нули 500 мс;
-moz-transition: линейные нули 500 мс;
-o-переход: 500 мс, линейные нули;
переход: 500 мс, линейные нули;
контур: 0 нет;
}

Теперь мы можем определить свойства светящегося текста. Я обнаружил, что одна текстовая тень, такая как 0 0 8px #fff, была слишком тонкой. Две тени дали лучший результат — одна белая и одна ярко-желтая с немного разными смещениями:

 
а.свечение: парение, свечение: фокус
{
цвет: #fff;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}

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

предупреждение: Более размытое поведение в Opera

Этот анимированный эффект хорошо работает в Firefox, Chrome и Safari. IE9 не поддерживает тень текста, поэтому эффект не виден. Opera поддерживает переходы CSS3, но влияет только на определенные свойства.Цвет работает хорошо, но он не применяется к теням текста, что приводит к более резкой анимации. Это должно быть исправлено в будущей версии.

Второй набор ссылок на демонстрационной странице показывает эффект задней подсветки, созданный путем изменения цвета текста на такой же, как у фона. Однако это делает текст невидимым в IE9 и ниже. Чтобы решить эту проблему, мы можем либо использовать Modernizr, либо написать собственный код обнаружения тени текста, например

 
если (document.createElement ("обнаруживать").style.textShadow === "") {
document.getElementsByTagName ("html") [0] .className + = "texthadow ";
}

Получайте удовольствие от техники. Пожалуйста, оставьте свои комментарии и URL-адрес, если вы создадите хороший эффект на своем сайте.

CSS3 Glow Tabs — Impressive Webs

На днях я посетил страницу конференции jQuery и сразу же влюбился в красивый дизайн и технику CSS3, примененную к навигации с вкладками на этой странице. Посетите сайт в браузере на основе Webkit (Chrome или Safari) или в Opera 10.5, и вы увидите красивый «светящийся» эффект наведения вместе с тонкой внутренней тенью в нижней части неактивных вкладок.

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

Просмотрите демонстрацию или посмотрите пример на сайте jQuery Conference, если вы хотите повторить то, что я буду описывать.

Эффект «светящегося» наведения

Большая часть CSS и HTML довольно просты, поэтому я не буду утомлять вас этими деталями, я просто сосредоточусь на двух основных эффектах, которые делают вкладки такими визуально привлекательными. Прежде всего, я подумал, поскольку это веб-сайт, связанный с библиотекой jQuery, они должны использовать jQuery для эффекта «свечения». Я видел эффект раньше, и обычно это делается с помощью JavaScript. В данном случае они используют переходы CSS, и их очень просто создать:

 ul # navigation li a: link, ul # navigation li a: посещено {
  / * здесь другой CSS... * /
  -webkit-transition: цвет фона 0,2 с, линейный;
  -moz-transition: background-color 0.2s линейный;
  -o-transition: цвет фона 0,2 с линейный;
}

ul # navigation li a: hover {
  цвет фона: # 5a87dd;
}

Если вы не знакомы с тем, как работает приведенный выше код, вот урок CSS-переходов 101: объявление - propietary -transition показано выше в сокращении для 3 различных механизмов рендеринга, и, согласно веб-сайту Webkit, вот что представляют три значения:

свойство перехода — какое свойство должно анимировать, например.г., непрозрачность.
transition-duration — Как долго должен длиться переход.
transition-time-function — Временная функция для перехода (например, линейная, легкая и пользовательская кубическая функция Безье).

Второй раздел в CSS дает событие наведения курсора для вкладки навигации, и это объединяется для создания анимированного эффекта «свечения». Если браузер не поддерживает переход, он просто выполняет прямое наведение без свечения.

Внутренняя тень

Это сложная часть, и она, к сожалению, немного портит нашу разметку.Но это приятный эффект, и вы всегда можете использовать JavaScript для создания дополнительного элемента, чтобы ваша разметка была чистой. В HTML мы добавляем дополнительный пустой элемент списка в конец списка, присваиваем ему класс «тень» и задаем ему следующий стиль:

 ul # navigation li.shadow {
  ширина: 100%;
  высота: 2 пикселя;
  позиция: абсолютная;
  внизу: -3px;
  слева: 0;
  граница: нет;
  фон: нет;
  z-индекс: 2;
  -webkit-box-shadow: # 111 0 -2px 6px;
  -moz-box-shadow: # 111 0 -2px 6px;
  box-shadow: # 111 0 -2px 6px;
}

Ключевые части приведенного выше CSS:

Абсолютное позиционирование для размещения элемента в нижней части вкладок
Полная ширина, поэтому тень охватывает всю вкладку
Тень блока CSS3
z-index , значение «2», которое гарантирует, что тень находится ниже вкладки «selected»; у выбранной вкладки z-index «3»; неактивные вкладки устанавливаются на z-index «1»

Закругленные углы и градиенты для загрузки

Наконец, эффект дополняется свойством CSS3 border-radius и градиентом CSS3 на активной вкладке.К градиенту применен фильтр только для IE (в моем примере), поэтому IE действительно получает часть эффекта.

И это все. Остальной CSS — это просто обычные заурядные стили навигации с вкладками. Я также включил jQuery для изменения выбранной вкладки.

Полный эффект работает в Chrome, Safari, Opera 10.5 и Firefox 3.7. Технически Firefox 3.7 официально не выпущен, но, согласно Mozilla, переходы CSS3 будут включены в эту версию.

CSS3 эффект свечения текста с текстовой тенью

10 марта 2012 г., Том Эллиотт,

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

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

К сожалению, нет встроенной поддержки атрибута text-shadow во всех текущих версиях Internet Explorer, но предстоящий IE 10 будет поддерживать его, и я ожидаю, что внедрение будет быстрым частично благодаря новым автоматическим обновлениям IE, связанным с обновлением окон обновления.А пока нам нужно, по крайней мере, убедиться, что любой текст с тенями по-прежнему читается без него.

Во всяком случае, на свечение. Давайте посмотрим на базовое свойство тени текста CSS3:

.textShadow {
   тень текста: 1px 4px 6px # 979797;
}

Первое и второе значения — это расстояние в пикселях для перемещения тени по осям x и y соответственно, третье значение — коэффициент размытия, а последнее — цвет. Приведенный выше CSS создает стиль ниже с тенью под текстом:

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

.simpleGlow {
  text-shadow: 0px 0px 2px # 4d4d4d, 0px 5px 10px #aeaeae;
}

Однако свечение недостаточно ярко выражено, на мой вкус, я хочу создать резкое и четкое свечение вокруг текста. Пример ниже приближается к этому — на этот раз для создания свечения используются 4 элемента text-shadow, каждый из которых смещен на 1 пиксель под углом 90 °, 180 °, 270 °, 360 ° в указанном порядке.Элемент размытия установлен на 0, чтобы придать ему четкий светящийся контур.

.sharpGlow {
  text-shadow: 1px 0px 0px # 686868, 0px 1px 0px # 686868, -1px 0px 0px # 686868,
  0px -1px 0px # 686868, 1px 4px 5px #aeaeae;
}

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

.SharperGlow {
    text-shadow: 1px 0px 0px # 686868, 1px 1px 0px # 686868, 0px 1px 0px # 686868,
    -1px 1px 0px # 686868, -1px 0px 0px # 686868, -1px -1px 0px # 686868,
    0px -1px 0px # 686868, 1px -1px 0px # 686868, 1px 4px 5px #aeaeae;
}

Вот и все, красивое свечение CSS3 вокруг вашего текста. Я обнаружил, что этот метод лучше работает с обычными и более жирными шрифтами, а выше — это обычный Arial 27px.

Несколько вещей, которых следует остерегаться:
1.Будьте осторожны при использовании цвета текста с таким же цветом фона, Internet Explorer (до выхода IE 10) не будет отображать тени текста, и вы не хотите, чтобы текст отображался скрытым. В качестве альтернативы вы можете использовать отдельную таблицу стилей, чтобы применить другой цвет или стиль к тексту для IE.
2. Слишком много теней может увеличить время рендеринга и замедлить любое движение, например прокрутку. Если вы используете несколько теней на текстовых элементах, используйте их экономно, например, придерживаясь заголовков, а не основного текста.

Следующее сообщение: Индексирование полей MySQL для ускорения запросов PHP »
Последнее сообщение: Проблема с iPhone при отображении большого фонового изображения »

CSS: тени текста

См. Также указатель всех советов.

На этой странице:

Тени текста

CSS уровня 3 имеет свойство text-shadow для добавления тени. к каждой букве некоторого текста.В простейшем виде это выглядит что-то вроде этого:

h4 {text-shadow: 0.1em 0.1em # 333}

Добавляет темно-серую (# 333) тень немного правее (0,1em) и вниз (0,1em) относительно обычного текста. Результат выглядит так:

Ноак и барсикл

Тень нечеткого текста

Простейшая форма свойства text-shadow состоит из двух частей: цвет (например, # 333 выше) и смещение (0.1em 0,1em в пример выше). Это приводит к резкой тени на указанном смещение. Но смещение также можно сделать нечетким, в результате или менее размытая тень.

Величина нечеткости дана как другое смещение. Вот два линии, одна с небольшой размытостью (0,05em) и одна с большим количеством (0.2em):

h4.a {text-shadow: 0.1em 0.1em 0.05em # 333}
h4.b {text-shadow: 0.1em 0.1em 0.2em черный}

«Что скажешь?» сказал UK

Для ясности

Читаемый белый текст

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

h4 {цвет: белый}
h4.a {цвет: белый; text-shadow: черный 0.1em 0.1em 0.2em}

Без тени:

Что в этом для меня?

С тенью:

С лопатой и апельсинами

Множественные тени

У вас также может быть более одной тени. В общем, это выглядит довольно странно:

h4 {тень текста: 0.2em 0,5em 0,1em # 600,
      -0.3em 0.1em 0.1em # 060,
      0.4em -0.3em 0.1em # 006}

Но с двумя хорошо расположенными темными и светлыми тенями эффект может быть полезным:

h4.a {text-shadow: -1px -1px белый, 1px 1px # 333}
h4.b {text-shadow: 1px 1px белый, -1px -1px # 444}

Я, Август (вы знаете кто)

Лишнее конечно

Это немного опасно, как вы можете видеть, если ваш браузер не поддержка ‘text-shadow’.Фактически, цвета фона и текст в этом примере почти такой же (#CCCCCC и # D1D1D1), поэтому без теней почти нет контраста.

Рисование букв в виде контуров

Пример двух теней из предыдущей версии можно взять Еще больше. С помощью четырех теней буквам можно придать контур:

h4 {text-shadow: -1px 0 черный, 0 1px черный,
      1px 0 черный, 0 -1px черный}

Вы краснеете?

Кот, яблоко и т. Д.

Это не идеальный план, и в настоящее время (август 2005 г.) обсуждение вопроса о том, должен ли CSS иметь отдельный свойство (или, возможно, значение для ‘text-decoration’), чтобы улучшить очертания.

Неоновое свечение

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

h4.a {text-shadow: 0 0 0.2em # 8F7}
h4.b {text-shadow: 0 0 0.2em # F87, 0 0 0.2em # F87}
h4.c {text-shadow: 0 0 0.2em # 87F, 0 0 0.2em # 87F,
        0 0 0.2em # 87F}