Can a layer be sliced to create a text-shaped cutout?

I want to achieve a cool text effect where the background is visible through the letters.

I have explored options with background images and colors, but I haven't found any examples where the underlying layer is revealed. Is this even possible?

Imagine the text acting as a window into a gradient background, creating an interesting visual effect.

body {
  background: linear-gradient(270deg, #000, #fff);
  background-size: 400% 400%;
  -webkit-animation: AnimationName 5s ease infinite;
  -moz-animation: AnimationName 5s ease infinite;
  animation: AnimationName 5s ease infinite;
}
@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.container{
  width: 400px;
  height: 200px;
  background-color: darkred;
  margin: auto;
  color: #fff;
  font-size: 80px;
  font-weight: 900;
  text-align: center;
}
<div class="container">TO BE CUT OUT</div>

jsfiddle: https://jsfiddle.net/nmhmxkyj/

javascriptjquerycsshtml

Answer №1

You have the option to utilize SVG and incorporate the use of <mask>

@import url(https://fonts.googleapis.com/css?family=Lato:900);
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  background:  url('http://science-all.com/images/mountain/mountain-03.jpg');
  background-size: cover;
  background-position: center center;
}

svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-45%, -50%);
}

text {
  font-size: 80px;
  text-anchor: middle;
  font-family: 'Lato', sans-serif;
}
<svg width="450px" height="250px">
  <mask id="mask" height="100%" width="100%">
    <rect x="0" y="0" width="100%" height="100%" fill="#fff"></rect>
    <text>
      <tspan x="45%" dy="1.2em">TO BE</tspan>
      <tspan x="45%" dy="1.1em">CUT OUT</tspan>
    </text>
  </mask>

  <rect width="100%" height="100%" mask="url(#mask)" fill="#8B0000"></rect>
</svg>

Answer №2

