I have a div that expands in height and changes it's border color on hover.
This is the CSS:
div.options {
width: 80%;
height: 62.7px;
margin: auto;
border-radius: 15px;
border: 3px solid #d0d0d0;
overflow: hidden;
transition: height 1s, border-color 1s;
}
div.options:hover {
height: 627px;
border-color: #656565;
}
<div class="options">Hello</div>
It works as it should on hover, but the problem is that the border color of the div changes from default black to the specified #d0d0d0 right on page load. The problem only occurs with ctrl+f5 reload, not regular reload. How do I make it not do that thing it does?
I have tested this on Firefox 72, Edge 84, and IE 11 with your code and a div like this:
<div class="options"></div>
It is functioning, there is no color flickering from black on page load with or without CTRL+F5.
Perhaps it is something from your side.
Related
I've noticed an unanticipated effect of using CSS color transitions on an image with a transparent background. Here's an example:
:root {
--size: 4em;
--duration: 5s;
}
html, body {
margin: 0;
background: slategray;
color: white;
}
.main-menu {
overflow: hidden;
background: black;
}
.main-menu *:hover {
background: skyblue;
-webkit-transition-duration: 5s;
transition-duration: var(--duration);
}
.image-div {
float: right;
padding: calc(var(--size) / 2);
-webkit-transition-duration: 5s;
transition-duration: var(--duration);
}
.image {
max-width: var(--size);
}
<div class="main-menu">
<div class="image-div">
<img class="image" src="https://s4.postimg.org/5zy6kjqcd/maximize.png"/>
</div>
</div>
To summarize, the issue is this. If you hover over the image-div div's padding, the background color of this div and the contained image div execute the color transition at the same rate, as expected. However, if you hover over the image div, its color appears to transition slightly faster than the image-div div's color.
Given the fact that I was able to reproduce this exact behavior on Firefox, Chrome, Safari and Edge, I get the feeling that this is expected behavior, but I would like to understand why it is happening.
When you hover over the img two hover events are triggered - one on the img and one on its parent image-div when you use * in .main-menu *:hover selector:
Instead use the hover only on the image-div as below:
.main-menu .image-div:hover {
background: skyblue;
}
and now the difference in transition will not be there - see demo below:
html, body {
margin: 0;
background: slategray;
color: white;
}
.main-menu {
overflow: hidden;
background: black;
}
.main-menu .image-div:hover {
background: skyblue;
}
.image-div {
float: right;
padding: calc(4em / 2);
-webkit-transition-duration: 5s;
transition-duration: 5s;
}
.image {
max-width: 4em;
}
<div class="main-menu">
<div class="image-div">
<img class="image" src="https://s4.postimg.org/5zy6kjqcd/maximize.png"/>
</div>
</div>
Given the fact that I was able to reproduce this exact behavior on
Firefox, Chrome, Safari and Edge, I get the feeling that this is
expected behavior, but I would like to understand why it is happening.
The reason this happens is because the img transition picks up the image-div transitioned color, hence get lighter faster.
Simply put, the image-div goes from a solid black, while the img goes from black that turns into sky blue.
Additionally, since you move the mouse over the image-div before it gets to the img, the transition starts before, though the delay is based on how fast you move the mouse to the img
I'm trying to create an "enhanced" radio button by use of an inset box-shadow.
Here's a CodePen of what I got so far
What I'm trying to do is to make the background of the .radio-button <div /> be used as the color of the box-shadow. In my current solution, the color is set to #fff, which works on a white background, but not when the background is gray.
Setting it to currentColor sets the color of the box shadow to the border-color value, which is #333;
Setting it to inherit seems to disable the box-shadow, at least in Chrome. Makes sense in a way I guess, i'm assuming inherit doesn't work for parts of a property like here.
Not setting it at all defaults it to the value of color, which is black.
Is there a way to achieve what I want to do without JavaScript?
CSS does not provide a special value that corresponds to the computed background color of an element akin to currentColor (which corresponds to the foreground color; that is, color — it shouldn't be corresponding to border-color even if it's set to a different value to color).
You could cheat by setting color to the desired background color and background-color: currentColor along with the box shadow, putting the label text in its own element within the label element, and giving that new element the intended font color.
The inherit keyword can only exist by itself in a CSS declaration. It cannot be used as a single component in a set of values. This means while box shadows can inherit, the entire box-shadow property must be inherited in full. When that happens, what ends up inherited is the box shadow of the parent element — which won't work either since the parent has no box shadow.
I still don't fully understand what are you trying to do ...
May be something like that ?
.test {
width: 60px;
height: 60px;
border: solid 2px black;
border-radius: 100%;
margin: 10px;
display: inline-block;
background: radial-gradient(circle, white 10px, transparent 30px);
box-shadow: 2px 2px 6px 0px black;
}
body {
background-image: linear-gradient(to right, red 90px, green 90px, green 180px, blue 120px);
}
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
CSS doesn't provide much ability to create the 'padding of transparency' that you are looking for, however there is a way with a pseudo-element.
You need to drop the box-shadow and any background on the circle, and instead envisage the central dot as a separate element that will 'float' on top:
.radio-button-input + .radio-button-circle {
display: inline-block;
width: .8em;
height: .8em;
margin-right: .5em;
border: 2px solid #333;
border-radius: 50%;
transition: background-color .1s ease-out;
position: relative;
}
.radio-button-input + .radio-button-circle:after {
content: ' ';
display: block;
background-color: transparent;
transition: background-color .1s ease-out;
width: .55em;
height: .55em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 100%
}
.radio-button-input:checked + .radio-button-circle:after {
background-color: #333;
}
I have read a lot of topic about this problem but nothing has worked so far.
the easiest method I have read about involves using box-shadow, but this results in the shadow having a different color to the box even though the code of the color is the same (#141414).
Question
How can I get a fade-out/blur border for a div box? It's quite hard to explain in writing so I made this image to give you the idea (ignore the background). If you look closely you can see the blending and the color is uniform, fading to transparent.
box-shadow as i said, doesn't work for me.
body {
background-image:url('http://phptesting.altervista.org/tessuto.png');
background-repeat: repeat;
}
div {
width: 300px;
height: 300px;
background-color: #141414;
border: 2px solid #141414;
box-shadow: 0 0 5px 5px #141414;
border-radius: 10px;
}
<html>
<body>
<div></div>
</body>
</html>
box-shadow IS actually the only CSS way to get this effect. Try something like this:
div {
margin: 25px 10px;
width: 100px;
height: 100px;
background: #141414;
box-shadow: 0 0 15px 10px #141414;
}
<div></div>
changes the color with fade effect
#yourIDhere:hover{
transition-property: border-color;
transition-duration: 0.5s;
border-color: #976958;
}
Here is how to fade a border using Styled Components. It is based on https://styled-components.com/docs/api
Other answers provided a way to animate the component but I just wanted to fade the border, not the component. After playing with it I realized that I just have to specify the border attribute.
import styled, { keyframes } from 'styled-components';
const fadeOut = keyframes`
0% { border: 2px solid blue; };
100% { border: 2px solid white; };
`
const MyStyle = styled.div`
animation: ${fadeOut} ease 3s;
transition-property: border-color;
transition-duration: 0.5s;
`
I've a html formular in a part of a website, which only specific administration users can access. In this form, you can upload csv files. As only a small group of users can do this, the functionality is more important than the styling. So I decided not to do the usual trick overlaying a div over the field. I just want to archive one thing: The text in the field should look the in Chrome the same as in FF (vertical and horizontal centered text).
Here you can see the both renderings:
FF: http://i.stack.imgur.com/wbHhG.png
Chrome: http://i.stack.imgur.com/1BFHu.png
HTML-Code:
<input type="file" class="button blue full-width" name="csv_file" id="csv_file">
CSS-Styles:
color: #fff;
height: 50px;
line-height: 50px;
padding: 0 10%;
background-image: url("../images/item-hover-button-addtocart-normal.png");
border: medium none;
margin-bottom: 10px;
background-color: #fff;
text-align: center;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
display: block;
font-size: 14px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
You can fix one of the issues by adding this css:
input[type=file]::-webkit-file-upload-button {
margin: 1px 0;
height: 48px;
}
This makes the button take up more height like in FF and also makes the text vertically centered..
Not so sure how to horizontally center it though, maybe someone else might know a trick.
A jsfiddle to show it working: http://jsfiddle.net/bcwk8qvt/
[edit]
You can make it centered horizontally by adding most of your original CSS to a div wrapped around the input field like this:
http://jsfiddle.net/bcwk8qvt/3/
You still need to keep some of the css on the input field too though for FF to show it the same way.
I'm creating a function where you hover over a div, which will result in another div appearing; a simple, CSS-only pop-over.
However, whenever the pop-over-div has an opacity:0, it still has a physical height and width, rendering other divs under the pop-over unreachable.
I know I can work with display:none and display:block, but this will remove the possibility of adding a smooth "arrival" of the div; it'll just pop in and out of the screen.
The question: Is there a way to remove the physical dimensions of a div with opacity:0?
In my JSfiddle, you will notice you can get the .iconhover to appear when you hover over the H or e. If you hover over the rest of the word, you're officially hovering over .iconhover and not .wishicon, resulting in the pop-over not showing up.
I hope my question is clear enough.
HTML
<div class="qs">
<div class="wishicon">Hello world</div>
<div class="iconhover">Hovering...</div>
</div>
CSS
.iconhover {
height: auto;
width: 100px;
margin-left:-0px;
color: #fff;
background-color: #666;
box-shadow: 0 1px 0px rgba(0,0,0,1), 0 2px 0px rgba(0,0,0,1), 0 2px 10px rgba(0,0,0,.5);
margin-top:-20px;
margin-left: 20px;
border-radius: 5px;
opacity: 0;
font-size: 12px;
line-height: 1.5em;
font-weight: normal;
transition: opacity 0.5s, margin 0.5s;
-webkit-transition: opacity 0.5s, margin 0.5s;
padding:4px 20px;
text-align: center;
position:absolute;
float: left;
}
.qs > .wishicon:hover + .iconhover {
opacity: 1;
margin-top: -20px;
margin-left: 20px
}
I have a terrific solution which I use often.
On the element with opacity: 0 put pointer-events: none.
It will still have the dimensions, but it will be as if all events are inactive.
Then when you want it to be opacity: 1, return pointer-events to auto.
This is the next best thing to using display: block/none but it can be transitioned!
That would certainly be nice, but alas, I'm not aware of any "ghost" CSS property.
I would treat it the same as a hover menu: make the parent hoverable instead of the previous sibling:
.qs:hover > .iconhover { opacity: 1; ... }