Exploring the benefits of utilizing CSS Variables for adjusting position offsets in

I've been learning about using native CSS variables to declare colors, but I'm curious if it's possible to create a variable for adjusting top and left positions. In my CSS template, text boxes are overlaid on an image, and the layout changes frequently by the designer. I'd like to achieve something similar to this:

    :root {
      --topOffset: 10px;
      --leftOffset: 20px;
    }
    
.text_Date_Overlay {
    position: absolute;
    top: calc(516px + var(--topOffset));
    left: calc(570px + var(--leftOffset));
    font-family: Verdana;
    font-size: 18px;
    font-style: italic;
}

Is there a way to do this without involving JavaScript?

cssvariables

Answer №1

To enhance your design, you can incorporate the use of the calc() function in CSS as demonstrated below.

:root {
  --topOffset: 10px;
  --leftOffset: 20px;
}

.text_Date_Overlay {
  position: absolute;
  top: calc(516px + var(--topOffset));
  left: calc(570px + var(--leftOffset));
  font-family:Verdana;
  font-size:18px;
  font-style:italic;
}

Explore an Example on JSFiddle

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

When the getImageData event is triggered upon loading

Hello, I have a script that identifies transparent and non-transparent pixels. Currently, the result is displayed from a 100px by 100px rectangle on mouseover: var data = ctx.getImageData(100,100, canvas.width, canvas.height).data; During mouseover, it s ...

javascripthtmlcssoopecmascript-5

Bootstrap 5 - Dropdown menu - Links unresponsive to user interaction

Often, I want to incorporate a Bootstrap 5 dropdown menu into my project, but I encountered an unexpected issue. The menu opens correctly, but when I hover over the menu items, the hover effect is not triggered, and clicking on a link does not work. It ap ...

htmlcssbootstrap-5

Get rid of just this one specific element using jQuery

I have implemented a feature where tasks are dynamically added to a list when the input is entered and its length is less than or equal to 30 characters, followed by clicking a button. Each task comes with a trash icon for removal, sourced from an externa ...

javascriptjquerycss

CSS/ Javascript - emulate the appearance of the image using CSS3 or Javascript (sticker-like design)

Hi, I need help figuring out how to recreate this image using only CSS for the font and style. I attempted it with this code on JSFIDDLE: JSFIDDLE CSS *{ font-family: 'Asap', sans-serif; font-size:130px; color:#444; ...

javascriptjquerycss

What is causing the Bootstrap 5 navbar to not collapse?

Struggling to compile Bootstrap 5 with sass, I have a feeling that I might be missing some important scss files. When I added the <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7 ...

htmlcsstwitter-bootstrapsassbootstrap-5

Dynamic mouse parallax effect enhances the experience of a full-screen responsive background

I am looking to create a background that covers the entire viewport, similar to the example shown here: https://css-tricks.com/perfect-full-page-background-image/ Additionally, I want to have 5 images stacked on top of each other (essentially 5 layers of ...

htmlcss

Challenges experienced during the process of uploading a website to the server

I seem to have encountered an issue where the Navigation background image is missing after uploading my website onto the server. Surprisingly, everything else seems to be working perfectly. What could possibly be the cause of this discrepancy? navbar-de ...

javascripthtmlcss

Using Jquery slideToggle is creating additional spacing between inline-block divs

I am struggling with displaying a list of cities in an inline format. <div class="accordion-container"> <a href="#" class="accordion-toggle">London</a> <div class="accordion-content"> <p>Inform ...

javascriptjqueryhtmlcssslidetoggle

Is it possible to customize the color of an SVG image within Next.js using next/image?

import Image from 'next/image' ... <Image src="/emotion.svg" alt="emtion" width={50} height={50} /> I am trying to change the color of the SVG using next/image. However, applying the following CSS rule does not seem ...

cssreactjsnext.jsstyled-componentsnextjs-image

Selenium: What causes the CSS selector to fail in IE10 while working fine in Firefox and Chrome?

from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC wait = WebDriverWait(webdriver, 10) elem = wait.until(EC.visibility_of_element_located( (By.CSS_SELECTOR, '.top_laye ...

cssseleniuminternet-explorer-10

What steps can be taken to address issues with the counting system in a lootbox opening

I am currently developing a virtual loot box simulator and have encountered a challenging issue. My goal is to track the quantity of Normals, Legendaries, Epics, and Rares obtained by the user. However, I am facing a problem where instead of updating the c ...

javascripthtmlcss

Maintain the fixed position of the table header while scrolling

I am facing an issue with my table setup - I want the header to stay fixed while scrolling through the body. Here is how my table structure looks: <table> <thead> <tr> <th>Header 1</th> ...

jqueryhtmlcsshtml-tablecss-position

The code @media (max-width: 767px) { /*content*/} is malfunctioning

While working on making my webpage responsive, I discovered that the key CSS modification for responsiveness is the @media rule. However, I am facing an issue with one specific part of the code. @media (min-width: 768px) and (max-width: 979px) { .drop ...

htmlcssresponsive

Adaptive component transformation

Hey there, I'm having some trouble figuring this out... I need help with making sure that the element identified by the red rectangle in the images moves in alignment with the containers below, regardless of the screen size. I want to create a respon ...

csshtmlresponsive-design

What is the best way to align the progress bar near the element that initiated the task?

I am currently working on a dynamic website with jQuery, utilizing AJAX operations extensively. Whenever an AJAX operation is initiated, a progress bar is displayed in the center of the webpage. However, I am facing an issue where visitors find it cumbers ...

javascriptjquerycssajaxjquery-ui

Extracting parameters from a text document using PHP

I have searched extensively and haven't found anything that addresses my specific issue, so please refrain from downvoting without providing an example of where you have encountered a similar situation... I am attempting to create template files in a ...

phptemplatesvariables

The small device screen in Bootstrap 4.5 is experiencing an issue where two rows are overlapping

I recently started learning Bootstrap and encountered an issue. When resizing the browser screen to a smaller size, I noticed that the rows within separate containers were overlapping. Screenshots have been provided for reference. Can someone please guide ...

javascripthtmlcssbootstrap-4

Is there a way to modify the color of the text within the Link tag of the react-router in a react component?

Struggling to modify the text color in my Navbar component within the Link tag of react-router-dom, but it's stubbornly refusing to change. Utilizing styled components Beneath is the complete code for my navbar component import React from 'reac ...

cssreactjsstyled-components

Fixing alignment and responsiveness problems with a hovering circle div

I have 3 circular divs that resize slightly when you hover over them, but this resizing also occurs if you hover near them. Additionally, I want them to be centered with some responsive spacing. Here is a live demo: demo Below is my code: <div id ...

htmlcssresponsive-design

How do I design a side navigation panel with a left border similar to the one shown in the image?

Looking to implement a side navigation with active class in Vue3 while also adding a border-left style similar to the image provided. https://i.sstatic.net/Q4dN3.png The current setup looks like this: https://i.sstatic.net/PupIX.png Here's an excer ...

cssvue.jsvuejs3tailwind-cssvue-router4