My initial solution involved only CSS, but after further exploration, I discovered that achieving this effect is also possible using Javascript and a canvas element. Would you like to see how it can be done with Javascript?

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.save();
ctx.beginPath();
ctx.fillStyle = "darkred";
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fill();
ctx.font = "70pt Arial";
ctx.globalCompositeOperation = "xor";
ctx.beginPath();
ctx.fillText("To Be", 60, 80);
ctx.fillText("Cut Out", 35, 180);
ctx.fill();
ctx.restore();
body {
  background: linear-gradient(270deg, #000, #fff);
  background-size: 400% 400%;
  -webkit-animation: AnimationName 5s ease infinite;
  -moz-animation: AnimationName 5s ease infinite;
  animation: AnimationName 5s ease infinite;
}
@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
<canvas id="canvas" width="400px" height="200px"></canvas>

Check out the JSFiddle demonstration here: https://jsfiddle.net/p98waufL/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that only numerical values in decimal form are permitted when entering data in Angular

How can I restrict user input to only decimal values? Here is the HTML code for my input field: <label for="conversion-factor">Conversion Factor:</label> <input type="text" class="form-control form-control-sm" id="conversion-factor" ...

javascripthtmlangulartypescript

A guide on transforming a JSON object representing an HTML element into a live HTML element for display on a webpage using C#, JavaScript, or jQuery

I am looking to retrieve a JSON object from a database and convert it into HTML format. Here is an example of the JSON structure: {"input":{ "name":"fname", "type":"text", "placeholder":"Ente ...

javascriptc#htmljqueryjson

Designing the appearance of a button in a filefield xtype

I am currently working on a web application where users can upload photos using a fileField. I have been struggling to style the button for this feature, as my attempts so far have not been successful. Initially, I tried using the element inspector to iden ...

cssextjsextjs4

Generating safe HTML output in PHP requires adding 4 spaces before the code

I'm currently designing a form that generates basic HTML and other plain text output for users to copy and paste into a content management system. For setting up the variables, I follow this structure: $date1 = $_POST['date1']; $city1 = $_ ...

phphtml

How can we add styles to text entered into a form input field in a targeted way?

Is there a way to apply styling to the second word entered into a form input text field after the user hits "enter" and the data is output? In this scenario, the text always follows the format of 3 numbers, followed by a space, and then a name. For examp ...

javascriptjqueryhtmlcssforms

Activating the mousewheel effect exclusively on specific div sections, rather than the entire page

After researching mousewheel events in jQuery, I realize that my lack of knowledge may be hindering my ability to find useful answers. I am looking to create a mousewheel effect that is only triggered within a specific div called #scroller. Currently, I am ...

javascriptjqueryhtmlcssmousewheel

Discovering the process to create an onclick function with node.js code

index.html: <html> <h2>Welcome To User Profile Page !!!</h2> <button type="button">Edit Profile</button> <button type="button">Logout</button> </html> On my webpage, I have two buttons - Edit Profile and Lo ...

javascriptnode.js

Configuring Angular to use ES6 syntax

Trying to integrate angular google maps with es6 syntax has been a challenge for me. In es5, the code typically looks like this: .config(function(uiGmapGoogleMapApiProvider) { uiGmapGoogleMapApiProvider.configure({ // key: 'your api key&ap ...

javascriptangularjsecmascript-6

Utilizing data in mongoose: A beginner's guide

I have two database models: User and Conversations. The User model has the following schema: const userSchema = mongoose.Schema({ username: String, logo: String, ..... }) and the Conversation schema is as follows: const conversationSchema = mongo ...

javascriptnode.jsmongodbexpressmongoose

Exploring a JavaScript multi-dimensional array

Hello everyone, I need assistance with manipulating this array: [[2,3,0],[0,4,5]] I am looking to rearrange this array as follows: [[2,0], [3,4], [0,5]] Does anyone have any suggestions on how to achieve this? I am using JavaScript for this project. ...

javascriptarrays

Using the Spread Operator to modify a property within an array results in an object being returned instead of

I am trying to modify the property of an object similar to this, which is a simplified version with only a few properties: state = { pivotComuns: [ { id: 1, enabled : true }, { id: 2, enabled : true ...

javascriptreactjsreduxreact-reduxspread-syntax

Using JavaScript, what is the method for inputting values into a window.prompt()?

I've been working on a project that involves scraping basic HTML pages from an internal server at my workplace. When I visit these pages, a popup window similar to a windows.prompt() appears, asking for a username and password with the message "Enter ...

javascriptpythonhtml

In order to toggle a div property on and off with each click, you will need to use an onclick JavaScript function

I have an HTML button that triggers a JavaScript function when clicked, revealing a hidden div by changing its display property. The current setup is functional and achieves the desired outcome. However, I now wish to modify the functionality so that subs ...

javajavascripthtmlcss

Accessing JSON files locally using JavaScript in IE and Firefox

I am a beginner in JavaScript and currently working on a small HTML page that will be run locally. I have a string in JSON format that I need to store and load as a file on the hard drive. I have managed to store the string using the following code snippe ...

javascriptjsoninternet-explorerloadlocal

What is the best way to connect the elements in two separate arrays?

I have a scenario with two arrays and a variable: var Names = ['jack', 'peter', 'jack', 'john']; var Ids = ['1' , '2' , '3' , '4' ]; Also, I have this search varia ...

javascriptjqueryarraysobject

How can I use JQuery to sum up the numbers within div elements?

Is there a way to automatically number the generated blocks? For example, the first block would display "1", the second "2" and so on. Below is my current code. Simply input the desired number of blocks in the input field. <!DOCTYPE html> <html ...

javascriptjqueryhtmlcss

Implementing a JSON array to object conversion in an Express REST API

After conducting a test on a REST API using Postman, the outcome was as follows: { "success": true, "message": "success", "data": [ { "id_buku": 9, "judul_bu ...

javascriptnode.jsrestexpress

Utilizing Draft JS to dynamically insert text in the form of span

I'm utilizing Draft.js with its mentions plugin. Occasionally, I'd like users to input a mention not by choosing from a dropdown menu, but by typing something like, for example, "@item" or "@item". In the function below, you can observe that if ...

javascriptreactjsdraftjsdraft-js-plugins

How to Delete the Bottom Border on Selected Tabs in MUI Using React

I am attempting to customize the appearance of MUI Tabs to achieve a design similar to the image below: https://i.sstatic.net/tBS1K.png I have created a sample code example in a codesandbox environment. You can view it here: Codesandbox Example. In this e ...

htmlcssreactjsmaterial-uitabs

Modify the Link's Color

How can I change the color of a link inside a DIV? The current code isn't working for me. <style type="text/css"> .someDiv { font-size:14px; color:#c62e16; } </style> <div id="someDiv"> <a href="http://www.s ...

css