Skip to content

Instantly share code, notes, and snippets.

@rodrigocfd

rodrigocfd/folded-poster.html

Created June 25, 2020 21:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rodrigocfd/054e74b56e12c90fe71851287697cc14 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rodrigocfd/054e74b56e12c90fe71851287697cc14 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
folded-poster.html
<html>
<head>
<meta charset="UTF-8" />
<style>
.poster {
padding: 2%; /* white border */
position: relative;
box-sizing: border-box;
display: inline-block;
background-color: #fff;
box-shadow: 0 3px 12px rgba(0,0,0,0.2);
filter: saturate(70%) contrast(85%);
}
.poster:before,
.poster:after {
content: '';
width: 100%;
left: 0;
position: absolute;
}
.poster:before {
height: 4%;
bottom: -4%;
background-repeat: no-repeat;
background-image: linear-gradient(177deg, rgba(0,0,0,0.22) 10%, transparent 50%), linear-gradient(-177deg, rgba(0,0,0,0.22) 10%, transparent 50%);
background-size: 49% 100%;
background-position: 2% 0, 98% 0;
}
.poster:after {
height: 100%;
top: 0;
background-repeat: no-repeat;
background-image: linear-gradient(to right, rgba(255,255,255,0.1) 0.5%, rgba(0,0,0,0.15) 1.2%, transparent 1.2%), linear-gradient(to bottom, rgba(255,255,255,0.1) 0.5%, rgba(0,0,0,0.15) 1.2%, transparent 1.2%), linear-gradient(to bottom, rgba(255,255,255,0.1) 0.5%, rgba(0,0,0,0.15) 1.2%, transparent 1.2%), linear-gradient(265deg, rgba(0,0,0,0.2), transparent 10%), linear-gradient(5deg, rgba(0,0,0,0.2), transparent 15%), linear-gradient(-5deg, rgba(0,0,0,0.1), transparent 10%), linear-gradient(5deg, rgba(0,0,0,0.1), transparent 10%), linear-gradient(-265deg, rgba(0,0,0,0.2), transparent 10%), linear-gradient(-5deg, rgba(0,0,0,0.2), transparent 15%), linear-gradient(266deg, rgba(0,0,0,0.2), transparent 10%);
background-size: 50% 100%, 100% 33.3333%, 100% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%;
background-position: right top, left center, left bottom, left top, left top, right top, left center, right center, right center, left bottom;
}
</style>
</head>
<body>
<h1>Title</h1>
<div class="poster">
<img src="https://www.planocritico.com/wp-content/uploads/2015/12/pulp_fiction_plano_critico-600x400.jpg" />
</div>
<h2>End</h2>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment