In the web design, sometimes we want our writing to look a little unique not just in general text. So today we will create a new neon signs text effect. That looks a lot like the colorful lights burning on the shops signboard.
This effect is styled through CSS in such a way that it seems that the text is spreading light. We will make the text shining using a combination of color glow, shadow and brightness.
Not only that, we will add animation so that it will become more realistic.
Live demo:
Below is a live demo that will help you understand how the look neon signs text effect.
HTML:
We will only create a span element with a text class. HTML is the end here.
<span class="text">CSS Neon Signs</span>Stylesheet (CSS):
Importing font:Let us start by importing a font. First we will import the Sacramento Google Font. Sacramento is a cursive font, which looks a lot like the logo on a store sign.
@import url('https://fonts.googleapis.com/css?family=Sacramento');We brought the whole body to the center with the Flexbox method so that the text or content is always in the middle of the screen. And with 'overflow' no additional part can be seen on the screen.
Now the real fun is the CSS background-image property. Here we will use CSS Repeating-Linear-Gradient propriety. This gradient has actually created a lot of retro Glychi TV scan line effects.
Transparent 7px means the first 7px place will remain blank. At the end of the transparent 13px, the cycle is finished.
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
background: #222;
background-image: repeating-linear-gradient(
to bottom,
transparent 7px,
#000000cc 9px,
#000000cc 13px,
transparent 13px);
}We will give the text color hex code '#A9F4ff'. That means a faint blue light, which looks a lot like the glow-light on a signboard. For the font we have used Sacramento, which has been imported from Google Font. With Font Weight 600, we will show the text big and thick, so that the light is spreading.
The most interesting part is animation. A custom animation is used here. That we will define with @keyframes after this. Animation is blinking the text repeatedly, as it seems that the original NEON signboard is hanging on the wall and occasionally the light is teeming.
.text{
color: #a9f4ff;
font-family: 'Sacramento', cursive;
font-size: 120px;
font-weight: 600;
text-align: center;
text-transform: capitalize;
margin: 20px auto 0;
animation: animate 2s ease-in-out infinite;
}This time we will create a heartbeat of text. Keyframes animate is the animation rule where the color of the text and the shadow are being changed. 20%, 24%, and 55% of the text will be black, and there will be no shadow. This means that the NEON sign has stopped in those moments.
Other times, such as 0%, 19%, 21%, 23%, 25%, 54%, 56%, and 100%, it will give light blue light again. And added text shadow.
Once everything happens, the text will look like the real neon sign, where the light sometimes goes down and burns.
@keyframes animate{
20%, 24%, 55%{
color: #111;
text-shadow: none;
}
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
color: #a9f4ff;
text-shadow: 0 0 5px #000cff,
0 0 15px #0052ff,
0 0 20px #00c8ff,
0 0 40px #008dff,
0 0 60px #000cff,
0 0 10px #00ffb4,
0 0 98px #0000ff;
}
}Answering one of the common questions, ‘What is the default value of text-shadow?’
– none.
‘Can i give multiple shadows?’
– Multiple shadows can be given by separating them with a comma (,).
Must Popular Text Effects:
- Neon Typography with CSS Only
- Candy Cane Text Effect Using CSS
- 5 Cool CSS Text Effects You Must Try
Today we are ending the css neon signs tutorial here, and if you have any questions about the text effect, you can share your feelings in the comments. You can follow our YouTube channel to get more updates about the CODEHEMU tutorial. I ended the tutorial Namaste🙏
Post a Comment