<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/tobiasglaus/pen/owYgMg?depth=everything&order=popularity&page=9&q=upload&show_forks=false" />
<style class="cp-pen-styles">@import url('https://fonts.googleapis.com/css?family=Playfair+Display:900|Raleway:300,800');
*{margin: 0;padding: 0;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;overflow-x: hidden;}
.clipped {
padding:0 30px 20px 30px;
display:flex;
align-items:flex-end;
height:100%;
line-height:1.2;
overflow:hidden;
background: url("https://www.w3schools.com/css/trolltunga.jpg") no-repeat #fff;
background-size: cover;
color: rgba(255,255,255,0.3);
font-size: 2em;
font-family: 'Playfair Display', serif;
-webkit-text-fill-color:transparent;
-webkit-background-clip: text;
-webkit-filter: invert(100%) hue-rotate(0deg);
/* change hue-rotate to play with tint */
}
#title{
overflow:hidden;
}
input {
display: block;
}
.header {
height: 300px;
width: 100%;
overflow: hidden;
background: url("https://www.w3schools.com/css/trolltunga.jpg") no-repeat #fff;
background-size: cover;
}
.container {
display: block;
width: 60%;
margin-left:20%;
float: left;
padding-right: 1px;
}
.upload {
position:fixed;
right:0;
width: 20%;
margin-left:10%;
padding: 20px;
display: block;
float: left;
}
input[name=titleInput]{
width:100%;
height:50px;
padding:10px;
margin-bottom:20px;
font-size:.8em;
font-family: 'Raleway', sans-serif;
font-weight:300;
border-radius:0;
border:1px solid #aaaaaa;
}
#uploadFile{
display:none;
}
#uploadButton{
margin-bottom:20px;
font-family: 'Raleway', sans-serif;
font-weight:300;
height:50px;
width:100%;
font-size:.8em;
background-color:white;
border:1px solid #aaaaaa;
text-align:left;
padding:10px;
}
content{
display:block;
padding:30px;
}
h2{
font-size: 1.1em;
font-family: 'Raleway', sans-serif;
font-weight:800;
}
hr{
margin:10px 0 10px 0;
width:30px;
height:6px;
background-color:#2980b9;
border:0;
text-align:left;
}
p{
font-size: .9em;
font-family: 'Raleway', sans-serif;
font-weight:300;
overflow:hidden;
}
#bell{
width:20px;
margin-right:10px;
float:left;
}
.code{
font-size:90%;
padding:2px;
background-color:#e0e0e0;
}
.alert{
height:100%;
font-size:.9em;
}</style></head><body>
<div class="container">
<div class="header">
<div class="clipped">
<h1 id="title">Title</h1>
</div>
</div>
<content>
<h2>I edited my pen! It's now supporting multiple lines in the title.</h2>
<hr>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</content>
</div>
<div class="upload">
<input name="titleInput"
type="text"
placeholder="Enter title">
<button id="uploadButton">
Upload image
</button>
<input id="uploadFile"
type="file"
name="image"
class="img"
value="Upload image">
<div class="alert">
<img id="bell" src="https://d30y9cdsu7xlg0.cloudfront.net/png/98037-200.png">
<p>IE and Opera mini don't support <span class="code">text-fill</span></p>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script >// title from text input
/*
$('input[name=titleInput]').keyup(function(){
$('.clipped').hide().show(0);
$('#title').text(this.value);
});
$('.clipped').hide().show(0); starts an animation with duration 0 and uses requestAnimationFrame which triggers a redraw. To be sure that an update of jQuery won't break it, the code should be written like this:
*/
$('input[name=titleInput]').keyup(function(){
if( window.requestAnimationFrame ) {
$('.clipped').hide();
}
$('#title').text(this.value);
if( window.requestAnimationFrame ) {
window.requestAnimationFrame(function() {
$('.clipped').show();
})
}
});
// image upload
$("#uploadButton").click(function(){
$("#uploadFile").click();
});
$(document).ready(function(){
ImageUpload.init();
});
var ImageUpload = {
init:function() {
$("#uploadFile").change(function(){
ImageUpload.readURL(this);
});
},
readURL:function(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.header').css(
"background-image",
"url(" + e.target.result + ")"
);
$(".clipped").css(
"background-image",
"url(" + e.target.result + ")"
);
}
reader.readAsDataURL(input.files[0]);
}
},
}
//# sourceURL=pen.js
</script>
</body></html>
