Learn how to add text on an image with mix-blend-mode in CSS to create stunning designs. Follow our step-by-step guide and design tips to enhance your web development skills.
Table of Contents
In today's world, images are everywhere. They are an integral part of web development and design, and are used to convey a message or add context to a webpage. However, adding text on images can be challenging, as the text can sometimes blend in with the background or be hard to read. This is where mix-blend-mode comes in.
Mix-blend-mode is a CSS property that allows you to blend the colors of an element with its parent element. This property applies a blending mode to the background of the element, making it possible to create various visual effects.
In essence, mix-blend-mode works by taking the color values of the element and blending them with the color values of the parent element based on a specified blending mode. The resulting color is then applied to the element.
There are several blend modes available in CSS, each of which creates a different visual effect when used with mix-blend-mode. Here's a brief explanation of some of the most commonly used blend modes:
- Normal - This is the default blend mode and doesn't apply any blending. It simply shows the element as it is.
- Multiply - This blend mode multiplies the color values of the element with the color values of the background. This creates a darker, more saturated effect.
- Screen - This blend mode is the opposite of multiply. It multiplies the inverse of the color values of the element with the inverse of the color values of the background. This creates a brighter effect.
- Overlay - This blend mode combines multiply and screen modes. It multiplies the darker areas of the element with the background and screens the lighter areas of the element with the background. This creates a high-contrast effect.
- Soft Light - This blend mode applies a soft light effect to the element, making it look softer and more diffused.
- Hard Light - This blend mode applies a hard light effect to the element, making it look more intense and vibrant.
These are just a few of the blend modes available in CSS. By experimenting with different blend modes and applying them to your elements, you can create unique and visually appealing designs.
By using mix-blend-mode, you can create unique and visually appealing designs by blending text or images with their background. It's a powerful tool that can help make your text more readable and stand out from the background.
In this article, we'll provide you with a step-by-step guide on how to add text on an image using mix-blend-mode in CSS. We'll cover everything from creating the HTML structure to designing the text for maximum impact.
By the end of this article, you'll have all the knowledge and tools you need to add text on images using mix-blend-mode and create stunning designs. So, whether you're a seasoned web developer or just starting out, read on to learn how to achieve this stunning effect.
Let's blend text into images using HTML, and CSS step by step.
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Below is a basic HTML document that includes a stylesheet and an image. The document is written in the HTML5 doctype, and the language of the document is set to English.
The <head> section includes a title tag that displays "Blend Text into Images" in the browser tab. It also includes a meta tag that sets the character encoding to UTF-8, and a viewport tag that sets the width of the page to the width of the device. The stylesheet is linked in the head section with the <link> tag.
The <body> section includes a <div> element with a class of "card" and a <figure> element. The <img> tag inside the <figure> element displays an image of Trolltunga, a famous rock formation in Norway. The <figcaption> tag is used to add a caption to the image. In this case, the caption includes a quote by Ralph Waldo Emerson: "Nature will never betray the soul that loves her." The class "blend" is added to the <figcaption> tag to indicate that the text should be blended into the image using CSS.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to blend text into images.
Let's go through each section:
The first block sets the margin and padding to 0 for all elements on the page, which removes any default spacing between elements.
The body section sets the minimum height of the body to 100% of the viewport height, which ensures that the body takes up the entire screen. It also sets the display property to flex, which allows the child elements to be positioned and aligned with more flexibility. The background color is set to a light purple color (#E6E6FA).
The .card class sets the height and width of the card to 250px and 600px, respectively, and applies a box shadow to create a visual depth effect. The overflow property is set to "hidden" to hide any content that overflows the card's boundaries. The margin is set to 20px on the top, left, and right sides, and 0 on the bottom side. This positions the card in the center of the page. The border-radius property adds rounded corners to the card.
The figure element is given a position of relative, which allows its child elements to be positioned relative to its own position. This will be used to position the caption text. The display property is set to inline-block, which allows the figure to be aligned horizontally with other inline-block elements.
The .blend class is applied to the caption text using the figcaption element. It sets the position to absolute, which allows it to be positioned anywhere within the parent element (in this case, the figure element). The top and left properties set the position of the caption text relative to the top left corner of the figure. The font-size property sets the size of the text to 2rem, and the color property sets the text color to white (#FFF). The mix-blend-mode property is set to overlay, which blends the text color with the image below it to create a visually appealing effect. The font-weight property is set to bold to make the text bold, and the font-family property is set to sans-serif. The text-align property is set to center, which centers the text within its container. The max-width property sets the maximum width of the text to 350px, which ensures that it does not overlap the image.
Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
*{
margin: 0;
padding: 0;
}
body{
min-height:100vh;
display:flex;
justify-content:center;
background-color: #E6E6FA;
}
.card {
height: 250px;
width: 600px;
overflow: hidden;
margin:20px 20px 0 20px;
border-radius:8px;
box-shadow:2px 3px 20px 0 rgba(0,0,0,0.3);
}
figure {
position: relative;
display: inline-block;
}
.blend {
position: absolute;
top: 70px;
left: 20px;
font-size: 2rem;
color: #FFF;
mix-blend-mode: overlay;
font-weight: bold;
font-family: sans-serif;
text-align: center;
max-width: 350px;
} Final Output:
Conclusion:
In conclusion, adding text on images using mix-blend-mode is a powerful design technique that can enhance the visual appeal of a webpage. By blending the colors of the text with its parent element, you can make the text stand out and be more readable on the image.
In this article, we provided you with a step-by-step guide on how to add text on an image using mix-blend-mode in CSS. We covered everything from creating the HTML structure to designing the text for maximum impact.
By following the steps outlined in this article and experimenting with different fonts, colors, and images, you can create stunning designs that will engage and captivate your audience. So, don't be afraid to experiment and have fun with this technique.
We hope this article has been helpful in guiding you through the process of adding text on images using mix-blend-mode. If you have any questions or comments, feel free to leave them below. Thank you for reading!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
