A text- portrait using CSS?


Styling a website is the most integral part of creating a website, as it serves as a hook-point for the user, who is visiting your website for the first time. We can create many types of designs and interactive experiences using CSS. A text portrait can be created used illustrator or Photoshop to make the design attractive.

In this article we are going to have a look at how can we generate and create a text portrait using CSS and some JavaScript function so as to achieve our text portrait.

Creating the text portrait

A text portrait is an image which looks like it has text in it, which is eventually forming into some object or a person. We will be using CSS to achieve this text portrait. Let’s talk about the approach that we will be using for the text-portrait.

Following are the steps we follow while creating a text portrait −

Step 1 − We will be first creating a document with the desired text that you want to add. Let’s say we will be adding the text “hello” and we will be repeating that word using the JavaScript repeat() function.

Step 2 − The second thing we are going to do will be making the background more appealing by setting its color to black and we will also set background image using the URL function. We will be using the property “background repeat” and set its value to “no repeat” so that the image does not get repeated.

Step 3 − We will now print our text in the image so we will be clipping the text and will be adding other properties like changing the font and adjusting the size etc.

For using the JavaScript repeat function.

Syntax

Let’s look at the syntax for the Javascript repeat function.

string.repeat(count);

The count variable which is used in the syntax is a value which will tell the function how many times to repeat the given string and the range of count is from 0 to infinity.

Example

To understand this better let’s, look at an example of creating thee text portrait using CSS.

<!DOCTYPE html>
<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>Example of a text-potrait using CSS</title>
      <style>
         p{
            background: url(
            "https://cdn.pixabay.com/photo/2015/10/01/17/17/car-967387_960_720.png");
            -webkit-background-clip: text;
            line-height: 16px;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            line-height: 16px;
            -webkit-text-fill-color: rgba(255, 255, 255, 0);
            background-size: 76vh;
         }
         body {
            overflow: hidden;
            background: rgb(236, 236, 236);
            font-family: "Segoe UI", sans;
         }
         h1{
            text-align: center;
         }
         h2{
            text-align: center;
         }
      </style>
   </head>
   <body>
      <h1> Welcome to tutorial's point </h1>
      <h2>This is an Example of a text portrait </h2>
      <p id="repeat"></p>
      <script>
         let str = "Yellow Car ";
         document.getElementById("repeat").innerHTML = str.repeat(487);
      </script>
   </body>
</html>

In the above code, we created a paragraph and gave it an id after which we used JavaScript and wrote the string, that we wanted to be repeated after which we used the function getElementByid and then repeated it 500 times, then we went in the CSS section and added the background image and clipped the text so that only the text which is in foreground of the image should be visible. We will be getting a portrait of a car with text filled in with “ hello how are you”. Let’s look at the output for the following code.

In the above output you can see that the text is in the foreground and the image of the car is in background we got our output using the JavaScript repeat and setting the value to 500 which means the text will be repeated 500 time in the whole canvas.

The string.repeat() function is an inbuilt function which builds a new string with the specified copies of the string like the example below

<script>
   A = "hello";
   a=A.repeat(2);
   document.write(a);
</script>

The above code will produce the following output.

This was an example of how we can use the string.repeat property.

Example

Let's look at another example for the text portrait which we creating using CSS

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Example of a text-potrait using CSS</title>
      <style>
         p{
            background: url(
            "https://cdn.pixabay.com/photo/2016/02/23/17/42/orange-1218158__340.png");
            -webkit-background-clip: text;
            line-height: 16px;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            line-height: 16px;
            -webkit-text-fill-color: rgba(255, 255, 255, 0);
            background-size: 76vh;
         }
         body {
            overflow: hidden;
            background: rgb(236, 236, 236);
            font-family: "Segoe UI", sans;
         }
         .tut{
            text-align: center;
            background-color:green;
            color:white;
         }
      </style>
   </head>
   <body>
      <div class="tut">
         <h1> Welcome to tutorial's point </h1>
         <h2>This is an Example of a text portrait </h2>
      </div>
      <p id="repeat"></p>
      <script>
         let str = "Orange is a fruit ";
         document.getElementById("repeat").innerHTML = str.repeat(600);
      </script>
   </body>
</html>

In the code above we used several CSS properties to demonstrate how can we create a text portrait. The JavaScript in the above code uses the str.repeat function so as to print the text multiple times in the image.

You can see in the above output that the text has taken the shape of an orange which was our actual image. Now let’s head over to conclude this tutorial.

Conclusion

Creating a text portrait using CSS with just a few lines of code and using a JavaScript function string.repeat gave us our result as at first, we wrote the text that we want to appear in the foreground and decided how any times should the text repeat. The output that we will be getting will also depend upon the length of the characters in the text.

In this article we saw how can we create text by just using a few lines of CSS code and a function of JavaScript.

Updated on: 24-Feb-2023

363 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements