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);
}
Related
I have this gradient on element, and am trying to rotate only the gradient, but when I try to rotate it, as you see in the snippet, the whole element is rotating.
Any ideas?
#test {
transform: rotate(180deg);
color: #d3d3d3;
background-color: #003366;
background-image: none, linear-gradient(rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0) 100%);
height: 200px;
width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
I'm gonna be some buttons and stuff
</div>
You can simply use degree with linear-gradient to rotate it. In this case you have to use 0deg (or to top) because the default value of linear-gradient is to bottom which is 180deg
#test {
color: #d3d3d3;
background-color: #003366;
background-image:linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0) 100%);
height: 200px;
width: 500px;
}
<div id="test">
I'm gonna be some buttons and stuff
</div>
As you can see in the documentation the syntax is:
linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
Where
<angle>
The gradient line's angle of direction. A value of 0deg is
equivalent to to top; increasing values rotate clockwise from there.
You want to rotate the gradient (I think). The default is 180 degrees, so something like:
background-image: none, linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0) 100%);
Though, for 180 degrees you can just reverse the color order
This question already has answers here:
How to apply a CSS gradient over a text, from a transparent to an opaque colour
(3 answers)
Closed 3 years ago.
Is it possible to achieve this with just one div (no background images/foreground images/layers)?
Example on codepen: http://codepen.io/anon/pen/sbHAc/
Relevant CSS
ol {
border : 1px #d8d8d8 dashed;
position : relative;
}
ol:after {
content : "";
position : absolute;
z-index : 1;
bottom : 0;
left : 0;
pointer-events : none;
background-image : linear-gradient(to bottom,
rgba(255,255,255, 0),
rgba(255,255,255, 1) 90%);
width : 100%;
height : 4em;
}
Resulting effect
if the browser supports the pointer-events property (all major browsers except IE<=10) then the text under the gradient will be also selectable/clickable.
I (personally) find that using a secondary element as an "overlap" works pretty well. I do this by defining a new tag. This makes it really easy to add the desired fade out effect to any element you want using <fade/> at the end.
div {
position: relative;
}
fade {
position: absolute;
bottom: 0px;
display: block;
width: 100%;
height: 50px;
background-image: linear-gradient(to bottom,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.9)
100%);
}
<div>
text
<br>
text
<br>
text
<fade/>
</div>
Giving the fade element an absolute position with a gradient background works just as expected. As long as you remember to set the parent's position to relative.
<style>
.fade {
position: relative;
bottom: 4em;
height: 4em;
background: -webkit-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -moz-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -o-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -ms-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
</style>
Here is an example for you http://jsfiddle.net/nrgx7/
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);
}
As expected this code doesn't work in IE 8
background-color: rgba(255, 255, 255, 1);
Is there any fix for IE.Please let me know.
Many thanks,
R
Try setting a fallback background-color property like so:
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 1);
or
background-color: #fff;
background-color: rgba(255, 255, 255, 1);
Try
background-color: rgba(255, 255, 255, 1);
*background-color: #FFF;
Also, you are using opacity 1, do you really need to use rgba here?
Some help:
http://caniuse.com/#search=rgba
For IE, if you want equivalent of background-color:rgba(....)
use this :
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);
This is black color with opacity (the two first digits)
Here one generator for that:
http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
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%);
}