Tips And Tricks Of CSS 3

Tips And Tricks Of CSS 3 - Part One

Before starting the process, you should have the basic knowledge of HTML and CSS.

Let’s start!

We are solving a problem in this article and our problem is, "How to use image overlay on the text?"

Solution

Create an image overlay on text with pure using HTML5 and CSS3.

1. Write HTML

Write the HTML element in the body section. Add a div and inside that div, have a text "Hello World". We are going to transform this text with image overlay.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=`, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>image overlay on text</title>
</head>
<body>
<section class="wrapper">
<div class="text">
Hello World!
</div>
</section>
</body>
</html>

Listing 1.

2. Write CSS for Text display in center align

To apply the image overlay on the text, we need to write the CSS which is shown in listing 2.

.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: sans-serif;
}

Listing 2.

3. Add background image using CSS

To add the background image in CSS, we need to use the background property with the path. Have a look below for more details.

background: url("https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");

Listing 3.

4. Stop repeat image

To repeat the image, we need to add the background-repeat property as shown in listing 4.

background-repeat:no-repeat;

Listing 4.

5. Background position set

Here, I am going to set the position to center for text.

background-position: top center;

Listing 5.

6. Background size

We are setting the background-size to 100% so that the image can cover the entire area.

background-size: 100%;

Listing 6.

7. Background clip

The “background-clip: text” is supported in all browsers with the WebKit prefix. It allows a background image to be clipped by a text element.

-webkit-background-clip: text;

Listing 7.

8. Text transparent

We need to make the text transparent so the image can be displayed from the text.

-webkit-text-fill-color: transparent;

Listing 8.

9. Text stroke

The CSS properties allow you to specify the color and width of strokes for text elements.

-webkit-text-stroke: 5px rgba(255, 255, 0, 0.5);

Listing 9.

10. Text size

Here we are setting the font size of the text. You can define it according to your needs.

font-size: 320px;
font-weight: bolder;

Listing 10.

Full Code

In Listing 11, you can view the enitre HTML and CSS. When you render this in a browser, you will see the result as shown in Figure 1 below in the Result section.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=`, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>image overlay on text</title>
<style>
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: sans-serif;
}
.wrapper .text {
background: url("https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80") no-repeat top center;
background-size: 100%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 320px;
font-weight: bolder;
-webkit-text-stroke: 5px rgba(255, 255, 0, 0.5); }
</style>
</head>
<body>
<section class="wrapper">
<div class="text">
Hello World!
</div>
</section>
</body>
</html>

Listing 11.

Result