Блог

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

Представляю вашему вниманию бесплатные неоновые эффекты для текста на 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

По материалам сайта freefrontend.com

Понравилась статья? Поделитесь

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

  • Эффект вращения с помощью CSS3

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

  • Градиентная обводка блока на CSS

    Как сделать красивую градиентную обводку блока на одном только CSS? Для этого мы сделаем следующее:

    1. Создадим div.linear-gradient с градиентным фоном;

    2. Создадим внутренний блок div с небольшим отступом.

Наши услуги по созданию сайтов

WEB ДИЗАЙН

Разработка дизайна сайта. Использование шаблонов для "быстрых" проектов.

ПОДДЕРЖКА САЙТА

Поддержка работоспособности и безопасности. Написание текстов и статей. Наполнение товаром.

ШАБЛОНЫ САЙТОВ

Шаблоны интернет-магазинов и корпоративных сайтов на HostCMS

ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ

Графический дизайн (разработка логотипа). Написание seo-текстов. Редизайн сайта. Замена CMS. Кодинг