Как сделать чтобы текст светился в css
Перейти к содержимому

Как сделать чтобы текст светился в css

  • автор:

Эффект свечения при наведении на иконки

Как можно сделать неоновый hover эффект на иконки соц.-сетей? Уже пробовал box-shadow: 0 0 20px #. ; , при наведении создаётся неоновый квадрат, а мне нужно, чтобы светилась сама иконка, а не область вокруг неё.

Отслеживать

задан 2 июл 2020 в 14:39

67 1 1 серебряный знак 9 9 бронзовых знаков

Можете использовать fontawesome иконки и уже при наведении менять их цвет.

2 июл 2020 в 14:48

@ValeraKononenko иконки как раз с fontawesome, при наведении цвет меняется, но мне нужен именно эффект свечения

Как сделать светящийся текст в HTML и CSS

Я хочу сделать светящийся текст в HTML и CSS. Я следую этому учебнику.

Я хочу, чтобы текст светился, как и кнопки минимизации, максимизации и выхода в Windows Vista, и 7 светился при наведении на них.

Я прочитал 8 учебников в Интернете, все из которых говорят, что FILTER работает только в IE (Комплексный BS, я использую IE9 RC и даже не отображается), поэтому ни один из учебников, которые я нашел о светящемся, на самом деле не работает для текста, например,

, и т.д.

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

Поделиться Источник 05 марта 2011 в 05:40

4 ответа

Будьте уверены, что вы играете с CSS3 text-shadow.

text-shadow: #EEEE00 0 0 10px; 

IE8 и ниже не поддерживают его, но здесь filter пригодится.

