Vertical split layout text effect

Developer
Mandy Michael
Size
2,640 Kb
Views
12,144
  1. Vertical split layout text effect Previews
  2. Vertical split layout text effect HTML Codes
  3. Vertical split layout text effect CSS Codes
  4. Vertical split layout text effect JS Codes

How do I make an vertical split layout text effect?

Vertical layout example with split coloured text. This is a simple demo to demonstrate the concepts used on the other text effects.. What is a vertical split layout text effect? How do you make a vertical split layout text effect? This script and codes were developed by Mandy Michael on 16 December 2022, Friday.

Vertical split layout text effect Previews
IQ Test

Vertical split layout text effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vertical split layout text effect</title> <link href="https://fonts.googleapis.com/css?family=Raleway:200,300,400" 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 contenteditable data-heading="pick a side">pick a side</h1> <script src="js/index.js"></script>
</body>
</html>

Vertical split layout text effect - Script Codes CSS Codes

html, body { background: -webkit-linear-gradient(left, #f0efdb 0%, #f0efdb 50%, #e85253 50%, #e85253 100%); background: linear-gradient(to right, #f0efdb 0%, #f0efdb 50%, #e85253 50%, #e85253 100%); height: 100%;
}
h1 { font-size: 10vw; top: 50%; left: 50%; margin: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; color: #f0efdb; white-space: nowrap; font-family: 'Raleway', sans-serif; font-weight: 200; text-decoration: underline;
}
h1:before { content: attr(data-heading); overflow: hidden; position: absolute; left: 0; top: 0; width: 50%; color: #e85253; text-decoration: underline;
}

Vertical split layout text effect - 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);
});
Vertical split layout text effect - Script Codes
Vertical split layout text effect - Script Codes
Home Page Home
Developer Mandy Michael
Username mandymichael
Uploaded December 16, 2022
Rating 4.5
Size 2,640 Kb
Views 12,144
Do you need developer help for Vertical split layout 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
Awkward Zebra Text Effect
Animated CSS only 3D paper fold text effect
Stripy Rainbow Text Effect
Editable layered textured fonts
Three way split with clip-path
Flickering Light Text Effect
CSS only 3D paper fold text effect
Lines and layered css text effects
Single element, multi coloured 3d text effect
Page layout text effects with clip-path
Create amazing love letters 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!