CSS HTML

Fancy Neon Text Effects with CSS3

September 23, 2018 Web Design Comments(18)

Did you ever want to create fancy neon effects? No? Well…to bad I’ll explain how to create them anyways. Neon text mostly is achieved by using the CSS3 property “text-shadow” on multiple layers and a saturated colour, as well as some animations to look more realistic.

Live Example

The most important are the “text-shadow” – We won’t use it for an actual shadow but for the glow effect of the text. Each line in the value represents one of the radiuses of the glow (i.e. The first line creates the glow with a 10px radius). In most cases we want the inner shadows to be a brighter version of the colour or even white, while the outer ones have the neon-color.

body{

background-color:#424242;

}

.neon{

text-align:center;

font-size:40px;

margin:20px 0 20px 0;

color:#ffffff;

/*Glow*/

text-shadow: 0 0 10px #ffffff,

0 0 20px #ffffff,

0 0 30px #ffffff,

0 0 40px #228DFF,

0 0 70px #228DFF,

0 0 80px #228DFF,

0 0 100px #228DFF,

0 0 150px #228DFF;

}

If we want, we can also animate this!

We want to use an “animation” attribute here for the glow effect, don’t forget the vendor prefixes “-webkit-” and “-moz-“! Right now the animation still needs its key frames to work

.neon{

text-align:center;

font-size:40px;

margin:20px 0 20px 0;

color:#ffffff;

text-shadow: 0 0 10px #ffffff,

0 0 20px #ffffff,

0 0 30px #ffffff,

0 0 40px #228DFF,

0 0 70px #228DFF,

0 0 80px #228DFF,

0 0 100px #228DFF,

0 0 150px #228DFF;

/*Animation*/

-webkit-animation: neonAnimation 1.5s ease-in-out infinite alternate;

-moz-animation: neonAnimation 1.5s ease-in-out infinite alternate;

animation: neonAnimation 1.5s ease-in-out infinite alternate;

}

For the key frames we need to use the vendor prefixes again, like this:

/*Webkit prefix*/
      @-webkit-keyframes neonAnimation {
        from {
          text-shadow: 0 0 10px #ffffff,
                     0 0 20px  #ffffff,
                     0 0 30px  #ffffff,
                     0 0 40px  #228DFF,
                     0 0 70px  #228DFF,
                     0 0 80px  #228DFF,
                     0 0 100px #228DFF,
                     0 0 150px #228DFF;
        }
        to {
          text-shadow: 0 0 5px #ffffff,
                     0 0 10px #ffffff,
                     0 0 15px #ffffff,
                     0 0 20px #228DFF,
                     0 0 35px #228DFF,
                     0 0 40px #228DFF,
                     0 0 50px #228DFF,
                     0 0 75px #228DFF;
        }
      }

/*Moz prefix*/
      @-moz-keyframes neonAnimation {
        from {
          text-shadow: 0 0 10px #ffffff,
                     0 0 20px  #ffffff,
                     0 0 30px  #ffffff,
                     0 0 40px  #228DFF,
                     0 0 70px  #228DFF,
                     0 0 80px  #228DFF,
                     0 0 100px #228DFF,
                     0 0 150px #228DFF;
        }
        to {
          text-shadow: 0 0 5px #ffffff,
                     0 0 10px #ffffff,
                     0 0 15px #ffffff,
                     0 0 20px #228DFF,
                     0 0 35px #228DFF,
                     0 0 40px #228DFF,
                     0 0 50px #228DFF,
                     0 0 75px #228DFF;
        }
      }

/*No prefix*/
      @keyframes neonAnimation {
        from {
          text-shadow: 0 0 10px #ffffff,
                     0 0 20px  #ffffff,
                     0 0 30px  #ffffff,
                     0 0 40px  #228DFF,
                     0 0 70px  #228DFF,
                     0 0 80px  #228DFF,
                     0 0 100px #228DFF,
                     0 0 150px #228DFF;
        }
        to {
          text-shadow: 0 0 5px #ffffff,
                0 0 10px #ffffff,
                0 0 15px #ffffff,
                0 0 20px #228DFF,
                0 0 35px #228DFF,
                0 0 40px #228DFF,
                0 0 50px #228DFF,
                0 0 75px #228DFF;
  }
}

/*Webkit prefix*/