filter: glow(color=#EEEE00,strength=3); 

P.S. Небольшая особенность свойства text-shadow CSS3 заключается в том, что он позволяет использовать несколько теней.

text-shadow: #EEEE00 0 0 10px, #FF0000 5px 5px 5px; 

Поделиться 05 марта 2011 в 05:44

enter image description here

вы можете открыть каждый из них в редакторе и настроить любые параметры css3, а затем просто получить нужный вам код css3 (он будет сгенерирован) с помощью enjoycss

enter image description here

Поделиться 02 марта 2014 в 00:50

Попробуйте этот трюк CSS3!

.text-glow .text-glow:hover

Поделиться 10 февраля 2014 в 21:49

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

Я нашел полу-хорошее, полу-cr*p решение на данный момент:

   HTML5 & CSS3 Samples p  

Welcome!

Как создать светящийся текст на CSS

Как создать светящийся текст на CSS

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

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

Следуйте инструкциям и посмотрите примеры светящихся текстов.

1. Создать HTML

Создайте тег h1 с классом свечение где пишем текст.

ZorNet.Ru — сайт для вебмастера

Также можно под h2 или h3, как вам удобнее.

2. Создание CSS

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

body <
background: linear-gradient(90deg, rgba(158, 43, 181) 0%, rgba(105, 18, 115) 35%, rgba(43, 5, 58) 100%);
>

Это стандартный фон, который выстроен на несколько оттенков цвета.

Теперь нужно создать свечение:

1. Установите размер шрифта текста, цвет и укажите, где текст должен быть расположен со свойством text-align.
2. Мы устанавливаем продолжительность анимации в 1 секунду, что означает, что анимация занимает 1 секунду, чтобы завершить один цикл.

Используйте ключевое слово ease-in-out свойства animation-timer-function, которое определяет как, будет развиваться анимация в течение каждого цикла, а не всей анимации. Установите для параметра animation-iteration-count значение бесконечное, чтобы анимация воспроизводилась без остановки.

Укажите направление анимации, установив его чередующимся, чтобы анимация воспроизводилась вперед, затем переворачивалась и повторялась. Здесь нужно задействовать префиксы -webkit- и -moz- vendor со свойством animation нужно создать.

.svetyash-chiysya <
font-size: 70px;
color: #f7f6f6;
text-align: center;
-webkit-animation: svetyash-chiysya 1s ease-in-out infinite alternate;
-moz-animation: svetyash-chiysya 1s ease-in-out infinite alternate;
animation: svetyash-chiysya 1s ease-in-out infinite alternate;
>

Ключевой кадр селектор может начинаться с процентного (%) или с помощью ключевых слов «от» ( такой же , как 0%) и «до» ( такой же , как 100%). Где 0% — это начальная точка анимации, а 100% — это конечная точка.

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

@Keyframes правило полностью поддерживается основными браузерами.

Однако используются некоторые префиксы:

-webkit- Google Chrome 4.0
-moz- Mozilla Firefox 5.0
-webkit- Safari 4.0
-webkit- Opera 15.0
-Опера 12.0

@-webkit-keyframes svetyash-chiysya <
from <
text-shadow: 0 0 10px #f5f0f0, 0 0 20px #101010, 0 0 30px #101010, 0 0 40px #101010, 0 0 50px #9052ad, 0 0 60px #9052ad, 0 0 70px #9052ad;
>
to <
text-shadow: 0 0 20px #f5f0f0, 0 0 30px #f54da1, 0 0 40px #f54da1, 0 0 50px #f54da1, 0 0 60px #f54da1, 0 0 70px #f54da1, 0 0 80px #f54da1;
>
>

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

Вот окончательный код:

Тень и эффект свечения через CSS для текста

ZorNet.Ru — сайт для вебмастера

body <
background: linear-gradient(90deg, rgba(158, 43, 181) 0%, rgba(105, 18, 115) 35%, rgba(43, 5, 58) 100%);
>
.svetyash-chiysya <
font-size: 70px;
color: #f7f6f6;
text-align: center;
-webkit-animation: svetyash-chiysya 1s ease-in-out infinite alternate;
-moz-animation: svetyash-chiysya 1s ease-in-out infinite alternate;
animation: svetyash-chiysya 1s ease-in-out infinite alternate;
>
@-webkit-keyframes svetyash-chiysya <
from <
text-shadow: 0 0 10px #f5f0f0, 0 0 20px #101010, 0 0 30px #101010, 0 0 40px #101010, 0 0 50px #9052ad, 0 0 60px #9052ad, 0 0 70px #9052ad;
>
to <
text-shadow: 0 0 20px #f5f0f0, 0 0 30px #f54da1, 0 0 40px #f54da1, 0 0 50px #f54da1, 0 0 60px #f54da1, 0 0 70px #f54da1, 0 0 80px #f54da1;
>
>

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

Давайте посмотрим на другой пример:

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

ZorNet.Ru — сайт для вебмастера

.vmestilishche <
display: table-cell;
text-align: center;
vertical-align: middle;
>
.svetyash-chiysya <
color: #FB4264;
font-size: 32px;
line-height: 32px;
text-shadow: 0 0 3vw #F40A35;
>
.svetyash-chiysya <
animation: svetyash-chiysya 1.2s ease infinite;
-moz-animation: svetyash-chiysya 1.2s ease infinite;
-webkit-animation: svetyash-chiysya 1.2s ease infinite;
>
@keyframes svetyash-chiysya <
0%,
100% <
text-shadow: 0 0 1vw #f7130d, 0 0 3vw #f7130d, 0 0 10vw #f7130d, 0 0 10vw #f7130d, 0 0 .4vw #f7c81b, .5vw .5vw .1vw #8c7216;
color: #f7c81b;
>
50% <
text-shadow: 0 0 .5vw #821411, 0 0 1.5vw #821411, 0 0 5vw #821411, 0 0 5vw #821411, 0 0 .2vw #821411, .5vw .5vw .1vw #463809;
color: #8c7216;
>
>

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

Эффекты при наведении на текст CSS

Эффекты при наведении на текст CSS

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

При наведении на текст меняется цвет CSS

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

Пример

HTML

 

Lorem Ipsum

CSS

 p.change-text < color: #f66d52; /* Цвет текста */ font-size: 2em; /* Размер текста */ font-weight: bold; padding: 20px 0px; text-transform: uppercase; line-height: 1; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; >p.change-text:hover < color: #5265f6; /* Меняем цвет текста */ >

Зачеркнутый текст CSS

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

Пример

HTML

 

Lorem Ipsum

CSS

 p.line-through < color: #f66d52; /* Цвет текста */ font-weight: 400; text-transform: uppercase; font-size: 1em; text-decoration:none; >p.line-through:hover < text-decoration:line-through; /* Добавляем зачеркивание */ >

Зачеркнутая ссылка или текст при наведении другим цветом CSS

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

Пример

HTML

  
Lorem Ipsum

Lorem Ipsum

CSS

 /* Ссылка */ a.crossed-link < color: #f66d52; /* Цвет сылки */ font-weight: 400; text-transform: uppercase; text-decoration: none; font-size: 1em; position: relative; display: inline-block; >a.crossed-link:before < content: ''; position: absolute; width: 100%; height: 1px; /* Высота зачеркивающей линии */ background: #666; /* Цвет зачеркивающей линии */ top: 45%; animation: out 0s cubic-bezier(1, 0, 0.58, 0.97) 1 both; >div.crossed:hover a.crossed-link:before < animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both; >/* Текст */ p.crossed-text < color: #ffa000; /* Цвет текста */ font-weight: 400; text-transform: uppercase; font-size: 1em; position: relative; display: inline-block; >p.crossed-text:before < content: ''; position: absolute; width: 100%; height: 1px; /* Высота зачеркивающей линии */ background: #666; /* Цвет зачеркивающей линии */ top: 45%; animation: out 0s cubic-bezier(1, 0, 0.58, 0.97) 1 both; >div.crossed:hover p.crossed-text:before < animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both; >/* Анимация */ @keyframes in < 0% < width: 0; left: 0; right: auto; >100% < left: 0; right: auto; width: 100%; >> @keyframes out < 0% < width: 100%; left: auto; right: 0; >100% < width: 0; left: auto; right: 0; >> @keyframes show < 0% < opacity: 0; transform: translateY(-10px); >100% < opacity: 1; transform: translateY(0); >> 

Появление тени для текста при наведении CSS

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

Пример

HTML

 

Lorem Ipsum

CSS

 .shadow-text < color: #f66d52; /* Цвет текста */ font-size: 2em; /* Размер текста */ font-weight: bold; padding: 20px 0px; text-transform: uppercase; line-height: 1; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; >.shadow-text:hover < color: #ffa000; /* Меняем цвет текста */ -webkit-text-shadow: 2px 2px 2px #000; -moz-text-shadow: 2px 2px 2px #000; text-shadow: 2px 2px 2px #000; >

Анимация с подчёркивающей и исчезающей линией у ссылки CSS

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

Пример

HTML

CSS

 .underline-one < color: #00bfff; /* Цвет обычной ссылки */ position: relative; cursor: pointer; text-decoration: none; /* Убираем подчеркивание */ >.underline-one:after < content: ""; display: block; position: absolute; right: 0; bottom: -3px; width: 0; height: 2px; /* Высота линии */ background-color: black; /* Цвет подчеркивания при исчезании линии*/ transition: width 0.5s; /* Время эффекта */ >.underline-one:hover:after < content: ""; width: 100%; display: block; position: absolute; left: 0; bottom: -3px; height: 2px; /* Высота линии */ background-color: red; /* Цвет подчеркивания при появлении линии*/ transition: width 0.5s; /* Время эффекта */ >

Анимация с подчёркивающей линией у ссылки CSS

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

Пример

HTML

CSS

 .link-ease-in-out a < display: inline-block; color: #00bfff; /* Цвет обычной ссылки */ line-height: 1; text-decoration: none; /* Убираем подчеркивание */ cursor: pointer; >.link-ease-in-out a:after < background-color: #f66d52; /* Цвет линии при наведении на нее курсора мыши */ display: block; content: ""; height: 2px; /* Высота линии */ width: 0%; -webkit-transition: width .3s ease-in-out; -moz--transition: width .3s ease-in-out; transition: width .3s ease-in-out; >.link-ease-in-out a:hover:after, .link-ease-in-out a:focus:after

Изменение фона и цвета ссылки CSS

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

Пример

HTML

 

Lorem Ipsum

CSS

 p < color: #5a5a5a; /* Цвет текста */ background: #ffc; /* Цвет фона */ padding: 10px; /* Поля вокруг текста */ transition: 1s linear; /* Время изменения */ >p:hover < color: #fff; /* Цвет текста */ background: #f66d52; /* Цвет фона */ >

Увеличение текста при наведении CSS

Иногда нужно увеличить текст при наведении, этого можно добиться с помощью свойства transform с функцией scale(). Свойство transition отвечает за плавное увеличение текста, с помощью него устанавливаем время масштабирования. В зависимости от того, в каком положении находится текст, его масштабирование будет происходить по разному.

Пример

HTML

 

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

CSS

 /* Текст слева */ .gain-left < transition: 1s; /* Время эффекта */ text-align: left; >.gain-left:hover < transform: scale(1.2); /* Увеличиваем масштаб */ >/* Текст по центру */ .gain-center < transition: 1s; /* Время эффекта */ text-align: center; >.gain-center:hover < transform: scale(1.2); /* Увеличиваем масштаб */ >/* Текст справа */ .gain-right < transition: 1s; /* Время эффекта */ text-align: right; >.gain-right:hover < transform: scale(1.2); /* Увеличиваем масштаб */ >

Как добавить линию к заголовку с помощью :before и :after

Часто бывает, что необходимо добавить линию к заголовку, либо сверху, либо снизу. Конечно можно ограничиться простым свойством border-bottom, его можно настроить используя генератор границ блока, но при этом нельзя задать ширину линии отдельно от заголовка, а так же придать ей движение. Но когда это необходимо, можно сделать линию с помощью с помощью :before и :after.

Пример

Lorem Ipsum

HTML

 

Lorem Ipsum

CSS

 h3.title-example < font-size: 1em; /* Размер шрифта */ color: #5a5a5a; /* Цвет заголовка */ text-align: center; /* Текст по центру */ >/* CSS код для линии над заголовком */ h3.title-example:before < content: ''; display: block; height: 1px; /* Высота линии */ background: #f66d52; /* Цвет линии */ width: 150px; /* Ширина линии до наведения */ margin: 0 auto 10px; /* Отступ с боков по центру и снизу */ transition: 1s; /* Время, за которое линия возвращается после наведения */ >h3.title-example:hover:before < width: 250px; /* Ширина линии при наведении */ transition: ease-out 1s; /* Время, за которое линия расширяется при наведении */ >/* CSS код для линии под заголовком */ h3.title-example:after < content: ''; display: block; height: 1px; /* Высота линии */ background: #f66d52; /* Цвет линии */ width: 150px; /* Ширина линии до наведения */ margin: 10px auto 0; /* Отступ с боков по центру и сверху */ transition: 1s; /* Время, за которое линия возвращается после наведения */ >h3.title-example:hover:after < width: 250px; /* Ширина линии при наведении */ transition: ease-out 1s; /* Время, за которое линия расширяется при наведении */ >

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

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