Paper Book with Folded Corner

Developer
A S P
Size
3,129 Kb
Views
4,048
  1. Paper Book with Folded Corner Previews
  2. Paper Book with Folded Corner HTML Codes
  3. Paper Book with Folded Corner CSS Codes

How do I make an paper book with folded corner?

Open paper book with a folded corner in CSS.. What is a paper book with folded corner? How do you make a paper book with folded corner? This script and codes were developed by A S P on 15 January 2023, Sunday.

Paper Book with Folded Corner Previews
IQ Test

Paper Book with Folded Corner - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Paper Book with Folded Corner</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="book"> <div class="paper"> <div class="paperCorner"> <div class="paperCornerClip"></div> <div class="paperCornerBackground"></div> </div> <div class="paperContent"> <div class="paperContentPage"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus nisi, sollicitudin vitae dui eu, maximus tristique nibh. Morbi blandit lobortis massa sit amet tempor. Sed fringilla mollis urna. </p> <p> Vivamus varius lectus vulputate dui viverra commodo. Proin feugiat nulla porttitor orci consequat elementum. Duis nec ex vel metus aliquet aliquam. Ut mauris diam, lacinia vitae est vel, placerat fermentum tortor. </p> <p> Nullam volutpat purus id velit cursus fermentum. Sed turpis dui, ullamcorper nec egestas id, lobortis vel eros. </p> <p> Pellentesque luctus urna nec sem imperdiet suscipit. Nulla ac blandit sem. Proin ipsum tellus, molestie rhoncus nulla at, fermentum viverra tellus. </p> </div> <div class="paperContentPage"> <p> Etiam mi elit, aliquet nec lorem placerat, vulputate egestas lectus. Nullam aliquam elit sed felis fermentum sollicitudin. Aenean dapibus ante id eros commodo bibendum. Praesent gravida, dui vel facilisis convallis, urna dolor cursus leo, sit amet placerat massa nunc at urna. </p> <p> Praesent imperdiet interdum mi in semper. Curabitur ultricies, velit nec maximus accumsan, est lectus accumsan libero, nec consectetur enim dolor eu justo. Sed sed convallis elit. Vivamus est est, rutrum et felis a, blandit euismod turpis. </p> <p> Aliquam maximus id ex dapibus accumsan. Ut maximus quam ligula, vitae rhoncus mi commodo sit amet. Phasellus rhoncus hendrerit sollicitudin. Suspendisse potenti. Morbi ac luctus dolor. In quis lorem massa. </p> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Paper Book with Folded Corner - Script Codes CSS Codes

