Skip to content

Instantly share code, notes, and snippets.

@prem911

prem911/responsiveCropperDesign.html

Last active March 20, 2020 21:37
Show Gist options
  • Save prem911/cce9459e94c2812db80e5c474d069b6d to your computer and use it in GitHub Desktop.
Save prem911/cce9459e94c2812db80e5c474d069b6d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
responsiveCropperDesign.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin:0;padding:0;background-color:red;
background-image: url("https://picsum.photos/1000");
color: white;
font-weight:bold;
}
.header {
top:0;
left:0;
height: 50px;
width:100%;
background-color:rgba(90,0,90, .2);
position:absolute;
}
.footer {
bottom:0;
right:0;
height: 50px;
width: 100%;
background-color: rgba(0,90,90, .4);
position:absolute;
}
.cropper {
width: 90%;
padding-bottom: 50.625%;
top:50%;left:50%;transform: translate(-50%, -50%);position:absolute;
outline-style: solid;outline-width:10000px; border: 4px solid white;border-radius: 4px;outline-color:rgba(0, 0, 0, .6)
}
.cropperWrapper {
width:100%;
padding: 10px;
background: transparent;
box-sizing: border-box;
resize: none;
border: 5px dotted;
overflow: auto;
max-width: 100%;
height: calc(100vh);
}
</style>
</head>
<body>
<div class="cropperWrapper">
<div class="header">
<div style="float:left">X</div>
<div style="float:right">Toggle Switch</div>
</div>
<div class="cropper"></div>
<div class="footer">
<div style="text-align:center">Camera Button</div>
<div style="float:right">Toggle Camera Face</div>
</div>
</div>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<style>
body {
margin:0;padding:0;background-color:red;
background-image: url("https://picsum.photos/1000");
color: white;
font-weight:bold;
}
.header {
top:0;
left:0;
height: 50px;
width:100%;
background-color:rgba(90,0,90, .2);
position:absolute;
}
.footer {
bottom:0;
right:0;
height: 50px;
width: 100%;
background-color: rgba(0,90,90, .4);
position:absolute;
}
.cropper {
width: 90%;
padding-bottom: 50.625%;
top:50%;left:50%;transform: translate(-50%, -50%);position:absolute;
outline-style: solid;outline-width:10000px; border: 4px solid white;border-radius: 4px;outline-color:rgba(0, 0, 0, .6)
}
.cropperWrapper {
width:100%;
padding: 10px;
background: transparent;
box-sizing: border-box;
resize: none;
border: 5px dotted;
overflow: auto;
max-width: 100%;
height: calc(100vh);
}
</style>
</head>
<body>
<div class="cropperWrapper">
<div class="header">
<div style="float:left">X</div>
<div style="float:right">Toggle Switch</div>
</div>
<div class="cropper"></div>
<div class="footer">
<div style="text-align:center">Camera Button</div>
<div style="float:right">Toggle Camera Face</div>
</div>
</div>
</body>
</html>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment