I use this CSS for create opacity in background of div:
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
The problem in my case is that this way changes the color of font inside of div and the border color of div. Are there any alternatives that don't change the font's color?
When setting opacity, it is set for the whole div. If you want only want to make the background slightly transparent, you'll have to use rgba!
Example:
div {background-color: rgba(0, 0, 0, 0.5);} /* Black rgb(0,0,0) + 0.5 opacity */
div {background-color: rgba(255, 255, 255, 0.7);} /* White rgb(255,255,255) + 0.7 */ opacity
Ofcourse you have to integrate the background color that you had into the rgba code. The first three numbers are the normal red green blue values and the last one is the opacity (from 0 to 1).
Here is a useful tool to convert HEX values (like #ffffff) to rgba(a) values!
You can set opacity for background color:
background-color: rgba(0, 0, 0, 0.5);
See this example: http://jsfiddle.net/eaAmP/
.myelement {
background: rgba(200, 54, 54, 0.5);
}
For browsers support click here
.myelement {
background: rgba(200, 54, 54, 0.5);
-pie-background: rgba(200, 54, 54, 0.5);
behavior: url(PIE.htc);
}
Related
I'm trying to create a line, using gradients, that becomes transparent towards every side, similar to this: Image - A vertical, bright line, that fades into the background on all sides
I have come somewhat close to recreating that. Image - The same except for some minor differences
In my best attempt, as seen above, I cheated and set the sides to the background-color:
.outer-div:before {
content: "";
background:
/* sides same color as background */
linear-gradient(to right, rgba(100, 100, 90, 1), rgba(0, 0, 0, 0), rgba(100, 100, 90, 1)),
linear-gradient(rgba(100, 100, 90, 1) 0, rgba(0, 0, 0, 0) 20% 80%, rgba(100, 100, 90, 1) 100%),
/* the actual color */
/*rgba(149, 147, 132, 1);*/
/* changed to white so it's easier to see */
rgba(255, 255, 255, 1);
float: left;
/* again, changed from 5 to 20px so it's easier to see */
width: /*5px;*/ 20px;
height: 112px;
}
<div class="outer-div">
A div with some text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text
</div>
And that's the best I could come up with.
Has anyone got any idea on how to get the sides to be actually transparent?
The easiest way is probably to use a blur on a gradient.
div::before {
content: '';
display: block;
width: 10px;
height: 150px;
background: linear-gradient(to bottom, transparent, black 20%, black 50%, transparent);
filter: blur(3px);
}
<div></div>
I've been working on this for hours and have 0 idea what to do.
Although I think I have it right, it's saying that it is wrong. I have no idea what else to do.
The question says: The page contains a review within a block quote. Go to the Blockquote Styles section and create a style rule for the blockquote element that sets the background color to rgb(173, 189, 227) and the text color to the rgb(255, 255, 255) with an opacity of 0.65.
Here is my CSS code:
blockquote {
background-color: rgb(173, 189, 227);
color: rgb(255, 255, 255);
opacity: 0.65;
}
The problem with your solution is how you're interpreting this part: "... and the text color to the rgb(255, 255, 255) with an opacity of 0.65.". It's asking to set the opacity of the text to 0.65, not of the entire element.
Using rgba should get it right:
blockquote {
background-color: rgb(173, 189, 227);
color: rgba(255, 255, 255, 0.65);
}
This question already has answers here:
Background-Image Gradient Not Animating
(2 answers)
Closed 4 years ago.
I have included a jsfiddle to simplify this.
The problem is that when the mouse hovers on the arrows, the transition is not animating as expected.
.spotlight-next {
transition: background 0.5s ease-out;
background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
}
.spotlight-next:hover {
background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
}
https://jsfiddle.net/yashiman/jqq3u1nz/2/
linear-gradient works like background-image, and how you can read here, background-image is not animatable.
This is pretty obvious, because there's no a standard way to animate a background-image. You could want to animate it with a fade-in effect or with a swipe-left effect, this is ambigous and I don't understand why you say it doesn't work "as expected". What was expected?
You should leverage on setting transition for other properties, like opacity or width.
This is an easy way to implement a fade effect on the background-image property, using the ::after pseudo-element:
.spotlight-next::after {
display: block;
content: "";
width: 100%;
height: 100%;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.5s ease-out;
background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
opacity: 0.1;
z-index: -1;
}
.spotlight-next:hover::after {
opacity: 1;
}
remove transition and background-image property from .spotlight-next in order to make it work.
I'm trying to get a similar effect to the one here (in this case on focus in a form field). However I want it around a small image, and to occur on hover. Obviously I can create two sprites, and in CSS replace the image with the glow image on hover, but this would not include the animation. So currently I have:
img.glow {
-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
}
img.glow:hover {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
This works, but the problem is that my image has rounded corners and the glow effect occurs around the the image as a whole (i.e. it treats the image as a square, and leaves small white corners within the glow, whereas I want the glow to hug the edges of the image). The image is a transparent PNG. Is what I want to do possible?
Just add a border-radius property, so that your img element has nice round corners. The shadows will follow the shape of the element.
I'm wanting to add a transparent black overlay to a button for it' :active state, so when you click it, it's the same gradient but with just an overlay of e.g. rgba(0,0,0,.3)
The way I thought this would work is (using webkit in this example):
background:rgba(0,0,0,.3), -webkit-linear-gradient(top, #fcfcfc 0%,#bababa 100%);
or without the comma, and the order reversed... but nothing shows up at all!
I'm not keen on adding another div to act as the overlay to do it, so is there a strictly CSS way to do this? I was thinking maybe it's a :before or :after pseudo class, but I don't have a clue how to use these!
Would really appreciate an answer, this has been bugging me for a long time.
You can't do that; rgba defines a colour, not an image. What you can do is use a gradient that's not a gradient:
background: -webkit-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), -webkit-linear-gradient(top, #fcfcfc 0%,#bababa 100%);
This is why I always specify background-image instead of using the shorthand when developing - it makes debugging easier.
You can do it with ::after pseudo-element.
First, you need to define the button CSS with position: relative and then use ::after with position: absolute, like this:
.button {
position: relative;
}
.button:active::after {
content: ' ';
position: absolute;
background: rgba(0, 0, 0, 0.3);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Live Fiddle demo
Think in Reverse
Set background-color: black and overlay the gradient with your colors converted from hex to rgba (initially set to 1 for alpha), then on :active fade the gradient to 0.7 (which will show 30% black) alpha.
See the fiddle.
button {
background-color: black;
background-image: -webkit-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(186, 186, 186, 1) 100%);
background-image: -moz-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(186, 186, 186, 1) 100%);
}
button:active {
background-image: -webkit-linear-gradient(top, rgba(252, 252, 252, .7) 0%, rgba(186, 186, 186, .7) 100%);
background-image: -moz-linear-gradient(top, rgba(252, 252, 252, .7) 0%, rgba(186, 186, 186, .7) 100%);
}