Inverted background color on title

Developer
Tobias Glaus
Size
3,615 Kb
Views
4,048
  1. Inverted background color on title Previews
  2. Inverted background color on title HTML Codes
  3. Inverted background color on title CSS Codes
  4. Inverted background color on title JS Codes

How do I make an inverted background color on title?

Text color is the inverted background. Using text-fill-color. Doesn't work in Firefox, IE and Opera tho.. What is a inverted background color on title? How do you make a inverted background color on title? This script and codes were developed by Tobias Glaus on 01 February 2023, Wednesday.

Inverted background color on title Previews
IQ Test

Inverted background color on title - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>inverted background color on title</title> <link rel="stylesheet" href="css/style.css">
</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='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Inverted background color on title - Script Codes CSS Codes

@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;
}

Inverted background color on title - Script Codes JS Codes

// 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]); } },
}
Inverted background color on title - Script Codes
Inverted background color on title - Script Codes
Home Page Home
Developer Tobias Glaus
Username tobiasglaus
Uploaded February 01, 2023
Rating 4.5
Size 3,615 Kb
Views 4,048
Do you need developer help for Inverted background color on title?

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!

Tobias Glaus (tobiasglaus) Script Codes
Name
Weekdays planner
Animated border
Fancy Submit Button
Change elements with context menu
Background Reodering on click
A Pen by Tobias Glaus
Autofill user input from other inputs
Page theme color picker
Portfolio Landing Page
Unfolding card
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!