Is there a way to make the spread-radius of an inset box shadow responsive, so it only takes up the amount of space needed to cover the entire div regardless of it's size? I'm trying to animate an inset box shadow so it expands outwards to the edges of the div on hover, but the amount of time this takes changes depending on the size of the div it's in. With elements that change size on screen resize, this breaks.
For example:
&.light-blue{
box-shadow: inset 0 0 0 1000px #649AD570;
transition: 1s;
&:hover{
box-shadow: inset 0 0 0 0px #649AD570;
transition: 1s;
}
}
The initial hover will take longer on a div that's smaller because the spread-radius is in excess due to the static pixel value far exceeding the dimensions of a smaller div than a larger one.
Related
Hope you're all doing fine. I have a question regarding borders in CSS.
I have a button that is 48px height, but padding sets its size dynamically instead of hardcoding the 48px height value. When I give it a 2px border, the button ends up being 52px because of the extra 2px on top and bottom.
Is there a way to include border in the total height? Like border included in layout? There is a specific reason that I don't wanna lower padding with 4px in total. Maybe stack the border on top of the padding? Is this possible?
Further reading: https://forum.figma.com/t/borders-are-not-included-in-the-size-of-frames/2372
with a font of 16px, i need a line-height of around 26px (around 10px of white space between 2 lines of text), so i set
body {
line-height:1.6
font-size:16px
}
Now the problem if in child elements i increase the font-size to for exemple 50px (title for exemple), then i will have a line height of 80px that mean around 30px of white space between 2 lines that is visually too much.
so is their a way to specify the line-height to be logarithmic ? more bigger the font is, more little the line height is ?
Simple test case:
http://cssdesk.com/K2xmN
Another Example:
http://developer.nokia.com/
Problem: When you change the zoom page to 90%, the border goes to 1.111 (1.333 at 75%) and breaks the layouts.
In the nokia website, you can see the top containers break because there is no space left. In the CSSDesk testcase, if you inspect the computed styles, you can see the border width going higher.
Why this happen? border is not set in EM or %, why does it scale?
The why has been explained but I though I'd share a workaround which I just discovered:
Often you can replace the border with a box-shadow that looks just like a border but doesn't add to the outer width of the element:
Instead of
border: 1px solid red;
write
box-shadow: inset 0 0 0 1px red;
width: 102px;
height: 102px;
The width and height of the div have to be adjusted accordingly to accomodate to the fact that the 1px of the borders on each side are gone now.
Now when zooming out the browser will still treat the box-shadow the same as the border, i.e. it won't shrink below 1px, but it will not influence the width of the element and thus the layout won't break.
Alternatively, you can probably use box-sizing: border-box; to some similar effect.
This is an artifact of the problem of scaling down a 1px border. To illustrate what happens, I have modified your test case to include zoom: 0.5;
in the css: http://cssdesk.com/zn4Lx
Notice that if you inspect the computed style, the border width will be 2px. What happens is that Chrome tries to scale down the element, but after scaling, the border still has to be 1px wide if it is to remain visible (after all, 1px is the smallest unit that can be rendered on the computer screen, and if the border width is scaled down to a floating point number smaller than 1.0, it will be rounded down to 0px and disappear). But to justify the scaling, it over-compensates by adjusting the initial width to satisfy the equation
new_width = old_width * scale
In this example, since new_width = 1px, and scale = 0.5, it re-calculates old_width as 2px. Note however that the actual width of the border that is rendered after the scaling is still just 1px.
So in your example, the adjusted old width will be approximately 1.11111111px, and the rendered border width will be 1px wide, but since all the other widths in the layout that are larger than 1px also have been scaled down by approximately 90%, there is no room for a 1px wide border, which results in a broken layout.
The box shadow solution by Shepard might not work well for elements with children that occupy all their space because the shadow will be covered by the children.
Another fix would be to use a border width larger than 1px but smaller than 1.5px.
border-width: 1.3px;
I found 1.3px or 1.4px to be the ideal value and it works in Chrome and IE11 with zoom >= 75%
How can I decrease the height of the div in relation to the height it would have been rendered natively?
Seems like a rather simple question but setting height to a percentage isn't an option, neither is margin: 0 -10px 0 0; or padding: 0 -10px 0 0; (obviously) there aren't any elements within the div I can decrease the size of, if I apply the margin it seems to work except border-radius is hurt from this process.
using jquery:
$('div').animate({'height':'-=10px'}, 1000);
the "-=10px" will decrease the current height by 10px.
When a box-shadow is applied to an element the corners are less "thick" than the middle because they don't have shadow on both sides. This creates an odd effect on full width elements.
http://jsfiddle.net/kevincox/6FhYe/18/
If you look at that example you will see that the edges are lighter. If the "banner" is at the top of a page you can spread it and shift it up but that doesn't work for the middle of the page as you can see the top.
I was wondering if anyone had a solution with no images and preferably cross-browser but I can deal with vendor prefixes for a bit. Is there something like a separate horizontal and vertical stretch?
One trick that seems to work is setting negative horizontal margins on the element, so that its ends extend outside the page, and adjusting the padding to compensate. Using your jsFiddle as an example, try changing the CSS to:
h1 {
margin: 20px -20px;
padding: 10px 30px;
background-color: #AFA;
box-shadow: 0 0 10px black;
}
Take a look at this updated jsfiddle
Each number in the shadows represents the following
The horizontal offset of the shadow, positive means the shadow will
be on the right of the box, a negative offset will put the shadow on
the left of the box.
The vertical offset of the shadow, a negative one means the
box-shadow will be above the box, a positive one means the shadow
will be below the box.
The blur radius (optional), if set to 0 the shadow will be sharp,
the higher the number, the more blurred it will be.
The spread radius (optional), positive values increase the size of
the shadow, negative values decrease the size. Default is 0 (the
shadow is same size as blur).
Color
Applying border-radius also fixes this issue (but obviously it depends on whether you want that in your design).
h1 {
margin: 10px;
padding: 10px;
border-radius: 10px;
background-color: #AFA;
box-shadow: 1px 0 10px black;
}