I have a div, with a gray background. within the div i have some text.
I want to blur/smooth it's top and bottom background color, not the background it self just the top and bottom like smoothing it out as you can do in photoshop for example..(top and bottom because the div's width is 100% so only top and bottom).
for example (imagine it's width is 100%):
<div id='this' style='background-color:gray; height: 500px;'></div>
To "blur" a background with a solid color, use a linear gradient.
Example:
#this {
background-image: linear-gradient(rgba(0,0,0,0) 0%, gray 10%, gray 90%, rgba(0,0,0,0);
height: 500px;
}
See <gradient> (MDN)
See linear-gradient() (MDN)
Related
I'm trying to create an effect which increases the width of a border up to a certain point, using the thickness of the border to represent a progress bar, and am wondering if there's a nice way to accomplish this while reusing the colours defined in my stylesheets.
Right now I have the element with the border contained within a div, which creates the wider part of the border by using its background color. Then, the outer container's background is styled with a linear gradient, to switch from the color of the inner element's border to the color of the background, like
background: linear-gradient(to right, red 10%, blue 10%)
This works fine, but I'm trying to avoid hard-coding the colors in the background. What I want is to dynamically vary the percentage for where the colors change as a style attribute, but would prefer the colors to be defined as part as a class. So ideally something like:
opacity: linear-gradient(to right, 0 10%, opacity 1 10%)
That way the code which alters the length of the progress bar doesn't need to be aware of the colors, making it easier for the progress bar colors to be kept consistent with the rest of the website. Any other way to accomplish the same thing would work; changing the width could work, if it didn't impact the width of the child element.
Is there a nice way to do this?
It seems you are looking for the mask property. Below is a basic example that you can adjust
.box {
height: 50px;
margin: 10px;
background: linear-gradient(to right, red , blue);
-webkit-mask: linear-gradient(to right,#000 var(--o), #0000 calc(var(--o) + 10%));
}
<div class="box" style="--o: 20%"></div>
<div class="box" style="--o: 50%"></div>
<div class="box" style="--o: 80%"></div>
I have a div with the class "fullheightcolumn" with a height of 100vh and containing an img. I want the top of the page to fade to black, so I added another div with the class "fadedblack" and wrote the following css:
.fadedblack {
height: 50vh;
background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 90%);
z-index: 999;
position: absolute;
width: 100%;
}
This works well, but I have a hover effect on the class fullheightcolumn. When I hover over the bottom 50% of the page, the hover effect works. If I go higher, it stops because obviously I'm hovering over the fadedblack element. Is there a way to effectively "lock" the fadedblack element so it's still visible, but when I hover over it, the browser recognizes it as hovering over the element behind it? Is there another way to do this?
Thank you!
I am trying to create a top to bottom fade effect from white to grey in a div box that has content in it. I am not sure what css will create this effect.
The result I want looks something like this image:
https://imgur.com/a/Ts9l0Do
This is just a cropped image of the website but as you can see it goes from a white color at the top to a darker greyish color to the bottom. This is what I want.
Try this css:
div {
height: 400px;
background: linear-gradient(to bottom, white 0%, grey 100%)
}
You can change the 'white' and 'grey' to hex codes or rgba for specific colours and change the height to whatever you need.
I'm trying to make a semi-transparent image scroll up to reveal another image below it.
So far, I've got the top image scroll up and the fixed image underneath, but I can't figure out how to get the transparent parts of the top image to show the fixed image underneath.
I've made sure that the top image is transparent and tested it by setting the top slides background color to red, which works fine, but setting it to transparent still shows as white.
In the CSS I've put both of these to no avail:
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
Could you tell me what I'm doing wrong or give me an alternate method to achieve this?
Thanks.
https://jsfiddle.net/3vw52ncb/2/
with help of jbutler483's fiddle, i have made what you want. You needed opacity to make image transparent and position: absolute; to remove white background.
Change your slide1'css with this code :
#slide_1 {
background-image: url("http://i.imgur.com/TIaK19Z.png");
background-size: 120%;
background-color: rgb(0, 0, 0, 0.2);
position: absolute;/* To remove white background */
top: 0;
opacity:0.8;/* To make the top image transparent */
left: 0;margin-bottom:100vh;
}
you can change the opacity value according to your need.
Tranparent fiddle and if you want then with white background fiddle
I have a web site with a fixed height black header like the one used here:
https://elementsproject.org/posts/
Notice how when a user scrolls the page the black text hits the black header. As the white background page with black text scrolls to the top I would like the black text color to fade away. In other words what I would like to do is to have a header bottom border with a white color where the opaqueness (is that a word) goes from 100% to zero.
Can someone tell me how I can make the opaque property change in this way from top to bottom of the header strip? Note that I'm looking for a modern browser solution only so that might make it a bit easier.
Thanks
you can use a box-shadow or a linear-gradient for this.
/* filled 50/50 */
background-image: linear-gradient(#yourBackgroundColorHere, transparent);
/* just the last 25% */
background-image: linear-gradient(#yourBackgroundColorHere 75%, transparent);
for more information check CSS-Tricks.com https://css-tricks.com/css3-gradients/
/* just a box-shadow under your header */
box-shadow: 0px 0px 20px 20px #yourBackgroundColorHere;
for more information about box-shadow check CSS-Tricks.com https://css-tricks.com/almanac/properties/b/box-shadow/
--
disclaimer: I'm not affiliated with css-tricks.com in any way, it is just a great website about everything css
try this code in style
100%
div { opacity: 0.0; }
50%
div { opacity: 0.5; }
0%
div { opacity: 1.0; }
for animation in jquery
$("#DivID").animate({opacity: 0}, 5000); //5 sec transaction