Titles says it all. Is it possible to do without any extensions?
Use a Chrome Extension, this one works great for checking pixel distance between any web elements.
https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj?hl=en-US
Hope this helps
I was struggling with this and found an answer in devtools. First, in responsive mode, to the far right in the header there is a More options menu that has a Show rulers option. Select that. Then in the details settings under Elements, there is a Show rulers option to check. With both of those, selecting an element will show lines extended from the rulers to the element so you can see their location. You can see begin and end for various elements to calculate spacing between. I needed to handle spacing to edge so it was a little easier.
I don't know how to turn on the rulers when not in responsive mode, but they remained when I went back to a web layout.
Would this approach work? Get hold of an image containing alternating black and white dots(like a chess board) where each dot is 1 px. Make it the background image. You can zoom in like around 1000% and count the number of dots.
One thing you could do is using the Console tab to compute the horizontal or vertical distance between two elements using dimension/position properties/methods such as Element.getBoundingClientRect() or HTMLElement.offsetTop, but I guess you are looking for something that works more like a tool rather than coding your own solution.
Another maybe more usable option would be to use the Elements > Styles panel to add some kind of visual effect incrementally that allows you to measure what you need. For example, you could add a box-shadow / outline to an element and increment its size pixel by pixel until it touches the element next to it, so that you know how many pixels separate them.
Here's a simple code example / "demo" so that you see exactly what I mean:
html,
body {
width: 100vw;
height: 100vh;
margin: 0;
}
div {
position: absolute;
display: flex;
border: 3px solid black;
top: 10px;
bottom: 10px;
width: 100px;
box-sizing: border-box;
}
.a {
left: 10px;
}
.b {
left: 120px;
animation: measure 2s linear 0s infinite alternate;
}
#keyframes measure {
0%, 10% { box-shadow: 0 0 0 0px red; }
10.001%, 20% { box-shadow: 0 0 0 2px red; }
20.001%, 30% { box-shadow: 0 0 0 3px red; }
30.001%, 40% { box-shadow: 0 0 0 4px red; }
40.001%, 50% { box-shadow: 0 0 0 5px red; }
50.001%, 60% { box-shadow: 0 0 0 6px red; }
60.001%, 70% { box-shadow: 0 0 0 7px red; }
70.001%, 80% { box-shadow: 0 0 0 8px red; }
80.001%, 90% { box-shadow: 0 0 0 9px red; }
90.001%, 100% { box-shadow: 0 0 0 10px cyan; }
}
<div class="a">A</div>
<div class="b">B</div>
Other than that, your best option is to use an Extension.
I would recommend Dimensions, a Chrome Extension that will constantly and automatically measure vertical and horizontal space as you move the cursor until it finds an "obstacle", which is way faster and easier than drawing a box to take a measurement, as most of the other measurement/ruler extensions do.
You can use firefox developer tools as it supports measuring pixels and distance out of the box. It does not need any external plugin.
Please check here
Related
Let's say someone is working on a web site that allows users to create a profile. This designer really likes the way input fields look with rounded corners, but Chrome's autofill feature is doing something odd to them. Of course, they could take the easy way out and remove the border-radius definition, therefore avoiding the weird corners, but then the site wouldn't have the look they were hoping for.
Here are before-and-after images of what the fields would look like when autofill is used.
And here's a JSFiddle for anyone that would like to play around with it.
If helpful, here is the relevant code being used to modify the fields:
.field {
background-color: #202020;
border: 1px solid #000;
border-radius: 4px;
box-shadow: 0 0 5px #000;
color: #d8d8d8;
}
input:-webkit-autofill {
box-shadow: 0 0 0 100px #202020 inset, 0 0 5px #000;
-webkit-text-fill-color: #d8d8d8;
}
Several attempts were made to find the culprit behind this problem, including removing the outer shadow from both definitions, as well as changing the inner shadow's position and blur radius. The greyish corners were still there. The only real "solution" was to revert to square corners, but that option is being reserved as a last resort.
After numerous searches for a solution to this issue, all that could be found were ways to circumvent the default pale yellow background. And that's great news, but the designer is still left with those ugly corners. Is there a way to get rid of them entirely and maintain the field's original style? or is it a glitch that has no work-around?
Thank you for any insight or help you can provide.
Kreven's solution, while not the most elegant line of code, will definitely get the job done for most people I reckon. However, I'd like to modify it a bit and explain why it even works in the first place. Let's take a look at this line of code:
transition: background-color 2147483647s;
Here is a transition that would take 68.24 years to complete. Looks silly, right? If you're wondering where that magic number came from (2147483647), this is the maximum size of an integer, and thus the maximum duration for a CSS transition. What this transition is doing is making it take 64 years for your browser's autofill implementation to change the background color of your input.
It's also worth noting that this cheap trick will negate the need for you to use the "-webkit-box-shadow" CSS command (unless, of course, you need the autofill background-color to be different than the non-autofill background-color).
Hope this helps somebody! Cheers.
I found that increasing the border width and making it the same colour as the input background seems to help. Then reduce the padding to achieve the same height:
https://jsfiddle.net/Lguucatv/1/
border: 4px solid #202020;
padding: 1px;
Also modified the box-shadow to match original design:
box-shadow: 0 0 0 1px #000, 0 0 5px 1px #000;
Is there a way to get rid of them entirely and maintain the field's original style?
Here is the css
body {
background-color: #282828;
}
.field {
background-color: #202020;
border: 1px solid #000;
color: #d8d8d8;
margin: 100px; /* adding space around it to */
padding: 5px; /* make it easier to see */
}
input:-webkit-autofill {
box-shadow: 0 0 0 100px #202020 inset, 0 0 5px #000;
-webkit-text-fill-color: #d8d8d8;
}
DEMO
add transition to background-color with high animation time to the .field element
.field {
...
transition: background-color 5000s;
}
solutuion found here
demo on codepen
I fixed the problem by adding this to my css:
#media (prefers-color-scheme: dark) {
[data-theme*=dark] {
color-scheme: dark;
}
}
I noticed that my page was lagging when I hovered over an element with an animated box-shadow. Using Chrome's Devtools, I noticed that the entire page was being repainted when I hovered over the element. The repaint was taking 40+ milliseconds, or about 3 frames. The transition lasts about half a second, so there's noticeable lag during the half second.
How do I limit the repaint to just the area with the box shadow?
Here's a demo: http://jsfiddle.net/8sa41xfL/
html,body{
height:100%;
}
#test{
background:red;
height:100px;
width:200px;
transition:box-shadow 0.5s;
}
#test:hover{
box-shadow:0 0 3px 3px rgba(0,0,0,0.3);
}
<div id=test></div>
transform:translateZ(0) doesn't work on my page, but it works in the fiddle. Is there another fix aside from transform:translateZ(0)?
As mentioned in the thread linked in Pierre's answer box-shadow are expensive to paint. Explaining why it is expensive would require in-depth understanding of the way rendering works and I don't have near enough knowledge to explain it completely. But this answer attempts to explain why the whole page gets repainted and the various possible methods to avoid it.
According to CSS Triggers website:
Changing box-shadow does not trigger any geometry changes, which is good. But since it is a visual property, it will cause painting to occur. Painting is typically a super expensive operation, so you should be cautious.
Once any pixels have been painted the page will be composited together.
Why does the whole page get repainted everytime?
The below articles explain the way that painting actually works at a high level:
HTML5 Rocks - How Browsers Work - Painting
The Chromium Project - GPU accelerated rendering in Chrome
Based on those articles, we can see that each node in the DOM tree that produces a visual output is considered as a RenderObject and that each RenderObject is part of a RenderLayer directly or indirectly. Whenever a change happens, the renderer (or the render object) invalidates its rectangle (or RenderLayer) on screen and triggers a repaint.
In this case it seems like the whole page is getting repainted because the #test element does not warrant the creation of a separate RenderLayer (based on the criteria mentioned in the Chromium Project article) and so becomes a part of the root render layer. Because it is a part of the root render layer the whole page is getting repainted everytime a repaint is required.
The following snippet proves that the above assertion is correct. Here, I have added a #cover element (with positioning) to enclose the #test element. Now since the #cover element has explicit positioning, it creates an extra layer above root layer and #test becomes a part of this intermediate layer. Now, we can see that the box-shadow transition repaints only this intermediate layer and not the whole page.
html,
body {
height: 100%;
}
#cover {
position: relative;
}
#test {
background: red;
height: 100px;
width: 200px;
transition: box-shadow 0.5s;
}
#test:hover {
box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
}
<div id=cover>
<div id=test></div>
</div>
What is the solution?
There are various CSS properties that can be used to address this problem but they all seem to point to the same point at a high level - which is, to create a separate render layer for the #test element.
Below are a few possible options to create a separate render layer for the #test element:
By adding explicit position properties - This is the same option described in Pierre's answer but absolute positioning is not the only option. Even relative positioning would solve it.
html,
body {
height: 100%;
}
#test {
position: relative;
background: red;
height: 100px;
width: 200px;
transition: box-shadow 0.5s;
}
#test:hover {
box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
}
<div id=test></div>
By adding transparency (opacity) - Browsers seem to treat even opacity: 0.99 as adding transparency and it is very useful because adding this doesn't cause any visual difference.
html,
body {
height: 100%;
}
#test {
background: red;
height: 100px;
width: 200px;
opacity: 0.99;
transition: box-shadow 0.5s;
}
#test:hover {
box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
}
<div id=test></div>
By adding a dummy CSS filter - We could add a filter: blur(0px) as it would do nothing.
html,
body {
height: 100%;
}
#test {
background: red;
height: 100px;
width: 200px;
-webkit-filter: blur(0px);
filter: blur(0px);
transition: box-shadow 0.5s;
}
#test:hover {
box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
}
<div id=test></div>
CSS box shadows are expensive to paint. Read more on SO here.
If you want to avoid a full page repaint, use a position:absolute on your element. This will repaint the area that surrounds your element without affecting the whole page. Fiddle.
I have found lots of posts similar to what I am asking and have been working away at this for hours and finally decided I should probably seek some exterior advice :).
I am trying to shadow 3 sides of an div using box-shadow I want the right side to be shadowless but cannot figure it out there are lots of posts on how to un-shadow the top but after countless efforts i could not even apply this.
Update:
clip-path is now (2020) supported in all major browsers.
Original Answer:
If you're willing to use experimental technology with only partial support, you could use the clip path property.
This will provide you with exactly the effect I believe you are after: a normal box shadow on the top, left and bottom edges and clean cut-off on the right edge. A lot of other SO solutions to this issue result in shadows that "dissipate" as they near the edge that is to have no shadow.
In your case you would use clip-path: inset(px px px px); where the pixel values are calculated from the edge in question (see below).
#container {
box-shadow: 0 0 5px rgba(0,0,0,0.8);
clip-path: inset(-5px 0px -5px -5px);
}
This will clip the div in question at:
5 pixels above the top edge (to include the shadow)
0 pixels from the right edge (to hide the shadow)
5 pixels below the bottom edge (to include the shadow)
5 pixels outside of the left edge (to include the shadow)
Note that no commas are required between pixel values.
The size of the div can be flexible.
I think you have 2 options:
1) Set your shadow's horizontal alignment to the left (negative values).
box-shadow: -30px 0px 10px 10px #888888;
Although this way you won't have the same shadow size in the top and bottom.
2) Use a div inside a div and apply shadow to each one.
.div1
{
box-shadow: -30px 10px 20px 10px #888888;
}
.div2
{
box-shadow: -30px -10px 20px 10px #888888;
}
Then you'll have to ajust the size for the one you want.
Here, have a jsfiddle: http://jsfiddle.net/EwgKF/19/
Use :after pseudo element : http://jsfiddle.net/romiguelangel/YCh6F/
HTML
<ul>
<li>item</li>
<li class="hello">item with after element</li>
</ul>
CSS
li {
display: block;
position: relative;
-webkit-box-shadow: 0 0 2px 1px gray
}
.hello:after{
display: block;
background-color: #f3f5f6;
width: 20px;
height: 38px;
content: " ";
position: absolute;
top: 0;
right: -10px
}
try using this example hasn't right side border:
JsBin Demo
NONE of the above responses will work.
I am assuming you are using bootstrap or a library that has box-shadow in the default buttons. Here is the solution:
.your-btn-class {
box-shadow: none /* Removes the default box-shadow */
box-shadow: -0.1rem 0 0 0.2rem rgba(134, 142, 150, 0.5); /* Add your own */
}
(if you don't remove the initial box-shadow, then when you tried to remove the offset from the right, the left side will be double the size of the top and bottom. That's why you have to remove it. If you are not sure what the default colors of the box-shadow of the library you are using. Just go to the source code and find-out, not hard at all)
If you just need to add box-shadow to you button or input on all side except the right do:
.your-btn-class {
box-shadow: -0.1rem 0 0 0.2rem rgba(134, 142, 150, 0.5);
}
How can I define background-image repeat with cap insets? I want the image to be repeated without border. Is it possible to repeat (tile) or stretch the middle in CSS?
The first (smaller) rounded rectangle is my PNG image. Red lines show cap insets I want to define. The latter (bigger) should be shown as result.
Check out the CSS3 border-image property. It's designed for this sort of thing.
.box {
border-image: url(my-image.gif) 20 20 20 20 repeat;
}
Interactive demo here.
It's supported on most non-IE browsers.
This looks like you could just solve this by using pure css3
.box {
background: white;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
Hi I'm using the next css code to style scroll bars in Safari and Chrome. And works really great but I´m facing the next issue, I would like te restore the default value, when I view the site on my ipad. I'm using #media css for achived this but, I don't know how to restore the defaults values.
#media screen and (min-width: 768px) and (max-width: 1024px) { }
/*Scroll bar nav*/
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
background:#FFF;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(204,204,204,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(204,204,204,0.4);
}
UPDATE 2022
I answered this almost 10 years ago and seems like after 2021 this solution stop working, read the solution from #Volomike, it might get you where you want to.
I just realized you can set all the properties in auto; and will do the trick. This is a self answer but I guess someday someone can have the same question.
/*Scroll bar nav*/
::-webkit-scrollbar {
width: auto;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: auto;
-webkit-border-radius: auto;
border-radius: auto;
background:auto;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius:auto;
border-radius:auto;
background:auto;
-webkit-box-shadow:auto;
}
::-webkit-scrollbar-thumb:window-inactive {
background: auto;
}
I don't know if exist another method.
-- UPDATE --
Look like you can also use the initial and unset value
//reverting all the values
::-webkit-scrollbar {
all:unset;
}
or apply to an specific one {width : unset} || {width : initial}
NOTE: Using unset will not work on IE11
Use the initial value or unset value for the properties you want to revert (depending on how exactly you want to revert them).
Both these values can be applied to all CSS properties.
example
::-webkit-scrollbar {
width: initial;
}
or
::-webkit-scrollbar {
width: unset;
}
If you want to revert all properties of a rule then you should use the all keyword
example
::-webkit-scrollbar-thumb {
all:unset;
}
Notice: No IE support for any of these as of yet.
Varying levels of support for each browser (see the linked docs for details)
I had trouble with this. I don't know what exactly triggers the latest Chrome to switch scrollbars on a desktop browser to overlay mode, but it was unnerving to me because it makes the page scroller look broken to an inexperienced user. The selected answer didn't seem to work in my version of Chrome on Lubuntu Linux 20.04.1, version 100.0.4896.127. So, over several hours, I painstakingly recreated the settings to Chrome's system defaults and yet something that works in both light and dark mode too. Note I'm only styling the BODY element's vertical scroller in this example, but you can adapt easily for horizontal scrollers as well as not just apply it to the BODY element.
BODY::-webkit-scrollbar
{
all:unset;
}
BODY::-webkit-scrollbar-button
{
display:block;
background-color:ButtonFace;
box-shadow:inset 0px 0px 0px 20px rgba(255,255,255,0.3);
height: auto;
width: initial;
background-position: center 5px;
background-size:9px 7px;
image-rendering: pixelated;
background-repeat:no-repeat;
}
BODY::-webkit-scrollbar-button:hover
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.5);
}
BODY::-webkit-scrollbar-button:active
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.7);
}
BODY::-webkit-scrollbar-button:vertical:start:increment,
BODY::-webkit-scrollbar-button:vertical:end:decrement
{
display:none;
}
BODY::-webkit-scrollbar-button:vertical:decrement
{
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='ButtonText'><polygon points='50,00 0,50 100,50'/></svg>");
}
BODY::-webkit-scrollbar-button:vertical:increment
{
background-position: center 6px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='ButtonText'><polygon points='0,0 100,0 50,50'/></svg>");
}
BODY::-webkit-scrollbar-thumb
{
background-color:ButtonFace;
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.3);
border-left:2px solid rgba(255,255,255,0.3);
border-right:2px solid rgba(255,255,255,0.3);
}
BODY::-webkit-scrollbar-thumb:hover
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.5);
}
BODY::-webkit-scrollbar-thumb:active
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.7);
}
BODY::-webkit-scrollbar-track
{
background-color:ButtonFace;
box-shadow:inset 0px 0px 0px 20px rgba(255,255,255,0.3);
}
Extra Notes:
Using the ButtonFace and ButtonText colors, you can have the scrollbar react to light and dark mode. However, that doesn't give you the varying levels of light and dark you need on the control. You'd think perhaps you could use a filter:brightness(x); level or an opacity:x level to create your varying levels of light and dark on the control -- but those oddly don't work on these scrollbars. Instead, I found that that an inset box-shadow set on wide spread, and nothing else, with rgba colors, worked well.
I found that setting width:initial, plus height:auto, on the button alone was enough to set the width of the scrollbar control parts.
I got the triangle SVGs from here. Note that I changed the fill on those to ButtonText in order to make it work in browser dark and light modes.
Note that I used rgba(128,128,128,x) in some cases because starting from white or black with opacity created odd issues when switching light and dark modes, and so I chose the middle value with opacity to get around that.
The image-rendering:pixelated was very useful because otherwise the very tiny up and down triangle SVG icon would be antialiased so much that it would look too opaque. This allowed the SVG icon to maintain its darkness on light mode, and brightness on dark mode.
I filed this issue with the Chromium browser team to see if they can give us some reliable CSS to turn off overlay scrollbars on a given element, should we need that.
https://bugs.chromium.org/p/chromium/issues/detail?id=1333947
EDIT: Recently, I found that web server cache has something to do with the Google Chrome/Chromium/Edge Chromium browsers from somewhere around version 100+ at least here around 6/17/2022. When I turn on web server cache, any sub-page on a website going back to a previous page (as a regular relative link, not as a history.back(); call), will consistently show an overlay scrollbar instead of a fixed scrollbar. But if I force the page with an .htaccess rule that is a website cache buster, then the problem goes away and I see a scrollbar like normal.
As commenter vsync mentioned, once you've hid the scrollbar, if you add a new css rule to show the scrollbar, it doesn't work as expected.
Can be solved with JS
let styles = document.getElementsByTagName('style');
for(let i = 0; i < styles.length; i++) {
let style = styles[i];
let rules = style.sheet.cssRules;
for(let r = 0; r < rules.length; r++) {
let rule = rules[r];
if(rule.selectorText === '::-webkit-scrollbar') {
style.sheet.deleteRule(r);
}
}
}