Бесплатный ФРОНТЭНД

Бесплатный ФРОНТЭНД
Бесплатный ФРОНТЭНД

Представляю вашему вниманию бесплатные неоновые эффекты для текста на CSS.

1. Переливающийся неоновый текст

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

Разметка HTML

<div class="neon">
<span class="text" data-text="thanks">thanks</span>
<span class="gradient"></span>
<span class="spotlight"></span>
</div>

Стили CSS

.neon {
position: relative;
overflow: hidden;
filter: brightness(200%);
}
.text {
background-color: black;
color: white;
font-size: 180px;
font-weight: bold;
font-family: sans-serif;
text-transform: uppercase;
position: relative;
user-select: none;
}
.text::before {
content: attr(data-text);
position: absolute;
color: white;
filter: blur(0.02em);
mix-blend-mode: difference;
}
.gradient {
position: absolute;
background: linear-gradient(45deg, red, gold, lightgreen, gold, red);
top: 0;
left: 0;
right: 0;
bottom: 0;
mix-blend-mode: multiply;
}
.spotlight {
position: absolute;
top: -100%;
left: -100%;
right: 0;
bottom: 0;
background:
radial-gradient(
circle,
white,
transparent 25%
) center / 25% 25%,
radial-gradient(
circle,
white,
black 25%
) center / 12.5% 12.5%;
animation: light 5s linear infinite;
mix-blend-mode: color-dodge;
}
@keyframes light {
to {
transform: translate(50%, 50%);
}
}
thanks

2. Мерцающий эффект неоновой вывески с использованием css и тени

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

Разметка HTML

<h1 contenteditable spellcheck="false">open</h1>

Стили CSS

@import url(https://fonts.googleapis.com/css?family=Exo+2:200i);
:root {
/* Base font size */
font-size: 10px;

/* Set neon color */
--neon-text-color: #f40;
--neon-border-color: #08f;
}
h1 {
font-size: 13rem;
font-weight: 200;
font-style: italic;
color: #fff;
padding: 4rem 6rem 5.5rem;
border: 0.4rem solid #fff;
border-radius: 2rem;
text-transform: uppercase;
animation: flicker 1.5s infinite alternate;
}
h1::-moz-selection {
background-color: var(--neon-border-color);
color: var(--neon-text-color);
}
h1::selection {
background-color: var(--neon-border-color);
color: var(--neon-text-color);
}
h1:focus {
outline: none;
}
/* Animate neon flicker */
@keyframes flicker {

0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {

text-shadow:
-0.2rem -0.2rem 1rem #fff,
0.2rem 0.2rem 1rem #fff,
0 0 2rem var(--neon-text-color),
0 0 4rem var(--neon-text-color),
0 0 6rem var(--neon-text-color),
0 0 8rem var(--neon-text-color),
0 0 10rem var(--neon-text-color);

box-shadow:
0 0 .5rem #fff,
inset 0 0 .5rem #fff,
0 0 2rem var(--neon-border-color),
inset 0 0 2rem var(--neon-border-color),
0 0 4rem var(--neon-border-color),
inset 0 0 4rem var(--neon-border-color);
}

20%, 24%, 55% {
text-shadow: none;
box-shadow: none;
}
}

open

3. CSS NEON

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

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

Разметка HTML

<div class="sign">
<span class="sign__word">no</span>
<span class="sign__word">festival</span>
<span class="sign__word">today</span>
</div>

Стили CSS

/*-- Sign Styles --*/
.sign {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&__word {
font-size: 5.6rem;
text-align: center;
line-height: 1;
color: #c6e2ff;
animation: neon .08s ease-in-out infinite alternate;
}
}
/*-- Animation Keyframes --*/
// animation
@keyframes neon {
from {
text-shadow:
0 0 6px rgba(202,228,225,0.92),
0 0 30px rgba(202,228,225,0.34),
0 0 12px rgba(30,132,242,0.52),
0 0 21px rgba(30,132,242,0.92),
0 0 34px rgba(30,132,242,0.78),
0 0 54px rgba(30,132,242,0.92);
}
to {
text-shadow:
0 0 6px rgba(202,228,225,0.98),
0 0 30px rgba(202,228,225,0.42),
0 0 12px rgba(30,132,242,0.58),
0 0 22px rgba(30,132,242,0.84),
0 0 38px rgba(30,132,242,0.88),
0 0 60px rgba(30,132,242,1);
}
}
no festival today

4. Неоновый эффект

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

Разметка HTML

<div class="container">
<h1 class="neon">Все, что вы хотите, это на другой стороне страха</h1>
</div>

Стили CSS

h1 {
font-weight: 400;
text-align: center;
text-transform: uppercase;
}
.neon {
color: #fff;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #fff,
0 0 40px #0ff,
0 0 80px #0ff,
0 0 90px #0ff,
0 0 100px #0ff,
0 0 150px #0ff;
}

ВсЁ, что вы хотите,
это на другой стороне страха

5. НЕОНОВЫЙ ПОТОК

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

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

Разметка HTML

<div class="container">
<div class="neon">Neon </div>
<div class="flux">Flux </div>
</div>

Стили CSS

@font-face {
font-family: neon;
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf);
}
<.container br=""> display: table-cell;
text-align: center;
vertical-align: middle;
}
.neon {
font-family: neon;
color: #FB4264;
font-size: 9vw;
line-height: 9vw;
text-shadow: 0 0 3vw #F40A35;
}
.flux {
font-family: neon;
color: #426DFB;
font-size: 9vw;
line-height: 9vw;
text-shadow: 0 0 3vw #2356FF;
}
.neon {
animation: neon 1s ease infinite;
-moz-animation: neon 1s ease infinite;
-webkit-animation: neon 1s ease infinite;
}
@keyframes neon {
0%,
100% {
text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
color: #FED128;
}
50% {
text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
color: #806914;
}
}
.flux {
animation: flux 2s linear infinite;
-moz-animation: flux 2s linear infinite;
-webkit-animation: flux 2s linear infinite;
-o-animation: flux 2s linear infinite;
}
@keyframes flux {
0%,
100% {
text-shadow: 0 0 1vw #1041FF, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
color: #28D7FE;
}
50% {
text-shadow: 0 0 .5vw #082180, 0 0 1.5vw #082180, 0 0 5vw #082180, 0 0 5vw #082180, 0 0 .2vw #082180, .5vw .5vw .1vw #0A3940;
color: #146C80;
}
}
Neon
Flux


Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

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

Эффект вращения с помощью CSS3
Эффект вращения с помощью CSS3
CSS3 позволяет создавать разнообразные эффекты на сайтах без использования javascript и громоздкого flesh. Все последние версии современных браузеров позволяют использовать css3 в полном объеме. Если Вы считаете, что посетители вашего сайта люди прогрессивные и пользуются современными браузерами, которые постоянно обновляют, то Вы смело можете использовать новые технологоии и не заботиться о тех, кто все еще живет в прошлом веке и использует IE5…

Имитация стрелочных часов с помощью новых тригонометрических функций CSS sin() и cos ()
Имитация стрелочных часов с помощью новых тригонометрических функций CSS sin() и cos ()
Тригонометрические функции CSS есть в последних версиях Firefox и Safari. Наличие такого рода математической мощи в CSS открывает целую кучу возможностей. В этом материале мы применим пару новых функций: sin()и cos().

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

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

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

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.