Hello Coders, after some days i develop another interesting thing called Glowing Text using CSS and HTML5.
I hope you all are like it and give some comments and tell some improvements about the tech.
So let’s get started to see what i do with CSS and Html5, see below code,
Glowing.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>Glowing Text</title> <link rel="stylesheet" type="text/css" href="glowing.css"> </head> <body> <h1> <span>D</span> <span>I</span> <span>V</span> <span>A</span> <span>K</span> <span>A</span> <span>R</span> </h1> </body> </html> |
On this html you can use your name or anything, if you increase the number of alphabet than you have to change on CSS also. By the way this is my friend’s name.
glowing.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
body{ margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background:#000; font-family: 'Bad Script',cursive; } h1{ margin: 0; padding: 0 color:#111; font-size: 16em; } h1 span{ display: table-cell; margin: 0; padding:0; animation: animate 2s linear infinite; } <span style="color: #008000"><strong>//You have to change on these list of child css which i talk about on above lines</strong></span> h1 span:nth-child(1){ animation-delay:0s; } h1 span:nth-child(2){ animation-delay:0.25s; } h1 span:nth-child(3){ animation-delay:0.5s; } h1 span:nth-child(4){ animation-delay:0.75s; } h1 span:nth-child(5){ animation-delay:1s; } h1 span:nth-child(6){ animation-delay:1.25s; } h1 span:nth-child(7){ animation-delay:1.50s; } @keyframes animate { 0%,100%{ color:#fff; filter:blur(2px); text-shadow: 0 0 10px #00b3ff, 0 0 20px #00b3ff, 0 0 40px #00b3ff, 0 0 80px #00b3ff, 0 0 120px #00b3ff, 0 0 200px #00b3ff, 0 0 300px #00b3ff, 0 0 400px #00b3ff; } 5%,95%{ color:#111; filter:blur(0px); text-shadow: none; } } |
Now you check out this code, copy and paste code on your Sublime Text than run this and comment below how’s it..
Happy Coding..!
Was this article helpful?
YesNo
Image hover effect- fill color on image using CSS and HTML 
Thanks..!
Does your website have a contact page? I’m having problems locating
it but, I’d like to shoot you an email. I’ve got some recommendations for your blog you might be
interested in hearing. Either way, great site and
I look forward to seeing it improve over time.
Thanks,
I integrated contact page soon.
You can contact me through mail phpcodertech@gmail.com