Introduction :
Gorithm is here 👋
Transparentizing (creating a transparency) an element, whether it's html element or even a fontawesome icon, or a logo, could be a frustrating process if you don't understand what you are trying to do or what you'll have to deal with.
How is this series about :
This Article is the First Part of a 3-parts series that I managed to write about my experience with transparentizing HTML elements using CSS only approach, First part deals with the usage of mix-blend-mode and understanding the difference between each blending mode and how it affects the the overall process of transparentizing and apply this on creating the design of this Article's Cover in action. Second part will deal with implementation of a blurry backdrop beneath the transparent element and how to apply different blend modes and get different results that suits various cases. Third part will deal with Transparent Element's Coloring and using any color as it's background, stroke, or a shadow also it will include implementing animations
Breakdown :
Assume you have a pre-written markup or some basic markup that I'm going to write down here, just make sure that:
Targeted element must have a parent that includes it only, something like a wrapper or a container to it,
Parent background color must be the same as the targeted element
You can clip the targeted element to it's background if you want to apply any kind of background-image, but for this first part make sure it's white or black
Basic Markup Implementation :
Notice the class names that clarify the relation between the elements
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-transparent-text</title>
<style>
/* The magic happens here */
</style>
</head>
<body>
<h1 class="parent">
<span class="child">
Transparent
<br>
Text
</span>
</h1>
</body>
</html>
Basic CSS Implementation :
Just a basic CSS that normalizes the markup, and assigns a fixed cover background image to the document's body
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-image:
url(https://images.unsplash.com/photo-1516528387618-afa90b13e000?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size: cover;
background-attachment: fixed;
}
Trick Explanation :
Assume that the parent element is white so the child element also will need to be white, then you will blend the child to difference mode, and in the mode it will invert its color which is white, and any identical pixel colors between it and it's background will become black, then you will blend the parent element as well but to a screen blend mode for lighter colors above 50% opacity or hard-light for lighter colors beneath 50% opacity, although this is not a standards that is must, actually you can try different light colors with different opacities and different modes, but those two blend modes worked best for me
.parent {
position: absolute;
top: 0;
left: 0;
width: 50vw;
height: 100vh;
background-color: rgba(255 255 255 / 1);
mix-blend-mode: screen;
}
.child {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: grid;
place-content: center;
font-family: Poppins, sans-serif;
font-weight: 900;
color: #fff;
mix-blend-mode: difference;
font-size: 12vw;
text-align: center;
line-height: 1.2;
}
Tutorial to watch and follow along
Subscribe to Gorithms's Youtube Channel
In the next two parts, I'm going to go further in implementing the blurry backdrop as well as Difference colors usage including the opposite state of darker colors, Animation, etc. Stay tuned
Top comments (0)