Как сделать свечение в css

сделать

Теги: css, css3, text-shadow, тень

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

Свойство text-shadow (Тень текста)

Это довольно распространенное свойство в CSS, однако, не все о ней знают, или же по каким-то причинам не используют.

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

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

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

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

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

Обычная черная тень

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);}
<div>Блок с обычной тенью</div>

Блок с внутренней тенью CSS

div { height:100px; background:#33FF66; width:250px; box-shadow: 0 0 4px 0 rgba(0,0,0,1);}
<div>Блок с внутренней тенью CSS</div>

Светящийся блок или блок с эффектом свечения другими словами

div { height:100px; background:#33FF66; width:250px; box-shadow: 0 0 10px 0 rgba(255,255,0,0.6), 0 0 6px 0 rgba(255,255,0,0.8), 0 0 10px 0 rgba(255,255,0,0.6);}
<div>Светящийся блок или блок с эффектом свечения другими словамиt;/div>

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



Закрыть ... [X]


Тень и эффект свечения через CSS для текста и блоков Поделки для детей младших классов

Как сделать свечение в css Кроссбраузерные отражения, свечения и размытия CSS
Как сделать свечение в css 12 эффектов для текста с использованием теней CSS
Как сделать свечение в css Как сделать светящийся блок css Блог вебмастера
Как сделать свечение в css Эффект свечения css? «Тостер» вопросы и ответы
Как сделать свечение в css CSS 3-тень текста Как сделать тень для текста
Как сделать свечение в css Как создать эффект свечения с CSS3
Как сделать свечение в css Внутренние тени в CSS / Хабрахабр
Как сделать свечение в css Текст и тень Свечение
Неоновое свечение CSS3 H M каталог модной одежды для женщин, мужчин и Алопеция гнездная алопеция, симптомы и лечение Вирус папилломы человека (ВПЧ - симптомы и лечение) Во сколько Вам обошлась свадьба по деньгам? Глубокое бикини в домашних условиях самостоятельно: способы Имитация настоящей кирпичной стены своими руками из разных материалов Как избавиться от прыщей на лице и теле в домашних условиях