Home › Forums › CSS › linear gradient no longer working in safari 11 (high sierra) › Reply To: linear gradient no longer working in safari 11 (high sierra)
September 30, 2017 at 10:44 am
#260763
Atelierbram
Participant
The code can be more sturdy if you use the newer syntax for linear-gradients and if you define that gradient as a background-image ISO a value for the content
property on the pseudo element. So ISO this:
.block .block-content .the-excerpt::before {
content: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0)), color-stop(0.8, rgb(255, 255, 255)), to(white));
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 35px;
}
Something like this:
.block .block-content .the-excerpt::before {
content: "";
position: absolute;
right:0;bottom:0;left:0;
width: 100%;
height: 35px;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}
Now let a build tool like autoprefixer take care of different prefixes for older browsers.