CSS Page Curl Shadows

Developer
Bottomline Interactive
Size
3,461 Kb
Views
32,384
  1. CSS Page Curl Shadows Previews
  2. CSS Page Curl Shadows HTML Codes
  3. CSS Page Curl Shadows CSS Codes

How do I make an css page curl shadows?

Made possible by: https://twitter.com/pixleight. What is a css page curl shadows? How do you make a css page curl shadows? This script and codes were developed by Bottomline Interactive on 25 September 2022, Sunday.

CSS Page Curl Shadows Previews
IQ Test

CSS Page Curl Shadows - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Page Curl Shadows</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
html {	background: #DEF;	background: -moz-linear-gradient(45deg, #EFF, #DEF);	background: -ms-linear-gradient(45deg, #EFF, #DEF);	background: -webkit-linear-gradient(45deg, #EFF, #DEF);	background: linear-gradient(45deg, #EFF, #DEF);	min-height: 100%;	font-family: "Open Sans", Helvetica, sans-serif;	font-weight: 300;
}
h1, h2 {	font-weight: 400;	text-shadow: 0 1px 0 #FFF;
}
h1 {	width: 800px;	margin: 0 auto;
}
p {	font: 300 13px/20px Arial,sans-serif;	color: #888;
}
.page-curl {	background: #FFFFFF;	background: -moz-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);	background: -ms-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);	background: -webkit-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);	background: linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);	border: 1px solid #777777;	-moz-border-radius: 6px 6px 6px 6px;	-webkit-border-radius: 6px 6px 6px 6px;	border-radius: 6px 6px 6px 6px;	-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);	-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);	box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);	margin: 50px auto;	padding: 15px;	position: relative;	width: 800px;
}
.page-curl:before, .page-curl:after {	background: none;	bottom: 12px;	-moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);	-webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);	box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);	content: "";	height: 10px;	left: 12px;	position: absolute;	width: 40%;	z-index: -1;	-moz-transform: skew(-4deg) rotate(-4deg);	-webkit-transform: skew(-4deg) rotate(-4deg);	transform: skew(-4deg) rotate(-4deg);
}
.page-curl:after {	-moz-transform: skew(4deg) rotate(4deg);	-webkit-transform: skew(4deg) rotate(4deg);	transform: skew(4deg) rotate(4deg);	left: auto;	right: 12px;
}
.page-curl.shadow-left {	background: -moz-linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;	background: -ms-linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;	background: -webkit-linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;	background: linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;
}
.page-curl.shadow-right {	background: -moz-linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;	background: -ms-linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;	background: -webkit-linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;	background: linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;
}
.shadow-bottom:before, .shadow-bottom:after {	top: auto;	bottom: 12px;	-moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);	-webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);	box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
}
.shadow-left:after {	display: none;
}
.shadow-right:before {	display: none;
}
.shadow-top-bottom.shadow-left:after {	display: block;	bottom: auto;	top: 15px;	right: auto;	left: 12px;	-moz-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);	-webkit-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);	box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
}
.shadow-top-bottom.shadow-right:before {	display: block;	bottom: auto;	top: 15px;	right: 12px;	left: auto;	-moz-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);	-webkit-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);	box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="page-curl shadow-bottom">	<h2>Bottom shadow, both sides</h2>	<p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
</div>
<div class="page-curl shadow-bottom shadow-right">	<h2>Bottom shadow, right side</h2>	<p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
</div>
<div class="page-curl shadow-bottom shadow-left">	<h2>Bottom shadow, left side</h2>	<p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
</div>
<div class="page-curl shadow-top-bottom shadow-right">	<h2>Top &amp; Bottom shadow, right side</h2>	<p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
</div>
<div class="page-curl shadow-top-bottom shadow-left">	<h2>Top &amp; Bottom shadow, left side</h2>	<p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

CSS Page Curl Shadows - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
html {	background: #DEF;	background: -moz-linear-gradient(45deg, #EFF, #DEF);	background: -ms-linear-gradient(45deg, #EFF, #DEF);	background: -webkit-linear-gradient(45deg, #EFF, #DEF);	background: linear-gradient(45deg, #EFF, #DEF);	min-height: 100%;	font-family: "Open Sans", Helvetica, sans-serif;	font-weight: 300;
}
h1, h2 {	font-weight: 400;	text-shadow: 0 1px 0 #FFF;
}
h1 {	width: 800px;	margin: 0 auto;
}
p {	font: 300 13px/20px Arial,sans-serif;	color: #888;
}
.page-curl {	background: #FFFFFF;	background: -moz-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);	background: -ms-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);	background: -webkit-linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);	background: linear-gradient(0deg, #F5F5F5 0%, #FFF 25%, #FFF 75%, #F5F5F5 100%);	border: 1px solid #777777;	-moz-border-radius: 6px 6px 6px 6px;	-webkit-border-radius: 6px 6px 6px 6px;	border-radius: 6px 6px 6px 6px;	-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);	-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);	box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);	margin: 50px auto;	padding: 15px;	position: relative;	width: 800px;
}
.page-curl:before, .page-curl:after {	background: none;	bottom: 12px;	-moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);	-webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);	box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);	content: "";	height: 10px;	left: 12px;	position: absolute;	width: 40%;	z-index: -1;	-moz-transform: skew(-4deg) rotate(-4deg);	-webkit-transform: skew(-4deg) rotate(-4deg);	transform: skew(-4deg) rotate(-4deg);
}
.page-curl:after {	-moz-transform: skew(4deg) rotate(4deg);	-webkit-transform: skew(4deg) rotate(4deg);	transform: skew(4deg) rotate(4deg);	left: auto;	right: 12px;
}
.page-curl.shadow-left {	background: -moz-linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;	background: -ms-linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;	background: -webkit-linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;	background: linear-gradient(0deg, #F5F5F5 0%, #FFF 50%) !important;
}
.page-curl.shadow-right {	background: -moz-linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;	background: -ms-linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;	background: -webkit-linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;	background: linear-gradient(0deg, #FFF 50%, #F5F5F5 100%) !important;
}
.shadow-bottom:before, .shadow-bottom:after {	top: auto;	bottom: 12px;	-moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);	-webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);	box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
}
.shadow-left:after {	display: none;
}
.shadow-right:before {	display: none;
}
.shadow-top-bottom.shadow-left:after {	display: block;	bottom: auto;	top: 15px;	right: auto;	left: 12px;	-moz-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);	-webkit-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);	box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
}
.shadow-top-bottom.shadow-right:before {	display: block;	bottom: auto;	top: 15px;	right: 12px;	left: auto;	-moz-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);	-webkit-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);	box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
}
CSS Page Curl Shadows - Script Codes
CSS Page Curl Shadows - Script Codes
Home Page Home
Developer Bottomline Interactive
Username BottomlineInteractive
Uploaded September 25, 2022
Rating 3
Size 3,461 Kb
Views 32,384
Do you need developer help for CSS Page Curl Shadows?

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!

Bottomline Interactive (BottomlineInteractive) Script Codes
Name
Unusual Underline
Simple round Numbered Styling
Cut N Paste Css Boxes
A Pen by Bottomline Interactive
Show hide list
Custom Animated Select Box
IE10 Conditional Statement
Glow hover input field
Cut and Paste Roll Link
Cut and Paste CSS Effects
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!