How to Create a Paper Sticky Note Using Only CSS3

Developer
Hai Nguyen
Size
2,405 Kb
Views
2,024
  1. How to Create a Paper Sticky Note Using Only CSS3 Previews
  2. How to Create a Paper Sticky Note Using Only CSS3 HTML Codes
  3. How to Create a Paper Sticky Note Using Only CSS3 CSS Codes

How do I make an how to create a paper sticky note using only css3?

Http://www.2expertsdesign.com/tutorials/how-to-create-a-paper-sticky-note-using-only-css3. What is a how to create a paper sticky note using only css3? How do you make a how to create a paper sticky note using only css3? This script and codes were developed by Hai Nguyen on 29 January 2023, Sunday.

How to Create a Paper Sticky Note Using Only CSS3 Previews
IQ Test

How to Create a Paper Sticky Note Using Only CSS3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>How to Create a Paper Sticky Note Using Only CSS3</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Sticky Paper</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">	<div class="paper">	<div class="tape"></div>	<div class="red-line first"></div>	<div class="red-line"></div>	<ul id="lines">	<li></li>	<li>Please don`t forget to</li>	<li>buy some food</li>	<li></li>	<li>Thanks</li>	<li></li>	<li></li>	</ul>	<div class="left-shadow"></div>	<div class="right-shadow"></div>	</div><!--end paper-->
</div><!--end container-->
</body>
</html>
</body>
</html>

How to Create a Paper Sticky Note Using Only CSS3 - Script Codes CSS Codes

/* Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, font, img, ul, li {	margin: 0;	padding: 0;	border: 0;	outline: 0;	font-size: 100%;	vertical-align: baseline;	background: transparent;
}
body {	line-height: 1;
}
ul {	list-style-type:none;
}
/* Content */
body {	background:url(bg.jpg) repeat scroll 0 0;
}
#container {	width:320px;	margin:0 auto;	padding-top:200px;
}
.paper {	position:relative;	width:300px;	height:250px;	background-color:#faf8e5;	border:1px solid #e3e3e3;
}
.red-line {	height:250px;	width:1px;	background-color:#ef8b8b;	float:left;	margin-left:4px;
}
.first {	margin-left:40px;
}
ul#lines {	margin-top:40px;
}
ul#lines li {	height:28px;	line-height:28px;	color:#4d84c8;	font-family:Georgia;	font-style:italic;	font-size:16px;	width:225px;	border-top:1px solid #f2f0df;	padding-left:75px;
}
.tape{	position:absolute;	top:-15px; right:80px;	width: 130px;	height: 35px;	background-color:#fff;	opacity:0.6;	border-left: 1px dashed rgba(0, 0, 0, 0.1);	border-right: 1px dashed rgba(0, 0, 0, 0.1);	-webkit-box-shadow: 0px 0px 1px 0px #cccccc;	-moz-box-shadow: 0px 0px 1px 0px #cccccc;	box-shadow: 0px 0px 1px 0px #cccccc;	-webkit-transform: rotate(-2deg) skew(0,0) translate(0%,-5px);	-moz-transform: rotate(-2deg) skew(0,0) translate(0%,-5px);	-o-transform: rotate(-2deg) skew(0,0) translate(0%,-5px);	transform: rotate(-2deg) skew(0,0) translate(0%,-5px);
}
.left-shadow{	width: 140px;	height: 140px;	bottom:-5px; left:-12px;	position:absolute;	z-index:-6;	display: inline-block;	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);	-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);	box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);	-moz-transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);	-webkit-transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);	-o-transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);	-ms-transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);	transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);
}
.right-shadow{	width: 140px;	height: 140px;	bottom:-13px; right:-4px;	position:absolute;	z-index:-6;	display: inline-block;	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);	-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);	box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);	-moz-transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);	-webkit-transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);	-o-transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);	-ms-transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);	transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);
}
How to Create a Paper Sticky Note Using Only CSS3 - Script Codes
How to Create a Paper Sticky Note Using Only CSS3 - Script Codes
Home Page Home
Developer Hai Nguyen
Username HaiNguyen007
Uploaded January 29, 2023
Rating 3
Size 2,405 Kb
Views 2,024
Do you need developer help for How to Create a Paper Sticky Note Using Only CSS3?

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!

Hai Nguyen (HaiNguyen007) Script Codes
Name
Sticky footer without fixed height
Sticky notes with CSS3
A Pen by Hai Nguyen
Creating Different CSS3 Box Shadows Effects
Sticky section header
Create a stunning menu in CSS3
Ribbons with Dynamic Text
CSS Ribbon Headings
Fixed Header Shadow
Css-sticky-notes
Create amazing art & images 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!