body
{ background-color: #000;
}
.book
{ margin: 10px auto; width: 600px; height: 400px; padding: 8px; background-color: #662222; border: 1px #4F0200 solid; border-radius: 7px; background: rgb(102,34,34);
background: -moz-linear-gradient(left, rgba(102,34,34,1) 0%, rgba(102,22,22,1) 25%, rgba(102,34,34,1) 42%, rgba(102,34,34,1) 42%, rgba(79,2,0,1) 43%, rgba(102,22,22,1) 44%, rgba(102,22,22,1) 51%, rgba(102,22,22,1) 56%, rgba(79,2,0,1) 57%, rgba(79,2,0,1) 57%, rgba(102,34,34,1) 58%, rgba(102,34,34,1) 58%, rgba(102,22,22,1) 75%, rgba(102,34,34,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(102,34,34,1)), color-stop(25%,rgba(102,22,22,1)), color-stop(42%,rgba(102,34,34,1)), color-stop(42%,rgba(102,34,34,1)), color-stop(43%,rgba(79,2,0,1)), color-stop(44%,rgba(102,22,22,1)), color-stop(51%,rgba(102,22,22,1)), color-stop(56%,rgba(102,22,22,1)), color-stop(57%,rgba(79,2,0,1)), color-stop(57%,rgba(79,2,0,1)), color-stop(58%,rgba(102,34,34,1)), color-stop(58%,rgba(102,34,34,1)), color-stop(75%,rgba(102,22,22,1)), color-stop(100%,rgba(102,34,34,1)));
background: -webkit-linear-gradient(left, rgba(102,34,34,1) 0%,rgba(102,22,22,1) 25%,rgba(102,34,34,1) 42%,rgba(102,34,34,1) 42%,rgba(79,2,0,1) 43%,rgba(102,22,22,1) 44%,rgba(102,22,22,1) 51%,rgba(102,22,22,1) 56%,rgba(79,2,0,1) 57%,rgba(79,2,0,1) 57%,rgba(102,34,34,1) 58%,rgba(102,34,34,1) 58%,rgba(102,22,22,1) 75%,rgba(102,34,34,1) 100%);
background: -o-linear-gradient(left, rgba(102,34,34,1) 0%,rgba(102,22,22,1) 25%,rgba(102,34,34,1) 42%,rgba(102,34,34,1) 42%,rgba(79,2,0,1) 43%,rgba(102,22,22,1) 44%,rgba(102,22,22,1) 51%,rgba(102,22,22,1) 56%,rgba(79,2,0,1) 57%,rgba(79,2,0,1) 57%,rgba(102,34,34,1) 58%,rgba(102,34,34,1) 58%,rgba(102,22,22,1) 75%,rgba(102,34,34,1) 100%);
background: -ms-linear-gradient(left, rgba(102,34,34,1) 0%,rgba(102,22,22,1) 25%,rgba(102,34,34,1) 42%,rgba(102,34,34,1) 42%,rgba(79,2,0,1) 43%,rgba(102,22,22,1) 44%,rgba(102,22,22,1) 51%,rgba(102,22,22,1) 56%,rgba(79,2,0,1) 57%,rgba(79,2,0,1) 57%,rgba(102,34,34,1) 58%,rgba(102,34,34,1) 58%,rgba(102,22,22,1) 75%,rgba(102,34,34,1) 100%);
background: linear-gradient(to right, rgba(102,34,34,1) 0%,rgba(102,22,22,1) 25%,rgba(102,34,34,1) 42%,rgba(102,34,34,1) 42%,rgba(79,2,0,1) 43%,rgba(102,22,22,1) 44%,rgba(102,22,22,1) 51%,rgba(102,22,22,1) 56%,rgba(79,2,0,1) 57%,rgba(79,2,0,1) 57%,rgba(102,34,34,1) 58%,rgba(102,34,34,1) 58%,rgba(102,22,22,1) 75%,rgba(102,34,34,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#662222', endColorstr='#662222',GradientType=1 );
}
.paper
{ width: 600px; height: 400px; border-bottom-left-radius: 5px; position: relative; overflow: hidden; background: rgb(246,246,246);
background: -moz-linear-gradient(left, rgba(246,246,246,1) 0%, rgba(255,255,242,1) 10%, rgba(240,240,240,1) 30%, rgba(255,255,242,1) 42%, rgba(187,187,187,1) 48%, rgba(85,85,85,1) 50%, rgba(204,204,204,1) 52%, rgba(255,255,242,1) 58%, rgba(240,240,240,1) 70%, rgba(255,255,242,1) 90%, rgba(246,246,246,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(246,246,246,1)), color-stop(10%,rgba(255,255,242,1)), color-stop(30%,rgba(240,240,240,1)), color-stop(42%,rgba(255,255,242,1)), color-stop(48%,rgba(187,187,187,1)), color-stop(50%,rgba(85,85,85,1)), color-stop(52%,rgba(204,204,204,1)), color-stop(58%,rgba(255,255,242,1)), color-stop(70%,rgba(240,240,240,1)), color-stop(90%,rgba(255,255,242,1)), color-stop(100%,rgba(246,246,246,1)));
background: -webkit-linear-gradient(left, rgba(246,246,246,1) 0%,rgba(255,255,242,1) 10%,rgba(240,240,240,1) 30%,rgba(255,255,242,1) 42%,rgba(187,187,187,1) 48%,rgba(85,85,85,1) 50%,rgba(204,204,204,1) 52%,rgba(255,255,242,1) 58%,rgba(240,240,240,1) 70%,rgba(255,255,242,1) 90%,rgba(246,246,246,1) 100%);
background: -o-linear-gradient(left, rgba(246,246,246,1) 0%,rgba(255,255,242,1) 10%,rgba(240,240,240,1) 30%,rgba(255,255,242,1) 42%,rgba(187,187,187,1) 48%,rgba(85,85,85,1) 50%,rgba(204,204,204,1) 52%,rgba(255,255,242,1) 58%,rgba(240,240,240,1) 70%,rgba(255,255,242,1) 90%,rgba(246,246,246,1) 100%);
background: -ms-linear-gradient(left, rgba(246,246,246,1) 0%,rgba(255,255,242,1) 10%,rgba(240,240,240,1) 30%,rgba(255,255,242,1) 42%,rgba(187,187,187,1) 48%,rgba(85,85,85,1) 50%,rgba(204,204,204,1) 52%,rgba(255,255,242,1) 58%,rgba(240,240,240,1) 70%,rgba(255,255,242,1) 90%,rgba(246,246,246,1) 100%);
background: linear-gradient(to right, rgba(246,246,246,1) 0%,rgba(255,255,242,1) 10%,rgba(240,240,240,1) 30%,rgba(255,255,242,1) 42%,rgba(187,187,187,1) 48%,rgba(85,85,85,1) 50%,rgba(204,204,204,1) 52%,rgba(255,255,242,1) 58%,rgba(240,240,240,1) 70%,rgba(255,255,242,1) 90%,rgba(246,246,246,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f6f6f6',GradientType=1 );
}
.paperCornerBackground
{ position: absolute; top: -30px; right: -30px; height: 30px; width: 30px; border: 30px transparent solid; border-bottom: 30px #662222 solid; box-sizing: border-box; transform: rotate(45deg);
}
.paperCornerClip
{ position: absolute; top: 0px; right: 0px; height: 40px; width: 40px; background-color: #ffffee; transform: rotate(0deg); box-shadow: 0px 1px 8px 2px #888888;
}
.paperContent
{ width: 600px; height: 400px;
}
.paperContentPage
{ width: 250px; height: 350px; margin: 25px; box-sizing: border-box; float: left; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; text-align: justify; text-indent: 20px; font-size: 0.8em; color: #000;
}
.paperContentPage p
{ margin: 2px;
}
Paper Book with Folded Corner - Script Codes
Paper Book with Folded Corner - Script Codes
Home Page Home
Developer A S P
Username asp
Uploaded January 15, 2023
Rating 3
Size 3,129 Kb
Views 4,048
Do you need developer help for Paper Book with Folded Corner?

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!

A S P (asp) Script Codes
Name
Grid with Fixed and Resizable Columns
Stargate CSS
Monster Name Generator
KeyPad
Keyboard Controls
Laser Underline Hover Menu
SVG Snowman
Combination Lock
Background Patterns
Dr. Puyo
Create amazing web content 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!