Achieve a translucent look for your text with a stylish border

Question

Achieve a translucent look for your text with a stylish border

I am attempting to showcase a number on a background image. Currently, my setup looks like this:

body {
  background-image: url("https://i.picsum.photos/id/10/800/800.jpg");
  background-repeat: no-repeat;
  background-position: center;
  width: 400px;
  height: 400px;
}

#age {
  /* 1 pixel black shadow to left, top, right and bottom */
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  font-family: sans;
  color: transparent;
  font-size: 40vw;
}

<h1 id="age">27</h1>

While this setup is close to what I want, the number always appears with a white fill. What I aim for is to have the number displayed prominently, filled with transparency only, and enclosed in a white border. My ultimate goal is to create a counter effect where it visibly counts up to the specified number. However, for now, I simply need help displaying the number without the white fill.

Is there a way to achieve this and show only the white border while letting the background shine through the empty space?

html jquery css

Answer 1

Answer №1

If you're looking for a solution to create outlined text in CSS, one option is to utilize the experimental -webkit-text-stroke property (refer to this helpful response):

#title-container {
  background-image: url("https://images.unsplash.com/photo-1483651646579-612f844a99cc?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 500px;
  height: 300px;
  display: flex;
}

#title {
  margin: auto;
  -webkit-text-stroke: 5px black;
  font-family: 'Roboto', sans-serif;
  color: transparent;
  font-size: 50px;
}

<div id="title-container">
  <h1 id="title">Hello World</h1>
</div>

Alternatively, consider using pre-designed fonts that meet your requirements (such as these suggestions).

Answer 2

If you're looking for a solution to create outlined text in CSS, one option is to utilize the experimental -webkit-text-stroke property (refer to this helpful response):

#title-container {
  background-image: url("https://images.unsplash.com/photo-1483651646579-612f844a99cc?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 500px;
  height: 300px;
  display: flex;
}

#title {
  margin: auto;
  -webkit-text-stroke: 5px black;
  font-family: 'Roboto', sans-serif;
  color: transparent;
  font-size: 50px;
}

<div id="title-container">
  <h1 id="title">Hello World</h1>
</div>

Alternatively, consider using pre-designed fonts that meet your requirements (such as these suggestions).

Answer 3

Answer №2

In the year 2020, a problem arose concerning:

text-stroke
text-stroke-width
text-stroke-color
text-fill-color

The issue lies in the fact that even though these properties have been in existence for more than five years, they are still considered experimental features and have not yet been officially included in any specifications by organizations such as W3C or WHAT-WG.

As a result, despite widespread browser support for text-stroke, all browsers (including Firefox) only provide support for text-stroke when it is prefixed with -webkit:

-webkit-text-stroke

For reference: https://caniuse.com/#feat=text-stroke

If using the -webkit- prefix is not an issue for your project, then there may be no cause for concern.

However, if compatibility becomes a concern, here is an alternative method to achieve a visually appealing text-stroke effect by outlining a transparent number within:

<h1 id="age">27</h1>

This can be achieved by applying an SVG image background to the <h1> element.

Here's a demonstration:

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#age {
  position: relative;
  font-family: sans-serif;
  color: rgba(0, 0, 0, 0);
  background-image: url("https://images.pexels.com/photos/1749/fire-orange-emergency-burning.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
}

#age[data-age="27"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 400 400'><text x='204' y='320' text-anchor='middle' stroke='rgb(255, 255, 255)' stroke-width='6' fill='rgba(0, 0, 0, 0)' style='font: 320px sans-serif; font-weight: 700;'>27</text></svg>");
}

#age,
#age[data-age="27"]::after {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-position: center;
}

<h1 id="age" data-age="27">27</h1>

Answer 4

In the year 2020, a problem arose concerning:

text-stroke
text-stroke-width
text-stroke-color
text-fill-color

The issue lies in the fact that even though these properties have been in existence for more than five years, they are still considered experimental features and have not yet been officially included in any specifications by organizations such as W3C or WHAT-WG.

As a result, despite widespread browser support for text-stroke, all browsers (including Firefox) only provide support for text-stroke when it is prefixed with -webkit:

-webkit-text-stroke

For reference: https://caniuse.com/#feat=text-stroke

If using the -webkit- prefix is not an issue for your project, then there may be no cause for concern.

However, if compatibility becomes a concern, here is an alternative method to achieve a visually appealing text-stroke effect by outlining a transparent number within:

<h1 id="age">27</h1>

This can be achieved by applying an SVG image background to the <h1> element.

Here's a demonstration:

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#age {
  position: relative;
  font-family: sans-serif;
  color: rgba(0, 0, 0, 0);
  background-image: url("https://images.pexels.com/photos/1749/fire-orange-emergency-burning.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
}

#age[data-age="27"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 400 400'><text x='204' y='320' text-anchor='middle' stroke='rgb(255, 255, 255)' stroke-width='6' fill='rgba(0, 0, 0, 0)' style='font: 320px sans-serif; font-weight: 700;'>27</text></svg>");
}

#age,
#age[data-age="27"]::after {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-position: center;
}

<h1 id="age" data-age="27">27</h1>

Achieve a translucent look for your text with a stylish border

Answer №1

Answer №2

Similar questions

Load form elements using jQuery by triggering an onchange event on a drop down box via ajax

How to Center a Bootstrap List on Tablets and Mobile Devices

When using Javascript's textContent on Node, it fails to retrieve a Unicode character

What is the method for rearranging the order of Bootstrap 5 columns within nested elements without using hidden duplicates?

What could be causing the cell containing my image to not resize along with the image?

Why are all the values in my list appearing as undefined after parsing with JSON?

Dynamically switch between showing more and showing less content on each div

Tips for preventing breaks in typography

The CSS hover effect on a <td> element is malfunctioning and not working as expected

Issues with Alignment of Navbar Elements in Bootstrap 3

Is it best to stick with a static page size, or

Error: Attempting to access the 'main' property of an undefined object - React dilemma

How can I assign an attribute to an element that has been dynamically generated?

The controller consistently receives a null value from JSON for only a specific field

In what way can you reach an unfamiliar form within a controller?

A fixed header for tables that shifts along with horizontal scrolling

Stable footer slides in Bootstrap

What is the best method for finding and observing the Javascript code being utilized on a webpage?

"Can I align a div in the center using inline-block with an

Is it possible for a Simplemodal popup to appear only once per user session