Among various design elements, text areas play a crucial role, especially in forms, blogs, and forums where users input text. Designing these elements to be visually appealing can enhance usability and make your site stand out.
In this blog post, we’ll guide you through creating a paper-like text area using HTML and CSS, giving your website a unique, tactile feel reminiscent of writing on actual paper.
Step1: Text Area within a Paper-Themed Design
This HTML code creates a text area that automatically gains focus when the page loads, styled to emulate a piece of paper, encouraging users to start writing immediately. It’s encapsulated within a div styled as “paper” for aesthetic appeal.
<div class="paper"> <div class="paper-content"> <textarea autofocus>Write! Whatever you want all textarea is for you.</textarea> </div> </div>
Step2: Stylish Notebook-like Web Interface with CSS
This CSS code snippet transforms a webpage into a notebook-like interface, featuring a paper-themed div with a unique spiral binding effect and a textarea styled with a custom font, all set against a tranquil aqua background. It employs external fonts and detailed styling to create a visually engaging and interactive user experience.
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Handlee);
body {
margin: 40px 0 0;
background: #91D1D3;
font-family: 'Roboto', sans-serif;
}
.paper {
position: relative;
width: 90%;
max-width: 800px;
min-width: 400px;
height: 480px;
margin: 0 auto;
background: #fafafa;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,.3);
overflow: hidden;
}
.paper:before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 60px;
background: radial-gradient(#575450 6px, transparent 7px) repeat-y;
background-size: 30px 30px;
border-right: 3px solid #D44147;
box-sizing: border-box;
}
.paper-content {
position: absolute;
top: 30px; right: 0; bottom: 30px; left: 60px;
background: linear-gradient(transparent, transparent 28px, #91D1D3 28px);
background-size: 30px 30px;
}
.paper-content textarea {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
line-height: 30px;
padding: 0 10px;
border: 0;
outline: 0;
background: transparent;
color: mediumblue;
font-family: 'Handlee', cursive;
font-weight: bold;
font-size: 18px;
box-sizing: border-box;
z-index: 1;
}
footer {
margin-top: 30px;
text-align: center;
font-size: 12px;
color: rgba(0,0,0,.6);
}
footer a {
color: rgba(255,255,255,.8);
}Designing a Paper Style HTML Textarea Demo
By following these steps, you can create a visually appealing, paper-like textarea for your website, enhancing the overall user experience. This method is a simple way to add character and uniqueness to your web design, making your forms, comments section, or any text input area more engaging for users.
