Blend Mode test

Developer
Houbly
Size
2,307 Kb
Views
18,216
  1. Blend Mode test Previews
  2. Blend Mode test HTML Codes
  3. Blend Mode test CSS Codes

How do I make an blend mode test?

What is a blend mode test? How do you make a blend mode test? This script and codes were developed by Houbly on 04 November 2022, Friday.

Blend Mode test Previews
IQ Test

Blend Mode test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Blend Mode test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="bg"></div>
<div class="text">Mix Blend Mode</div>
<svg viewBox="0 0 768 768">
<path fill="#fff" d="M736.5 175.5v465c0 70.5-58.5 127.5-129 127.5h-232.5c-34.5 0-67.5-13.5-91.5-37.5l-252-256.5s40.5-39 42-39c7.5-6 16.5-9 25.5-9 7.5 0 13.5 1.5 19.5 4.5 1.5 0 138 78 138 78v-381c0-27 21-48 48-48s48 21 48 48v225h31.5v-304.5c0-27 21-48 48-48s48 21 48 48v304.5h31.5v-273c0-27 21-48 48-48s48 21 48 48v273h33v-177c0-27 21-48 48-48s48 21 48 48z"></path>
</svg>
</body>
</html>

Blend Mode test - Script Codes CSS Codes

body { background: #111; overflow: hidden;
}
.bg { height: 30vh; width: 30vh; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; background: #fff; animation: move infinite 2s;
}
.text { position: absolute; color: #fff; text-transform: uppercase; font-family: sans-serif; font-weight: bold; letter-spacing: 0.25em; font-size: 3em; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 100; mix-blend-mode: difference;
}
svg { height: 30vh; position: absolute; left: 50%;
}
svg path { mix-blend-mode: difference;
}
@keyframes move { 0% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -50%) scale(3.5); }
}
Blend Mode test - Script Codes
Blend Mode test - Script Codes
Home Page Home
Developer Houbly
Username houbly
Uploaded November 04, 2022
Rating 4.5
Size 2,307 Kb
Views 18,216
Do you need developer help for Blend Mode test?

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!

Houbly (houbly) Script Codes
Name
Sarcastic stick man animejs
Scrolling animation things.
CSS only responsive iPad
Book icon CSS animation
Sticky logo
Form progress indicator
Local scrolling div jquery
Animated SVG Skills Diagram
Cheeky CSS Walkcycle
Animated Cogs
Create amazing captions 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!