Chicken Neon

Developer
Brosis Mosis
Size
3,465 Kb
Views
4,048
  1. Chicken Neon Previews
  2. Chicken Neon HTML Codes
  3. Chicken Neon CSS Codes
  4. Chicken Neon JS Codes

How do I make an chicken neon?

What is a chicken neon? How do you make a chicken neon? This script and codes were developed by Brosis Mosis on 30 January 2023, Monday.

Chicken Neon Previews
IQ Test

Chicken Neon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Chicken Neon</title> <link href="https://fonts.googleapis.com/css?family=Ravi+Prakash" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="text-effect"> <!-- Select the text in the preview and type in your own --> <h1 class="neon" data-text="Chicken" contenteditable>Chicken</h1> <div class="gradient"></div> <div class="spotlight"></div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Chicken Neon - Script Codes CSS Codes

.text-effect { overflow: hidden; position: relative; filter: contrast(110%) brightness(190%);
}
.neon { position: relative; background: black; color: transparent;
}
.neon::before, .neon::after { content: attr(data-text); color: white; filter: blur(0.02em); position: absolute; top: 0; left: 0; pointer-events: none;
}
.neon::after { mix-blend-mode: difference;
}
.gradient,
.spotlight { position: absolute; top: 0; left: 0; bottom: 0; right: 0; pointer-events: none; z-index: 10;
}
.gradient { background: linear-gradient(45deg, orange, brown); mix-blend-mode: multiply;
}
.spotlight { animation: light 5s infinite linear; background: radial-gradient(circle, #ffffff, rgba(0, 0, 0, 0) 25%) 0 0/25% 25%, radial-gradient(circle, #ffffff, #000000 25%) 50% 50%/12.5% 12.5%; top: -100%; left: -100%; mix-blend-mode: color-dodge;
}
@keyframes light { 100% { transform: translate3d(50%, 50%, 0); }
}
.neon { font: 700 220px 'Ravi Prakash', cursive; text-transform: uppercase; text-align: center; margin: 0;
}
.neon:focus { outline: none; border: 1px dotted white;
}
body { background: black; display: flex; min-height: 100vh; justify-content: center; align-content: center; align-items: center;
}

Chicken Neon - Script Codes JS Codes

// This is just to auto-update the data-text if you're editing it directly on the page and is not required for the actual effect
$('[data-text]').on('keyup', function(){ $(this).attr('data-text', $(this).text());
});
Chicken Neon - Script Codes
Chicken Neon - Script Codes
Home Page Home
Developer Brosis Mosis
Username kermet24
Uploaded January 30, 2023
Rating 3
Size 3,465 Kb
Views 4,048
Do you need developer help for Chicken Neon?

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!

Brosis Mosis (kermet24) Script Codes
Name
Freee Code Camp Leader Board
Dude me coool
Infanite runner
Weather
Gabe Newell
Abigail Adams
Chicken
Rpg fail
Brosis Mosis Portfilo
Star wars -includes mickey mouse
Create amazing marketing copy 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!