@-webkit-keyframes neonAnimation {

from {

text-shadow: 0 0 10px #ffffff,

0 0 20px #ffffff,

0 0 30px #ffffff,

0 0 40px #228DFF,

0 0 70px #228DFF,

0 0 80px #228DFF,

0 0 100px #228DFF,

0 0 150px #228DFF;

}

to {

text-shadow: 0 0 5px #ffffff,

0 0 10px #ffffff,

0 0 15px #ffffff,

0 0 20px #228DFF,

0 0 35px #228DFF,

0 0 40px #228DFF,

0 0 50px #228DFF,

0 0 75px #228DFF;

}

/*Moz prefix*/

@-moz-keyframes neonAnimation {

from {

text-shadow: 0 0 10px #ffffff,

0 0 20px #ffffff,

0 0 30px #ffffff,

0 0 40px #228DFF,

0 0 70px #228DFF,

0 0 80px #228DFF,

0 0 100px #228DFF,

0 0 150px #228DFF;

}

to {

text-shadow: 0 0 5px #ffffff,

0 0 10px #ffffff,

0 0 15px #ffffff,

0 0 20px #228DFF,

0 0 35px #228DFF,

0 0 40px #228DFF,

0 0 50px #228DFF,

0 0 75px #228DFF;

}

/*No prefix*/

@keyframes neonAnimation {

from {

text-shadow: 0 0 10px #ffffff,

0 0 20px #ffffff,

0 0 30px #ffffff,

0 0 40px #228DFF,

0 0 70px #228DFF,

0 0 80px #228DFF,

0 0 100px #228DFF,

0 0 150px #228DFF;

}

to {

text-shadow: 0 0 5px #ffffff,

0 0 10px #ffffff,

0 0 15px #ffffff,

0 0 20px #228DFF,

0 0 35px #228DFF,

0 0 40px #228DFF,

0 0 50px #228DFF,

0 0 75px #228DFF;

}

Web Design

CSS DEMOS HTML MYSQL PHP PHP PROJECT

How to Fetch Data in Excel or Generate Excel file in PHP

September 30, 2018October 13, 2018 Web Design

File structure for this tutorial : config.php (database connection file) index.php (For fetching data ) genrate-excel.php (For genrating excel file) Create a sql table tblemployee. Structure of sql table employe .

CREATE TABLE `tblemploye` (

`id` int(11) NOT NULL,

`fullName` varchar(120) NOT NULL,

`emailId` varchar(150) NOT NULL,

`phoneNumber` int(11) NOT NULL,

`department` varchar(100) NOT NULL,

`joiningDate` varchar(100) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `tblemploye`

ADD PRIMARY KEY (`id`);

ALTER TABLE `tblemploye`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

COMMIT;

Now insert some data into this table.

INSERT INTO `tblemploye` (`id`, `fullName`, `emailId`, `phoneNumber`, `department`, `joiningDate`) VALUES

(1, 'Ogbugbu Ejiroghene, 'ogbugbu14@gmail.com', 08154761214, 'IT', '2018-05-01'),

(2, 'Ejiro', 'john@test.com', 45455454, 'HR', '2017-08-12'),

(3, 'Kefe', 'demo@test.com', 23423423, 'Account', '2016-10-01'),

(4, 'Test', 'test@test.com', 834856384, 'IT', '2017-12-01');

Index.php in this file we will read the data from database.

?php

$query=mysqli_query($con,"select * from tblemploye");

$cnt=1;

while ($row=mysqli_fetch_array($query)) {

<tr>

</tr>

<?php

$cnt++;

} ?>

</table>

genrate-excel.php in this […]

18 Replies to “Fancy Neon Text Effects with CSS3”

Ashli Ferguson says:

April 15, 2019 at 3:21 pm

OHHH I like this a lot!! I am going to have to figure this out!

Reply
Tammie Reinhart says:

May 4, 2019 at 5:20 pm

My son loves this kind of stuff. I’m going to show it to him later so he can give it a try!

Reply
1. Web Design says:
  
  May 5, 2019 at 2:14 pm
  
  he is very mush welcome to try.
  
  Reply
Krysten Quiles says:

May 5, 2019 at 11:39 am

Oh I really like that. Thanks so much for sharing this with all of us!

Reply
1. Web Design says:
  
  May 5, 2019 at 2:12 pm
  
  THANKS For stopping by
  
  Reply
Lyosha says:

May 5, 2019 at 5:18 pm

I have to admit I love neon. Clothes, details, design and website text as well. This effect is wonderful!

Reply
sudipa says:

May 5, 2019 at 11:00 pm

Simple and easy to follow steps.People with no knowledge of coding can also follow this

Reply
Owen G says:

May 5, 2019 at 11:39 pm

Nice tutorial. I run an 80s retro site that might benefit from a bit of Neon! Pretty cool effects in CSS.

Reply
Jackline A says:

May 6, 2019 at 1:43 am

Thanks for sharing all this code. I find it very interesting

Reply
Adriana says:

May 6, 2019 at 5:51 am

Neon is the thing right now! This tutorial looks pretty simple. Ill try it.

Reply
maysz says:

May 6, 2019 at 9:19 am

Wow, I like this! I would love to try these codes thanks for sharing!

Reply
1. Web Design says:
  
  May 7, 2019 at 8:43 am
  
  fee free to try and give me feedback. thank you.
  
  Reply
Bree says:

May 6, 2019 at 8:50 pm

This is really helpful! I love neon!

Reply
1. Web Design says:
  
  May 7, 2019 at 8:42 am
  
  thanks a million.
  
  Reply
Lydia Smith says:

May 6, 2019 at 9:30 pm

This is very useful and sounds cool. Would definitely try it out.lynda

Reply
1. Web Design says:
  
  May 7, 2019 at 8:12 am
  
  thanks Lyndia, do well to give feedback when you try it out, our support team is online 24/7 to attend to you.
  
  Reply
Riana says:

May 7, 2019 at 8:00 pm

I definitely want to try this sometime! Thanks so much for this tutorial

Reply
1. Web Design says:
  
  May 7, 2019 at 9:04 pm
  
  feel free to do so, do well to give feedback when you finally try.
  
  Reply