Css – Calculate width of divided container
I'm trying to set the width of the striped area in my drawing below, so that it falls within the bounds of the site content. The width of the content is 80%, with a maximum width of 1080px, and centered…
How to use a "reverse percentage"/unitless calculation in a CSS calc()?
I would like to use the following calculation in the width and height of an element: (1 / 0.65) * 100, then the % sign So that the width & height are set to 153.85%. However I believe the first…
Html – CSS Counter and Calc function
I want to know how I can combine the counter css function with the calc function for me to supperpose a list of icons. <style> .list-counter{ counter-reset: list; } .list-counter div:not(:first-child){ counter-increment: list; transform: translateX(calc(counter(list) * -1rem)); } </style> and…
CSS HSL-Triangle
I try to build a website with a color picker. For that, I would like to use some sort of semicircle with which you can choose the hue and a triangle with which you can choose the saturation and lightness.…
Html – Calc with a multivalue css variable
I want to make a hover effect over a p-tag, when hovered the background should get darker. I used filter:brightness(85%) but this made also the text darker. Here is my css. :root { --my-color:193 55% 40% } p { background-color:hsl(var(--my-color));…
How can CSS get the width of a window in px?
I'm currently trying to write code that centers a website for which the content is exactly 895 pixels wide, and I want it to be centered. So, I'm trying to write the following in CSS: body { ... padding-left: calc(([window…
Diagonal length of viewport using plain CSS
My goal is to create a absolutely-positioned circle with radius equal to the viewport's (sv*) diagonal length. I tried calculating the diagonal length of the viewport based on the width and height using the Pythagorean Theorem like so: .circle {…
Calculating new value of CSS variable based on existing value
How do I recalculate a new value of a CSS variable (custom property) in a sub-element using calc() to modify the value inherited from a parent element? This doesn’t work: div { height: var(--foo); border: 1px solid #f00; } .a…
How do I debug CSS calc() value?-Twitter bootstrap
I have relatively complex formulas e.g. transform: scale(var(--image-scale)) translateY(calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y))) how do I debug calculated value? moreover is there a way to validate/highlight formulas errors? I tried to output like this…