Stripy Rainbow Text Effect

Developer
Mandy Michael
Size
2,842 Kb
Views
30,360
  1. Stripy Rainbow Text Effect Previews
  2. Stripy Rainbow Text Effect HTML Codes
  3. Stripy Rainbow Text Effect CSS Codes
  4. Stripy Rainbow Text Effect JS Codes

How do I make an stripy rainbow text effect?

Horizontal striped rainbow text without lots of repeating markup! Just playing around with different css properties to create fun CSS only text effects using data-attributes and pseudo elements. What is a stripy rainbow text effect? How do you make a stripy rainbow text effect? This script and codes were developed by Mandy Michael on 16 December 2022, Friday.

Stripy Rainbow Text Effect Previews
IQ Test

Stripy Rainbow Text Effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Stripy Rainbow Text Effect</title> <link href="https://fonts.googleapis.com/css?family=Oswald:700" 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="Rainbows"><span data-heading="Rainbows" contenteditable>Rainbows</span></h1> <script src="js/index.js"></script>
</body>
</html>

Stripy Rainbow Text Effect - Script Codes CSS Codes

html, body { background: -webkit-linear-gradient(45deg, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%); background: linear-gradient(45deg, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%); width: 100%; height: 100%;
}
h1 { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 20vw; text-align: center; line-height: 1; margin: 0; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; color: #2599d8;
}
h1:before, h1:after,
h1 span:before,
h1 span:after { content: attr(data-heading); position: absolute; overflow: hidden; left: 0;
}
h1:before { color: #d61c5b; height: 34%; z-index: 5;
}
h1:after { color: #f1573f; height: 50%; z-index: 4;
}
h1 span:before { color: #feb213; height: 66%; z-index: 3;
}
h1 span:after { color: #6abc4e; height: 80%; z-index: 2;
}

Stripy Rainbow Text Effect - Script Codes JS Codes

// JS for content editable trick from Chris Coyier
var span = document.querySelector("span");
span.addEventListener("input", function() {	var text = this.innerText;	this.setAttribute("data-heading", text);	this.parentElement.setAttribute("data-heading", text);
});
Stripy Rainbow Text Effect - Script Codes
Stripy Rainbow Text Effect - Script Codes
Home Page Home
Developer Mandy Michael
Username mandymichael
Uploaded December 16, 2022
Rating 4.5
Size 2,842 Kb
Views 30,360
Do you need developer help for Stripy Rainbow Text Effect?

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!

Mandy Michael (mandymichael) Script Codes
Name
Angled Split Text Colour
Awkward Zebra Text Effect
Editable layered textured fonts
80s style text with clip path and layered fonts
Custom Underlines on Headings
CSS Batman Mask
Lines and layered css text effects
Think outside the div
Animated CSS only 3D paper fold text effect
Split fractured text
Create amazing blog posts 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!