Paper text area

Developer
Fivera
Size
2,064 Kb
Views
4,048
  1. Paper text area Previews
  2. Paper text area HTML Codes
  3. Paper text area CSS Codes

How do I make an paper text area?

What is a paper text area? How do you make a paper text area? This script and codes were developed by Fivera on 31 January 2023, Tuesday.

Paper text area Previews
IQ Test

Paper text area - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>paper text area</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="paper"> <div class="paper-content"> <textarea autofocus>Hello there !&#10;Here's a paper text area, feel free to type something ...</textarea> </div>
</div>
<footer> Orginal pen by <a href="https://codepen.io/MarcMalignan/" target="_blank">Marc Malignan</a> inspired by by Allan Peters
</footer>
</body>
</html>

Paper text area - Script Codes CSS Codes

@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: 390px; 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);
}
Paper text area - Script Codes
Paper text area - Script Codes
Home Page Home
Developer Fivera
Username fivera
Uploaded January 31, 2023
Rating 3
Size 2,064 Kb
Views 4,048
Do you need developer help for Paper text area?

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!

Fivera (fivera) Script Codes
Name
Mac style Doc menu by fivera.net
Simple image crossfade
Webkit decolorize
Pattern example 7
Webkit brithness
Css image viewer
Another brick in the wall
A Pen by Fivera
Shrink
Webkit opacity
Create amazing sales emails 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!