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;
`
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 a requirement of displaying multiple images in cards and I want to write some text over them. These are random images uploaded by users, so can be of any color. Need the white text on top of them to not be transparent as shown in attached fiddle.
This is an example fiddle - http://jsfiddle.net/7dgpbLd8/1/
This was my solution to add some gray div over image. But, the text should be always white on a gray background. But it is also shadowed here. It would be great to know how to shadow the actual background so text is readable.
Either follow Lee's advice (though I'd recommend adding some padding) or use text-shadow, like so.
div {
width: 100px;
height: 100px;
margin: 20px;
text-align: center;
line-height: 100px;
color: white;
text-shadow: 0 1px black;
}
.dark {
background: #333;
}
.light {
background: #ccc;
}
<div class="dark">Some text</div>
<div class="light">Some text</div>
Or you can ever merge our two approaches.
div {
width: 100px;
height: 100px;
margin: 20px;
text-align: center;
line-height: 100px;
}
.dark {
background: #333;
}
.light {
background: #ccc;
}
span {
color: white;
text-shadow: 0 1px black;
background: #333;
background: rgba(0, 0, 0, 0.18);
padding: 4px 8px;
}
<div class="dark"><span>Some text</span></div>
<div class="light"><span>Some text</span></div>
The problem with your post is that you set the opacity. However, when you lower the opacity, not only does the background change, but also all its content. In other words, the text also has a lower opacity in your fiddle. In my fiddle, presented above, you do not have this problem because you use rgba. RGBA uses the default RGB color representation, but adds an alpha layer component to that (i.e.: opacity). This means that you can add a color that is (semi-)transparent.
It works in the same way as opacity, simply add the value you want for the color (let's say 0.8), and add it after the default rgb values. An example: RGB for white is 255,255,255 and for black 0,0,0. If you want those to have an opacity of 0.8, add 0.8 at the back: rgba(255,255,255,0.8) or rgba(0,0,0,0.8) respectively. By doing this, only the opacity of the background will change, and not that of the text. For an example, see the examples above.
I would put the image(s) in a div with a dark background, then lower the opacity of the images themselves, darkening the images so you can read the text. This way you can also darken the image on hover for better readability.
http://jsfiddle.net/3w34k1ea/
.img-wrapper{
width: 100%;
height: 100%;
background: #000;
}
img {
width: 100%
height: 100%;
opacity: .5;
}
img:hover{
opacity: .3;
}
p {
color: white;
position: absolute;
top: 15px;
left: 15px;
font-size: 20px;
}
I would use text shadow in your position but insteed of one I would experiment with multiples shaodws till reaching the best solution. For example:
text-shadow: 2px 2px 5px rgba(0,0,0,0.8), 0px 0px 2px rgba(0,0,0,1);
FIDDLE
The easiest way and best result at the same time is simply using a semi-transparent overlay, e.g.: https://jsfiddle.net/zmpwunr7
<div class="box">
<div class="overlay top">
text
</div>
<img ... />
</div>
.box {
position: relative;
}
.box .overlay {
background-color: rgba(0, 0, 0, 0.50);
color: rgb(255, 255, 255);
position: absolute;
}
.box .overlay.top {
top: 0px;
}
Put the text inside a <span> tag and give it a class, then in your CSS file:
span.your-class {
background:rgba(255,255,255,0.5);
padding:1em; // Adds a nice comfortable spacer between the text and the div edge
}
This will put the text inside a semi-transparent box ontop of the image.
Experiment with your text colour, and the background colour until you're happy.
Here's an example: http://jsfiddle.net/9svp8qoh/
There are some answers here that will help you make the text more readable. But they do not darken the background images which is what you asked for. You could achieve this by using css filters, e.g. the brightness filter:
img {
filter: brightness(20%);
}
A value of 0 means a completely black image, a higher value will bring you a brighter result. Example: http://codepen.io/anon/pen/OPqRJK
Attention: only Firefox supports at the moment the unprefixed version, IE has no filter support. See http://caniuse.com/#feat=css-filters
If you need to support these browser, have a look at the answer from BenSlight. It's basically the same solution.
For further reading: there's a nice article on css-tricks.com explaining all possibilities we have with css filters: https://css-tricks.com/almanac/properties/f/filter/
I had this scenario once. I compromised creating span with opacity 0.5 and giving dark background, and then placing the text. If I understood you question correctly this could be a solution for you.
You can add opacity only to background:
rgba(255,0,0,0.5)
Check this post
you can use background property of css where in you can give color and image path
eg :-
background:#FFFFFF url("image path");
This will add background color to image.
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; ... }