Back
Learn how to design a whimsical input field that mimics a doodle pad, encouraging creativity and spontaneity with each keystroke.
The Doodle Sketch Input Field is a unique and playful creation that transforms a standard input box into a dynamic canvas for the imagination. In this tutorial, we will explore how to craft this distinctive input component using HTML, CSS, and JavaScript.
We start by building the basic structure with a semantic container and an input field:
<div class="sketch-container"> <input type="text" aria-label="Doodle sketch input" placeholder="Sketch your thoughts..." class="sketch-input"> </div>
This uses semantic structure with a <div> for centering the input and an <input> element with a placeholder.
Our CSS employs a playful dashed border for the input, invoking the feel of a doodle pad. We've also included subtle focus and hover states to enhance interactivity:
.sketch-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 20px;
}
.sketch-input {
width: 80%;
border: 2px dashed #6C7A89;
border-radius: 8px;
font-size: 18px;
padding: 10px;
outline: none;
transition: border-color 0.3s, box-shadow 0.3s;
background-color: transparent;
font-family: 'Comic Sans MS', cursive, sans-serif;
}
.sketch-input:focus {
border-color: #6C7A89;
box-shadow: 0 0 10px #6C7A89;
}
The .sketch-container provides centering and padding, while the .sketch-input boasts styling reminiscent of a sketchbook.
JavaScript adds interactivity with on-focus effects and an innovative use of background imagery upon input:
document.addEventListener('DOMContentLoaded', function() {
let input = document.querySelector('.sketch-input');
input.addEventListener('focus', function() {
input.style.borderColor = 'rgba(108, 122, 137, 0.7)';
input.style.boxShadow = '0 0 10px rgba(108, 122, 137, 0.5)';
});
input.addEventListener('blur', function() {
input.style.borderColor = 'rgba(108, 122, 137, 0.3)';
input.style.boxShadow = 'none';
});
input.addEventListener('input', function() {
input.style.backgroundImage = `url('https://images.unsplash.com/photo-1579546928645-6b08d25ec7b4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxOTk3MTl8MHwxfGFsbHx8fHx8fHx8fHwxNjg2NTQyMTE2&ixlib=rb-1.2.1&q=80&w=200')`;
input.style.backgroundSize = '15px 15px';
input.style.backgroundRepeat = 'repeat';
});
});
The script employs focus and blur events to decorate the input with lively borders and shadows. The input event changes the texture to mimic active sketching on a canvas.
SEO and accessibility are embedded through semantic motifs and aria-labels that ensure descriptive navigation. Our input is not only visually pleasing but fully accessible:
The Doodle Sketch Input Field is a harmonious blend of function and form. It not only captures text but also harnesses creativity, much like a real sketchpad. Follow these steps to bring an element of delight to any user interface.
This whimsical input combines playful aesthetics and practical applications, elevating user experience with imaginative capabilities. Every interaction invites users to sketch and play, bringing a refreshing change from standardized input experiences.
<div class="sketch-container">
<input type="text" aria-label="Doodle sketch input" placeholder="Sketch your thoughts..." class="sketch-input">
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let input = document.querySelector('.sketch-input');
input.addEventListener('focus', function() {
input.style.borderColor = 'rgba(108, 122, 137, 0.7)';
input.style.boxShadow = '0 0 10px rgba(108, 122, 137, 0.5)';
});
input.addEventListener('blur', function() {
input.style.borderColor = 'rgba(108, 122, 137, 0.3)';
input.style.boxShadow = 'none';
});
input.addEventListener('input', function() {
input.style.backgroundImage = `url('https://images.unsplash.com/photo-1579546928645-6b08d25ec7b4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxOTk3MTl8MHwxfGFsbHx8fHx8fHx8fHwxNjg2NTQyMTE2&ixlib=rb-1.2.1&q=80&w=200')`;
input.style.backgroundSize = '15px 15px';
input.style.backgroundRepeat = 'repeat';
});
});
</script>
<style>
.sketch-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 20px;
}
.sketch-input {
width: 80%;
border: 2px dashed #6C7A89;
border-radius: 8px;
font-size: 18px;
padding: 10px;
outline: none;
transition: border-color 0.3s, box-shadow 0.3s;
background-color: transparent;
font-family: 'Comic Sans MS', cursive, sans-serif;
}
.sketch-input:focus {
border-color: #6C7A89;
box-shadow: 0 0 10px #6C7A89;
}
</style>
Thank you for reading this article.
Comments