Search code examples
javascriptcsstextmask

Can I clip mask text over a div in CSS (with or without the help of JS)?

I would like to make a fancy looking button in CSS, where it displays a text overlay for a number on the left (see image below).

Is it possible in CSS (with or without the help of JS) to mask overlay text onto an element, similar to that of the Photoshop 'Clipping Mask'?

EDIT: As always you guys want to know I did some testing, which I did, but did not manage to position the number correctly where the button was on the page, using abosolute and relative position, so I asked here not only so that I could get help, but so that I could archive the answer in a format that can be easily found through Google. I have tried this. I want the definitive answer, so that I don't just use a way that 'works', but a way that works well.

Text

Solution

  • I would try something like this

    html:

    <div class="number">1</div>

    css:

    .number{display: inline-block; background-color: #ccc; max-width: 50px; max-height: 50px; width: 50px; height: 50px; font-size: 80px; font-weight: bold; text-align: center; line-height: 60%; color: #000; overflow: hidden; vertical-align: middle;}