I have 2 div's and the upper div is transparent with a border radius on every corner, there is a div which is using solid background gradient underneath this and has been pushed up under the transparent div using a negative margin and z-index to put it behind the upper div.
Is there a way with CSS to hide the part of the div which is up underneath the div above it?
I did it this way because I need to maintain the corners which are highlighted in the second image.
Problem using color stops illustrated here:
jsfiddle.net/PKy8B/3/
As someone asked this would be the desired result:
Thanks everyone for the help but it looks like this is not possible to do this with a transparent div above and one behind, I have changed the top div to no longer be transparent just as a "best fix" option.
Unfortunately, the div is transparent and there's not much you can do about it. What you could do is not start the background-gradient until after the div has cleared the 'overhang' using a color-stop.
JSFiddle Demo
HTML
<div class="top"></div>
<div class="bottom"></div>
CSS
.top {
height:75px;
background-color: rgba(0, 0, 0, 0.25);
}
.bottom {
height:75px;
margin-top: -10px;
background: linear-gradient(to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 10px, /* end transparent section*/
rgba(255,0 ,0 ,0.25) 10px, /* start visible section */
rgba(255,0,0,.25) 100%);
border:1px solid black; /* added for visual reference */
z-index:-1
}
NOTE: The color stop must be the same as the amount you have moved the bottom div
Can you do the same to the top just like you do to top-
I mean -
if you have added linear-gradient(to bottom in bottom div
background: linear-gradient(to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 10px, /* end transparent section*/
rgba(255,0 ,0 ,0.25) 10px, /* start visible section */
rgba(255,0,0,.25) 100%);
then you can also also do the same for Top:
i mean do something like that with top
add this - linear-gradient(to top
background: linear-gradient(to top,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 10px, /* end transparent section*/
rgba(0,0 ,0 ,0.25) 10px, /* start visible section */
rgba(0,0,0,.25) 100%);
CHECK it here - DEMO
And i think your See More blue button will be an image. so there will be no issue with it.
Related
I'm trying to centre an image with a linear gradient. But the image either disappears or the gradient shifts.
I've tried using float: left; putting the image in a div container in an Html file then adding a gradient but if I do that the gradient doesn't show.
width:750px;
height: 1300px;
background: linear-gradient(to top,black,transparent 30%), url(/images/ian-dooley-iD5aVJFCXJg-unsplash-750x1300.jpg) no-repeat;
I hope to be able to centre or move around my image on my website while maintaining the gradient overlay.
Any help would be appreciated
background-position: 0px 0px;
background-image: linear-gradient(to bottom,
#FFFFFF 0px, /* Have one solid white area */
#FFFFFF 255px, /* at the top (255px high). */
#C4C7C9 255px, /* Then begin the gradient at 255px */
#FFFFFF 100% /* and end it at 100% (= body's height). */
);
Also see the link, this will surely help you
http://jsfiddle.net/ExpertSystem/yyvT3/
For a client I am trying to implement a background on an HTML element, which contains 2 radial gradients. One is located in the top right, one is located in the bottom left. My CSS only renders one of the radial gradients.
I have tried putting two radial gradient elements as a background:
body {
width: 100vw;
height: 100vh;
background-color: green;
background:
radial-gradient(
circle at top right,
red,
black 20%
),
radial-gradient(
circle at bottom left,
yellow,
orange 20%
);
}
Only the first radial-gradient appears, but the second one doesn't. When I switch the position of both gradients in de CSS markup, the colors change. So it appears as if only the first gradient is recognised.
I'm not sure which amount of color you want to see in the result, but my guess is you are after something like this.
body {
width: 100vw;
height: 100vh;
margin:0;
background-color: green;
background-image:
radial-gradient(
circle at top right,
red,
black 20%,
transparent 40%
),
radial-gradient(
circle at bottom left,
yellow,
orange 20%,
transparent 40%
);
}
One problem with your code was that you used the background shorthand for the background images, which resets the background color, so the green was no longer there. Use background-image instead.
Another was that both gradients covered the whole page, while you apparently want them to take up only the top right corner and bottom left corner instead. I solved this by giving them both transparent from 40%.
And I took the liberty of giving the body 0 margin, to get rid of the scrollbars.
My CSS only renders one of the radial gradients.
Simply because you are using opaque colors and by default a gradient will cover all the element so your will only see the top layer.
In addition to the answer of Mr Lister, you can adjust background-size to control the space each gradient should take:
body {
margin:0;
height: 100vh;
background:
radial-gradient(circle at top right, red, black 40%) right,
radial-gradient(circle at bottom left, yellow, orange 40%) left;
background-size:50% 100%;
background-repeat:no-repeat;
}
This looks a bit ugly but if you want to have a continuous background make sure both end color are the same:
body {
margin:0;
height: 100vh;
background:
radial-gradient(circle at top right , red, black 40%, green 60%) right,
radial-gradient(circle at bottom left, yellow, orange 40%, green 60%) left;
background-size:50.5% 100%;
background-repeat:no-repeat;
}
I have only basic knowledge on the CSS. I'm trying to give gradient color for one of my ITEM as per below guidelines and the gradient should be vertical.
I tried the below , but only the first color is coming all over the region. I dont understand that 30% and 50%. How to achieve this?
.myheader {
background: linear-gradient(to bottom, #mycolor1 85%, #mycolor2 45%, #mycolor3 10%);
}
Eveyrone is giving the to bottom solution but the trivial solution is to consider to top and keep the percentage values you are using in the picture:
linear-gradient(to top, #mycolor3 10%, #mycolor2 45%, #mycolor1 85%);
example:
body {
background: linear-gradient(to top, red 10%, purple 45%, blue 85%);
margin: 0;
height: 100vh;
}
Concerning the percentage between (50% and 30%), they are probably the color hints (also called color interpolation hints). From the new specification
Between two color stops there can be a color interpolation hint, which specifies how the colors of the two color stops on either side should be interpolated in the space between them (by default, they interpolate linearly). There can only be at most one color interpolation hint between any two given color stops; using more than that makes the function invalid.
example:
body {
background:
/* First gradient with hints*/
linear-gradient(to top, red 10%, purple 45%, blue 85%) left /45% 100%,
/* Second gradient with hints*/
linear-gradient(to top, red 10%,27.5% ,purple 45%, 57% ,blue 85%) right/45% 100%;
background-repeat:no-repeat;
margin: 0;
height: 100vh;
}
You need to specify the points in ascending order. Just invert the values you have (you don't really need the purple but could add it if desired):
body {
height: 100vh;
overflow: hidden;
background: linear-gradient(to bottom, blue 15%, red 90%) center/cover no-repeat;
}
.myheader {
width: 100px;
height: 100px;
background: linear-gradient(to bottom, blue 15%, purple 45%, red 90%);
}
<div class="myheader"></div>
The to bottom direction tells you that your gradient is going from top to bottom. So if the first color is 85%, that means that it goes down to 85% of the height of the container.
By inverting the percentage (85% -> 15%), you can achieve the result you want.
This is an example , use your rgba colors.
.myheader {
background: linear-gradient(to bottom, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%
}
The percent values must ascend in order. ( https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient )
$mycolor1: blue;
$mycolor2: purple;
$mycolor3: red;
.myheader {
background: linear-gradient(to bottom, $mycolor1 0%, $mycolor2 50%, $mycolor3 90%);
height: 200px;
width: 100px;
}
https://jsfiddle.net/qa1kLmfc/3/
For your gradient you probably could use just blue and red.
I'm trying to create a linear gradient within another linear gradient, is it possible ? example below
background: linear-gradient(to right, #color1 50%, #color2 0%)
color 1 is
background: linear-gradient(#aa0507,#e0171e,#aa0507);
color 2 is
background: linear-gradient(#f4c05b,#fcd580,#f4c05b);
the end result should be this
Simply adjust the background-position/background-size using multiple background. Basically each gradient will be half width and full height.
body {
margin:0;
height:100vh;
background:
linear-gradient(#aa0507,#e0171e,#aa0507) right/50% 100%,
linear-gradient(#f4c05b,#fcd580,#f4c05b) left /52% 100%; /*we can make this a little bigger to avoid the blank space*/
background-repeat:no-repeat;
}
You can combine the two gradients into background: linear-gradient(to right, #f4c05b, #fcd580, #f4c05b 50%, #aa0507 50%, #e0171e, #aa0507) to get the effect - note that the gradients on the both left / right sections are left to right in this answer.
See demo below:
body {
background: linear-gradient(to right, #f4c05b, #fcd580, #f4c05b 50%, #aa0507 50%, #e0171e, #aa0507);
}
I'm trying to create a grid in pure CSS using background-image and -webkit-linear-gradient. I have the spacing and the tiling working fine, but for a reason I can't figure out, the vertical lines are coming out as #B8B8B9 instead of #E3E4E5 like I specify. Any ideas?
JSFiddle: http://jsfiddle.net/2faSt/
CSS:
.grid {
position: absolute;
width: 100%;
height: 500px;
background-image: -webkit-linear-gradient(0deg, #e3e4e5 0px, transparent 1px, transparent 15px, #e3e4e5 16px, transparent 16px, transparent 99px, #e3e4e5 100px, #ffffff 100px), -webkit-linear-gradient(90deg, transparent 20px, #e3e4e5 20px);
background-size: 111px 21px;
}
If you want to get really the color that you specify, you should set 2 color stops with the same color, separated by at least 1 px.
Otherwise, you set only the point of gradient change, but it is already changing to transparent, even in the same pixel
And, even it is non intuitive, transparent if black transparent (rgba (0,0,0,1))
See this fiddle
There, you have this CSS:
#one {
background: linear-gradient(90deg, #e3e4e5, transparent);
}
#two {
background: linear-gradient(90deg, #e3e4e5, rgba(255, 255, 255, 1));
}
In the first div (The same color stops that in your question), you can see that in the middle of the transition the color is darker than at the beginning.
As a comparison, in the second you can see what probably you intended, make the transition to white transparent.