Angled Split Text Colour
How do I make an angled split text colour?
Responsive split colour text on an angle using clip-path!The split in the colour shifts as angle changes. :) Hazzah!. What is a angled split text colour? How do you make a angled split text colour? This script and codes were developed by Mandy Michael on 16 December 2022, Friday.
Angled Split Text Colour - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Angled Split Text Colour</title> <link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 data-heading="Everyone loves unicorns" contenteditable>Everyone loves unicorns</h1> <script src="js/index.js"></script>
</body>
</html>
Angled Split Text Colour - Script Codes CSS Codes
::-moz-selection { background: cyan;
}
::selection { background: cyan;
}
h1 { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; position: absolute; margin: 0; font-family: 'Rubik Mono One', sans-serif; color: magenta; font-size: 50px; letter-spacing: -0.225rem; background: white; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 1; -webkit-transition: font-size 250ms cubic-bezier(0.59, 0.04, 0.3, 1.43); transition: font-size 250ms cubic-bezier(0.59, 0.04, 0.3, 1.43);
}
@media screen and (min-width: 768px) { h1 { font-size: 80px; }
}
@media screen and (min-width: 1024px) { h1 { font-size: 100px; }
}
h1:after { content: attr(data-heading); position: absolute; left: 0; z-index: 2; overflow: hidden; white-space: wrap; width: 100%; height: 100%; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; position: absolute; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: blue; background: cyan; -webkit-clip-path: polygon(0 0, 100% 0, 100% 25%, 0 77%); clip-path: polygon(0 0, 100% 0, 100% 25%, 0 77%);
}
Angled Split Text Colour - Script Codes JS Codes
// JS is to make the text editable fot demo purpose, not required for the effect. Thanks for the suggestion @chriscoyier!
var h1 = document.querySelector("h1");
h1.addEventListener("input", function() { this.setAttribute("data-heading", this.innerText);
});
Developer | Mandy Michael |
Username | mandymichael |
Uploaded | December 16, 2022 |
Rating | 4.5 |
Size | 2,909 Kb |
Views | 6,072 |
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!
Name | Size |
Split emoji text effect with css | 5,332 Kb |
Multi coloured animated css text | 2,903 Kb |
Three way split with clip-path | 2,852 Kb |
Lines and layered css text effects | 3,570 Kb |
Flickering Light Text Effect | 3,315 Kb |
Spotty layered CSS text effects | 3,501 Kb |
Stripy Rainbow Text Effect | 2,842 Kb |
80s style text with clip path and layered fonts | 3,618 Kb |
CSS only 3D paper fold text effect | 3,363 Kb |
Awkward Zebra Text Effect | 2,961 Kb |
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!
Name | Username | Size |
Experiment - SCSS SVG Background Image with Variables | See8ch | 3,270 Kb |
Slide out Menu | Rbiggs | 4,936 Kb |
Animating characters with jQuery | 042 | 2,776 Kb |
Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
Flex layout example | Mofny | 1,663 Kb |
Pure CSS Tooltips | Mobius1 | 2,271 Kb |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
Ball physics | Blackkbot | 3,874 Kb |
Apple website | Jds317 | 1,835 Kb |
A Pen by Jess | Jessamyne | 5,100 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!