Glow Text

Developer
Truman Heberle
Size
3,084 Kb
Views
16,192
  1. Glow Text Previews
  2. Glow Text HTML Codes
  3. Glow Text CSS Codes
  4. Glow Text JS Codes

How do I make an glow text?

What is a glow text? How do you make a glow text? This script and codes were developed by Truman Heberle on 30 September 2022, Friday.

Glow Text Previews
IQ Test

Glow Text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Glow Text</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form id='form'> Enter Phrase<br> <input id='input' type="text" name="firstname"><br>
</form>
<div id='text'>Example Text</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Glow Text - Script Codes CSS Codes

body { background: radial-gradient(#8a0000 4%, #5c0000 9%, rgba(102, 0, 0, 0) 9%) 0 0, radial-gradient(#8a0000 4%, #5c0000 8%, rgba(102, 0, 0, 0) 10%) 50px 50px, radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)) 50px 0, radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)) 0 50px, radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%) 50px 0, radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%) 100px 50px, radial-gradient(rgba(77, 0, 0, 0.7), rgba(102, 0, 0, 0)) 0 0, radial-gradient(rgba(77, 0, 0, 0.7), rgba(102, 0, 0, 0)) 50px 50px, linear-gradient(45deg, rgba(102, 0, 0, 0) 49%, #000000 50%, rgba(102, 0, 0, 0) 70%) 0 0, linear-gradient(-45deg, rgba(102, 0, 0, 0) 49%, #000000 50%, rgba(102, 0, 0, 0) 70%) 0 0; background-color: #300; background-size: 100px 100px;
}
@font-face { font-family: 'Electrolize'; font-style: normal; font-weight: 400; src: local('Electrolize'), local('Electrolize-Regular'), url(http://themes.googleusercontent.com/static/fonts/electrolize/v2/DDy9sgU2U7S4xAwH5thnJ4bN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
#form { color: white; position: relative; text-align: center; font-family: 'Electrolize'; font-weight: bold;
}
#input { position: relative; text-align: center; font-family: 'Electrolize'; font-weight: bold;
}
#text { color: white; position: relative; margin-top: 10px; height: 200px; width: 100%; font-size: 200px; text-align: center; font-family: 'Electrolize'; font-weight: bold; animation: sparkle 3s infinite;
}
@keyframes sparkle { 0% { text-shadow: 0 0 30px #FFF000; } 40% { text-shadow: 0 0 50px #FFF000; } 50% { text-shadow: 0 0 30px #FFF000; } 60% { text-shadow: 0 0 50px #FFF000; } 100% { text-shadow: 0 0 30px #FFF000; }
}

Glow Text - Script Codes JS Codes

var input = document.getElementById('input');
var text = document.getElementById('text');
var form = document.getElementById('form');
var width = $(window).width();
$("input").keypress(function(event) { if (event.which == 13) { event.preventDefault(); word = input.value; text.innerHTML = word.toString(); form.reset(); animate('#text'); }
});
function animate(element){ $(element).animate({ left: -width, color: '#000000' }, 0); $(element).animate({ left: 0, color: '#f8f8ff' }, 1000);
}
Glow Text - Script Codes
Glow Text - Script Codes
Home Page Home
Developer Truman Heberle
Username trumanheberle
Uploaded September 30, 2022
Rating 3
Size 3,084 Kb
Views 16,192
Do you need developer help for Glow Text?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Truman Heberle (trumanheberle) Script Codes
Name
Digit Recognizer
A Pen by Truman Heberle
Minecraft Chunk Generator
Rubix Cube Basic
Minecraft Loader
GremRX
One Word Story
Liquid
Rubix Cube New
Orbitals
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!