The font lines in my outlined text have a strange appearance, appearing in a transparent area

I am experiencing an issue with the appearance of outlined text on my website. To see the problem more clearly, please refer to the image link provided below.

Specifications:

  • WordPress 5.8.3
  • Elementor / Pro 3.5.3 / 3.5.1
  • Font: Sinkin Sans

Below is the code snippet (Note: there is no h1 tag in the actual code)

.cleartext {
  color: #000000;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #000000;
}

.gbtext {
    font-weight: 700;
}
<h1><span class="cleartext gbtext">It's clear</span> when you blah blah blah.</h1>

This is the issue I am facing: the font outlines are encroaching into the supposed transparent area

htmlcsswordpresswebkitelementor

Answer №2

One reason for this issue is the font itself. When using certain fonts, it can be difficult to apply strokes without affecting the overall appearance of the text. However, a workaround is to use text-shadow instead of -webkit-text-stroke, although it may require some tweaking. Keep in mind that when using text-shadows, the text cannot be transparent as the shadows will be visible, so you must ensure the text color is set.

.cleartext {
  color: #fff;
  text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
}

.gbtext {
    font-weight: 700;
}
<h1><span class="cleartext gbtext">It's clear</span> when you blah blah blah.</h1>

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

Is there a way to shift an entire row to the right?

I need assistance with aligning a row of columns, each containing a button, to the center of the page. <div> <div class="container-fluid" id="home"> <h1>Welcome to Daniel's Portafolio</h1> <div class="row"> <div ...

csstwitter-bootstraprows

When using the v-for directive to display all elements of an array, only the information of the clicked array should be listed when using the

I am facing an issue with my array of locations. There are 2 divs in play - one containing the list of locations and the other displaying additional info when a location is clicked. The problem arises when I click on a specific location, let's say Sc ...

javascripthtmlvue.js

The child element is absolutely positioned within the parent element with a higher z-index

It is crucial for the parent absolute to be under child absolute. How can I resolve this issue using CSS? The positions of both elements must remain absolute. <div class="parent"> <div class="child">child</div> </div> ...

javascriptjqueryhtmlcss

Django: Sending Templates through AJAX for Dynamic Rendering

Hey there, this is more of a theoretical question. So I recently discovered a cool trick: using AJAX to trigger a function that delivers a pre-rendered HTML template as a response, which can then be applied to a designated div element. This method feels i ...

pythonhtmldjangoajaxdjango-templates

Solution for accessing the callee function in JavaScript slide down operation

While exploring a tutorial from CSS Tricks about animating section height, I came across a solution that I would like to implement in my Angular 2 application. Here is the function responsible for expanding sections in my app: expandSection(element) { / ...

javascripthtmlcssangular

Retrieve the value associated with the data attribute of the chosen dropdown option

I need to extract the custom data attribute from the chosen option of a dropdown menu and insert it into a text box. This will be the second data attribute I'm working with. I plan to implement code that will run whenever the user changes the option ( ...

javascriptjqueryhtml

Removing information from the database using a JSP webpage

Having some issues with my online reservation system. The problem lies in the code where users are unable to cancel their reservations using the cancel button on the jsp page. It seems that the code is not properly deleting data from the database. Any sugg ...

javahtmlmysqljsp

PHP: The issue with displaying array values in an HTML select within a form using a foreach loop

I am currently working with an array containing a list of countries. $country_list = array( "Afghanistan", "Albania", "Algeria", "Andorra", "Angola" }; I want to display these countries using a select element in my form <select ...

phphtmlarraysforeach

Tips for adjusting the width of tab labels in Java while maintaining the "selection" choices

In my program, I have a JTabbedPane object where I customized the background colors of tabs when selected or not by overriding the getForegroundAt and getBackgroundAt methods. Now, I am trying to adjust the width and height of the tabs. Making use of cod ...

javahtmlswingjtabbedpane

Learn how to divide a container div with multiple sub-divs into two columns using CSS

Are you up for a good challenge? In my MVC project, I have a dynamic list of divs that I want to split into two columns. The number of divs in the list is unknown. How would you go about achieving this task? EDIT: Just to clarify, when I say split, I&a ...

htmlcssasp.net-mvc

Tips for collapsing the navbar in Bootstrap 4

Is it possible to create a collapsible navbar in my code that will automatically collapse when viewed on mobile devices? I have attempted to add a button and set it to false, but the navbar does not display on either desktop or mobile. Below is the code ...

jquerycssbootstrap-4

Experimenting with alterations to link styles

A particular test we are conducting involves examining the style changes of a link (a element) after a mouse over. Initially, the link is displayed with a black font and no decoration. However, upon hovering the mouse over it, the font color changes to bl ...

csstestingseleniumprotractorend-to-end

Best Practices for Handling Form State in ReactJS with Redux

Currently in ReactJS + Redux, I am utilizing Material-UI's TextField for a form where users input their firstName, lastName, birthMonth, birthDay, and birthYear. The existing setup works but appears redundant, especially when handling the birth date f ...

javascripthtmlreduxreactjs

The hyperlink function is not operational in Gmail attachments

Using an anchor tag to navigate to a specific section within the same page works perfectly when the HTML file is on my local machine. However, when I attach the file in Gmail and open the attachment, it doesn't work. Why is this happening? How can I m ...

javascripthtmlcss

using regular expressions to find unclosed font tags that match on a single line

Even though regex is not typically recommended for parsing HTML, in this case we are dealing with a single line string input to a function. For example: <font color = "#ff0000"> hello </font>. I want the regex pattern to match only if the tag ...

javascriptpythonhtmlregexfonts

Stylish Dropdown Menu with Regular Buttons

Currently, all buttons have a hovering effect, but I only want one button to behave this way. I need two buttons to immediately redirect to another page upon clicking, without any hover effect. The CSS styling code has been provided below: #wrapper { ...

css

I'm looking for a way to display a modal when a button is clicked and no record is selected from my table. My project is utilizing Bootstrap 4

<table id="resultTable" class="table table-hover table-bordered table-sm"> <thead> <tr> <th>Select</th> <th>Message Id</th> <th>Service</th> <th>Date</th> & ...

javascriptpython-3.xhtmlbootstrap-4

Looking to make a static image in CSS dynamic and retrieve it in a Laravel controller - how can this be accomplished?

My goal is to create a customized blade profile with images, but I am having trouble displaying the user's images dynamically. The template I found has static images defined in the CSS. Here is the code snippet to illustrate further. UsersController. ...

phpcsslaravelimage

Validation of forms - Must include one particular word from a given set

I am in the process of utilizing Javascript to validate an input field with the specific formatting requirements outlined below: "WORD1,WORD2" The input must contain a comma separating two words, without any spaces. The first word (WORD1) can be any word ...

javascripthtmlcssformsvalidation

Toggle the hamburger menu using JavaScript

How can I close my hamburger menu when clicking a link for one page navigation? The menu is functioning properly, but I need a way to close it. Unfortunately, I have limited knowledge of JS. I only have the HTML and CSS for this: HTML in index.html file ...

javascriptjqueryhtmlcss