I think it's kind of an optical illusions... but wonder how to remove white line of end of linear-gradient.
Here is my css code.
position: absolute;
z-index: 1;
bottom: 0;
background: linear-gradient(180deg, rgba(210, 210, 210, 0) 18.61%, #262626 100%);
width: 100%;
height: 180px;
and looks like this.
Thanks !
This is what you need! Easing linear gradients.
It's a really interesting read, but it essentially boils down to manually easing your gradient like this:
linear-gradient(
hsl(0, 0%, 0%) 0%,
hsla(0, 0%, 0%, 0.738) 19%,
hsla(0, 0%, 0%, 0.541) 34%,
hsla(0, 0%, 0%, 0.382) 47%,
hsla(0, 0%, 0%, 0.278) 56.5%,
hsla(0, 0%, 0%, 0.194) 65%,
hsla(0, 0%, 0%, 0.126) 73%,
hsla(0, 0%, 0%, 0.075) 80.2%,
hsla(0, 0%, 0%, 0.042) 86.1%,
hsla(0, 0%, 0%, 0.021) 91%,
hsla(0, 0%, 0%, 0.008) 95.2%,
hsla(0, 0%, 0%, 0.002) 98.2%,
hsla(0, 0%, 0%, 0) 100%
);
If this seems daunting or you need to replicate many times, head to the bottom of the article. It describes ways to automate the effect using CSS processors like PostCSS or SCSS.
Related
I have the following CSS code:
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#7b7878), to(#white));
background: -moz-radial-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#7b7878), to(#white));
background: radial-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#7b7878), to(#white));
Which is responsible for the following styling:
It works in Chrome, but this is not working in Firefox and IE. What am I missing here??
use this code, this will work on IE 10,google chrom 26.0,fire fox 16.0 ,opera 12.1 and safari 6.1:
width:100%;
height:3px;
background: -webkit-radial-gradient(#7B7878 1%, #BBBBBB 30%, #CCCCCC 40%, #FFF 70%);
background: -o-radial-gradient(#7B7878 1%, #BBBBBB 30%, #CCCCCC 40%, #FFF 70%);
background: -moz-radial-gradient(#7B7878 1%, #BBBBBB 30%, #CCCCCC 40%, #FFF 70%);
background: radial-gradient(#7B7878 1%, #BBBBBB 30%, #CCCCCC 40%, #FFF 70%);
And also give the same result as you want.
I'm trying to use two pseudoelements :after, but only the first one is working:
[data-msgcounter]:after {
background-color: #FF6969;
background-image: -webkit-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -moz-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -o-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -ms-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: linear-gradient(#FF6969 0%, #ff0000 100%);
content: attr(data-msgcounter);
}
[data-notcounter]:after {
background-color: #FF6969;
background-image: -webkit-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -moz-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -o-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -ms-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: linear-gradient(#FF6969 0%, #ff0000 100%);
content: attr(data-notcounter);
}
Anyone have tips or a solution?
I want an hr that contains 50% of the page.
hr {
background-color: #E0DFDF;
background-image: -moz-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -o-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
border: none;
margin: 1.5em auto;
height: 1px;
width: 50%;
}
background-color: #border; is invalid CSS. I guess you are porting some code from preprocessor (e.g. SASS), please fix it.
Your syntax is wrong:
/* incorrect */
-webkit-linear-gradient: (left, white 0%, #E0DFDF 50%, white 100%);
^^
/* correct */
-webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
Here's a demo:
hr {
background-image: -moz-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: -o-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
background-image: linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
border: none;
margin: 1.5em auto;
height: 1px;
width: 50%;
}
<hr>
Your syntax is incorrect. linear-gradient: (...) should be ---> linear-gradient(...), without the semi-colon(:).
hr {
background: -webkit-linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
background: -moz-linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
background: -o-linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
background: linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
border: 0;
margin: 1.5em auto;
height: 1px;
width: 50%;
}
<hr />
I've Two CSS for HTML BODY Background
I'm using this css as background of my page ; i want to overlap these two and get combined effect?
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.75, #FFFFFF), color-stop(1, #A3EF69));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
second one is
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.75, #FFFFFF), color-stop(1, #A3EF69));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
How can i combine these two into one?
Two Issues with Your Code
First, the two images must be called within a single background-image call, otherwise the way the "cascading" part of CSS works the second one will just override the first. So the first thing that needs changing is to make all of the calls grouped like this (each successive call separated by commas):
background-image:
linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%),
linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
This is what the possible duplicate question noted to do, and that is correct, but it probably did not work for you because...
Second, each of those gradient images you have defined are non-transparent, so one of them will "over paint" on top of the other and effectively give you just one image. I think what you really want is a fade effect, which will require you to use alpha opacity to achieve. So every instance of #FFFFFF needs to change to rgba(255, 255, 255, 0), then you get the blending I believe you seek:
background-image:
linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0) 75%, #A3EF69 100%),
linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0) 75%, #A3EF69 100%);
I have an image from a designer, that looks like this:
I'd like to make it 1px height vertically-repeated (as background for scroll-bars grip). Is there a way to emulate the glowing effect in the middle of the image, using CSS3?
Regards,
Create another div on top of it, with the following background:
background-image: linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);
Of course, to be of any use, this should be rewritten like this:
background-image: linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);
background-image: -o-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);
background-image: -moz-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);
background-image: -webkit-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);
background-image: -ms-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);