Styling a division element in CSS to use text as a mask

Question

Styling a division element in CSS to use text as a mask

Looking to create a mask effect using a colored div's large text in HTML. The goal is to have the masked text reveal parts of an image that is positioned behind the div. Instead of utilizing the background-clip property and a background-image on the div directly, the idea is to unveil what lies beneath the element (in this case, the image). Previous attempts with svg images featuring compound paths proved to be too complex to manage. Are there alternative methods to achieve this desired effect? Perhaps through CSS or a jQuery plugin?

javascript jquery html css

Answer 1

Answer №1

According to this informative article on implementing text masks, one way to achieve this effect is by using a canvas tag.

<div id="bg"><canvas id="overlay" width="240" height="70"></canvas></div>
<script>
// Access the canvas element
var ctx = document.getElementById('overlay').getContext("2d");

// Set font style
ctx.font = "Bold 36px 'Helvetica'";

// Draw a black rectangle
ctx.fillStyle = "black"; 
ctx.fillRect(0,0,230,70); 

// Create text mask
ctx.globalCompositeOperation = 'destination-out'; 
ctx.fillText("Some Text", 25, 50);
</script>

http://jsfiddle.net/6aVGU/

Answer 2

According to this informative article on implementing text masks, one way to achieve this effect is by using a canvas tag.

<div id="bg"><canvas id="overlay" width="240" height="70"></canvas></div>
<script>
// Access the canvas element
var ctx = document.getElementById('overlay').getContext("2d");

// Set font style
ctx.font = "Bold 36px 'Helvetica'";

// Draw a black rectangle
ctx.fillStyle = "black"; 
ctx.fillRect(0,0,230,70); 

// Create text mask
ctx.globalCompositeOperation = 'destination-out'; 
ctx.fillText("Some Text", 25, 50);
</script>

http://jsfiddle.net/6aVGU/

Answer 3

Answer №2

If you want to achieve this effect, utilizing the Canvas object is a great option: Check out this example

    var canvasObject = document.getElementById("canvas1");
    var context = canvasObject.getContext("2d");

    // Using destination-out
    // Text cuts out everything below it
    // Revealing background in the cut-out area
    createGradientAndFont(context, canvasObject);
    context.globalCompositeOperation = 'destination-out';
    context.fillText("Portfolio", 175, 50);

    function createGradientAndFont(ctx, canvas) {
        var gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
        gradient.addColorStop(0, '#0000FF');
        gradient.addColorStop(.3, '#00FFFF');
        gradient.addColorStop(.4, '#99FFFF');
        gradient.addColorStop(.5, '#00FF00');
        gradient.addColorStop(.6, '#FFFF00');
        gradient.addColorStop(.8, '#F00000');
        ctx.rect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = gradient;
        ctx.fill();
        ctx.fillStyle = "black";
        ctx.font = "55px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
    }

Answer 4

If you want to achieve this effect, utilizing the Canvas object is a great option: Check out this example

    var canvasObject = document.getElementById("canvas1");
    var context = canvasObject.getContext("2d");

    // Using destination-out
    // Text cuts out everything below it
    // Revealing background in the cut-out area
    createGradientAndFont(context, canvasObject);
    context.globalCompositeOperation = 'destination-out';
    context.fillText("Portfolio", 175, 50);

    function createGradientAndFont(ctx, canvas) {
        var gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
        gradient.addColorStop(0, '#0000FF');
        gradient.addColorStop(.3, '#00FFFF');
        gradient.addColorStop(.4, '#99FFFF');
        gradient.addColorStop(.5, '#00FF00');
        gradient.addColorStop(.6, '#FFFF00');
        gradient.addColorStop(.8, '#F00000');
        ctx.rect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = gradient;
        ctx.fill();
        ctx.fillStyle = "black";
        ctx.font = "55px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
    }

Answer 5

Answer №3

An option could be using a transparent PNG image containing the text.

Answer 6

An option could be using a transparent PNG image containing the text.

Styling a division element in CSS to use text as a mask

Answer №1

Answer №2

Answer №3

Similar questions

Error: Psuedo After element fails to display

Click to toggle information using Jquery

Reduce the version of NodeJs and express

Is there a way to execute a jar file using JavaScript?

Adjust the position of a div smoothly as the user scrolls, seamlessly transitioning the animation without any interruptions as the user scrolls further

Trouble arises when attempting to incorporate the Restangular dependency with Angular using browserify

What is the best method to retrieve the current time in minutes using the Timer component?

The Boolean value retrieved from a NodeJS webservice behaves unexpectedly when incorporated into a test scenario

Converting an array of numbers into a single string

Tips for displaying data using AJAX with a variable

The buttons are off-center on the page when the screen width is below 1199px, they should be centered instead of aligned to the

Using Three.js, I implemented a feature that allows the mousewheel to adjust the camera's position vertically rather

Tips for concealing an entire menu on WP, with the exception of items labeled as current-menu-ancestor

Tips on widening a paper to its fullest width while also keeping it versatile and adaptable

Implementing a JavaScript confirmation based on an if-else statement

Website that substitutes every word on an external webpage

What is the best method for eliminating duplicate values within d3?

The onsubmit function is not functioning correctly in combination with Ajax

An inclusive CSS-compatible calendar control for ASP.NET

Tips on aligning an entire text in R Markdown using the bookdown::gitbook function as the desired output