Back
Craft an imaginative input field inspired by the mesmerizing undulations of plasma waves, blending Glassmorphism with tactile feedback.
input field. Begin by defining a container to perfectly center the input within the page.
<div class="plasma-wave-container">
<input type="text" class="plasma-wave-input" aria-label="Plasma Wave Text Input" placeholder="Type something amazing...">
</div>
The aria-label ensures our input is accessible by describing its function to screen readers.
.plasma-wave-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 50px 0;
}
.plasma-wave-input {
padding: 15px 20px;
border: none;
border-radius: 30px;
font-size: 16px;
color: #333;
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s, transform 0.3s;
outline: none;
}
.plasma-wave-input.focused {
box-shadow: 0 0 15px rgb(63, 94, 251), 0 0 25px rgb(70, 229, 184);
transform: translateY(-2px);
}
The :focus pseudo-class provides visual feedback, letting users visually detect interaction through the varied glow and subtle translation.
document.querySelector('.plasma-wave-input').addEventListener('focus', function() {
this.classList.add('focused');
});
document.querySelector('.plasma-wave-input').addEventListener('blur', function() {
this.classList.remove('focused');
});
By dynamically adding and removing the focused class, we activate the visual transitions upon interacting with the input.Interactive elements are accessible with description, color changes for focused states, and a smooth user-friendly experience with no jarring changes, respecting those with motion restrictions.
<div class="plasma-wave-container">
<input type="text" class="plasma-wave-input" aria-label="Plasma Wave Text Input" placeholder="Type something amazing...">
</div>
<script>
document.querySelector('.plasma-wave-input').addEventListener('focus', function() {
this.classList.add('focused');
});
document.querySelector('.plasma-wave-input').addEventListener('blur', function() {
this.classList.remove('focused');
});
</script>
<style>
.plasma-wave-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 50px 0;
}
.plasma-wave-input {
padding: 15px 20px;
border: none;
border-radius: 30px;
font-size: 16px;
color: #333;
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s, transform 0.3s;
outline: none;
}
.plasma-wave-input.focused {
box-shadow: 0 0 15px rgb(63, 94, 251), 0 0 25px rgb(70, 229, 184);
transform: translateY(-2px);
}
</style>
Thank you for reading this article.
Comments