Placing one text above another text

I recently came across a unique font that requires both fill and shadow to be used together, with the fill on top and the shadow underneath. I managed to layer them successfully using relative and absolute positioning, as shown in this example.

Here is how I achieved it using HTML and CSS:

HTML:

 <h1 class="fill">TEXT</h1>
 <h1 class="shadow">TEXT</h1>

CSS:

.fill {
    font-family: "Tilastia-Fill";
    position: relative;
}

.shadow {
    font-family: "Tilastia-Shadow";
    position: absolute;
    bottom: 50%;
}

However, I encountered difficulties when trying to maintain the desired look when switching between portrait and landscape orientations, especially with multiple lines of double stacked text. You can see the issue in this example: link

It seems like there's something about positioning that I am missing, causing elements to shift when the screen orientation changes.

Answer №1

To ensure they stick together, introduce a parent div with a relative position

Then style both texts to align with this div using the same CSS properties

This is what the code should resemble:

div {
  position: relative;
}

.fill {
    font-family: "Tilastia-Fill";
    position: absolute;
    top:0;
    left:0;
}

.shadow {
    font-family: "Tilastia-Shadow";
    position: absolute;
    top:0;
    left:0;  
}
<div>
<h1 class="fill">TEXT</h1>
<h1 class="shadow">TEXT</h1>
</div>

If you wish for one text to be slightly more shifted than the other, adjust left, right, top, bottom

It's advisable to use pixels instead of percentages

You can view an example of this HERE

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

Utilize CSS to eliminate gaps between spans

I can't figure out how to remove the vertical spacing between these two spans. Any help would be greatly appreciated. The issue I'm facing is the large gap between these two spans: <span class="twentyeight nomargin threshold_green">6</ ...

How can I incorporate classes from multiple CSS files into my WordPress theme?

Currently, I am utilizing wp_enqueue_style to incorporate two CSS files within a single function. However, the issue that arises is when I try to apply a class, it seems that only classes from one of the files can be utilized and it ends up overriding anot ...

Delete the CSS class from a specific HTML element

Having just started learning HTML and CSS, I encountered an issue. I applied a CSS class to a table element. Subsequently, I inserted a child table within the parent table. The problem arose when the CSS class of the parent table also influenced the child ...

Implementing Angular with HTML progress bar for interactive client-side features

Exploring the integration of HTML built-in progress bars with Angular: <label for="file">File progress:</label> <progress id="file" max="100" value="70">30%</progress> I am curious about how ...

Refresh the content of a webpage in AngularJS without the need to fully reload the entire page

Within my controller and view files, I have content that is sourced from various places, including API calls. For instance, I have information retrieved from the database where users can update certain details like their last name. After submitting the up ...

When utilizing narrow resolutions, header letters may overlap each other

As I integrate bootstrap into my website, I've noticed that when the resolution is narrow, my header overlaps. If the header is of a small size, like the typical H1 size, everything looks fine. However, when using a larger size (see CSS below), the is ...

Is it advisable to break down views into smaller components in Vuejs?

I'm currently managing a project with two folders for components - 1) src/components/ and 2) src/views. The general components like a drawer or nav are stored in the first folder, while the pages (views) are stored in the second. Now I face a challen ...

Is there a term similar to "Rise above the Rest" in the world of Web Development?

Hey, I've encountered a new issue right now. Currently, I have two elements that are fixed to the top and bottom of the page. However, the elements in between them are overlapping the top element. Even though I tried keeping both elements fixed, th ...

Having trouble with Floating Labels in Bootstrap 5

Having trouble with my floating labels - any advice? https://i.sstatic.net/fk0CG.png Here is the code snippet: <div class="form-floating mb-3"> <input type="text" class="form-control" autofocus id="txtNome" placeholder=" "> <la ...

Tips for creating a web page with rounded screen corners, similar to those on an Android smartphone

I am looking to create rounded screen corners on a website similar to those found on an Android smartphone. Here is an example of what I am trying to achieve: I have searched for tutorials online but haven't had much luck finding the right solution. ...

What is the most efficient method for applying multiple classNames to elements in Next.js?

Could you provide me with a list of all methods, both with and without packages? Also, I'm interested in knowing why one method is considered better than the others. ...

Can you provide guidance on aligning text in a text area to the center?

I've been trying to align my "field labels" in the center of their respective text fields without much success so far. To achieve this, I resorted to using tables but that didn't quite do the trick. Currently, I'm experimenting with CSS prop ...

Create a line break in Html5 to separate the "content" element from its associated class

To create a design using html and css to display numbers in an image counter related to a carousel, follow these steps: https://i.stack.imgur.com/OBAHd.png I'm encountering an issue where I need to add a line break in the "content" so that the .down ...

Can the limit value of an SQL query be replaced with input from an HTML form?

Here is my question: SELECT * FROM learning_assessment.tbl_qna order by rand() limit 10; The table tbl_qna contains questions. My goal is to replace the static limit value of "10" with a number entered by an administrator in an input field. <html> ...

show up on page where I am located, not just in the center

My AJAX code displays 81 products per page. When I click the add to cart button, a div appears in the center of the page. However, when I add a product to the last or bottom of the page, the div always appears in the center and I have to scroll up to see ...

Exclusive Functionality: Bootstrap Drop Down Navigation in ASP.NET Only Functions on Main Pages

I am in the process of developing an internal application with ASP.NET 4.0 using the Yeti Bootstrap Theme. One issue I am encountering is with the navbar dropdown navigation. Pages that are located in the website's root can utilize the dropdown featu ...

The symbols ">>" have been changed to "�"

There has been a report from one of our application users stating that they are seeing the character � instead of >> on their home and other pages. This issue is only affecting one out of 100 users, and the user in question is using IE11. What c ...

Is it possible to break a single word when word wrapping?

Is it possible to apply word-wrap: break-word to just one word within an element without affecting the entire element? I find that when I apply it to the entire element, it looks messy. I tried searching for a solution but couldn't find anything. Has ...

Having trouble finding the element for an image of a body part using xpath

When using driver.findElement(By.xpath(".//*[@id='bodyPartContainer']/div[1]")).click(); to select a part of the human body image, I'm encountering the following exception in webdriver: org.openqa.selenium.NoSuchElementException: no such ...

What is the best way to apply a class for styling my JavaScript code in CSS? I'm having trouble getting classList

I am having trouble adding a class to my JavaScript script in order to animate the images created in JavaScript to fall off the page. I have tried using the code element.classList.add("mystyle");, but every time I insert it, my JavaScript stops working. T ...