Neon Signs
How do I make an neon signs?
CSS for neon signs. My variation of a completely unoriginal style.. What is a neon signs? How do you make a neon signs? This script and codes were developed by Gunnar Guddal on 06 January 2023, Friday.
Neon Signs - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Neon Signs</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p class="krypton">View with <span class="">Chrome</span></p>
<p> <span class="neon">-NEON-</span><br/> <span class="argon">ARGON</span><br/> <span class="helium">HELIUM</span><br/> <span class="xenon">XENON</span><br/> <span class="krypton">KRYPT<span class="o">O</span>N</span>
</p>
<br/>
<p class="neon">Public<br/>Market</p>
<p class="argon">Aquarium</p>
<p class="xenon">Flower<br/><span class="helium">Shop</span></p>
<p class="neon">Lorem ipsum dolor sit amet, sale posse mediocritatem qui cu, eam et nobis delenit, ea harum invidunt pri. Latine explicari disputando at his, ei appetere erroribus pro, sit iudico civibus minimum ne.</p><br/>
</body>
</html>
Neon Signs - Script Codes CSS Codes
@import 'https://fonts.googleapis.com/css?family=Quicksand:300,400,700';
body{ font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 72px; background: #000; text-align:center; text-transform: uppercase;
}
p{ padding: 20px; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 72px; text-align:center; text-transform: uppercase;
}
.neon{ color:#f9d27b; text-shadow: 0px 0px 20px #cb6034; -webkit-text-fill-color: #f9d27b; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #cb6034;
}
.argon{ color:#bcfffe; text-shadow: 0px 0px 20px #5be; -webkit-text-fill-color: #bcfffe; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #5be;
}
.helium{ color:#d65; text-shadow: 0px 0px 20px #a54946; -webkit-text-fill-color: #fedd9e; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #f9887a;
}
.xenon{ color:#dfd4f5; text-shadow: 0px 0px 20px #7e65ca; -webkit-text-fill-color: #dfd4f5; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #7e65ca;
}
.krypton{ color:#fcd6ca; text-shadow: 0px 0px 20px #755754; -webkit-text-fill-color: #fcd6ca; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #755754;
}
//.o{ color:#000; text-shadow: none;
}
| Developer | Gunnar Guddal |
| Username | thegunnar |
| Uploaded | January 06, 2023 |
| Rating | 3 |
| Size | 2,017 Kb |
| Views | 6,072 |
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!
| Name | Size |
| Simple Landing Page 1.1 | 3,295 Kb |
| Landing Page 1.1 | 2,558 Kb |
| Compact Contact Form | 2,924 Kb |
| Product Slider | 5,334 Kb |
| Sliding Icon Logo | 2,110 Kb |
| Marketplace - Products | 5,312 Kb |
| Marketplace - Recipes | 5,466 Kb |
| Custom Bulleted List Template Skeleton | 4,617 Kb |
| Flex Image Grid with Titles | 1,925 Kb |
| Pure CSS Clipping Shape | 1,962 Kb |
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!
| Name | Username | Size |
| Fixed Scrolling Nav Bar | Philsinatra | 0 Kb |
| Table border-collapse property | Maxds | 1,672 Kb |
| To Do List with Delete | Mattlbrody | 2,068 Kb |
| BlueBox Fork | Huskynation | 12,675 Kb |
| NeeilTimer | Neeilan | 2,836 Kb |
| CSS Bot Confusion | Jpod | 3,456 Kb |
| Monochrome Form | AlienPiglet | 3,096 Kb |
| Starfield old school style | Bolloxim | 5,214 Kb |
| Display properties | Hamzaerbay | 1,886 Kb |
| This in constructor context | _shree33 | 1,718 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!