"Insert gradient layers" (#1231298) / Kreatura

Comments

vadim started the conversation

July 6, 2017 at 1:05pm

I'm trying to insert gradients at the top and the bottom of a full screen slider. The css is:

.ls-layers:before, .ls-layers:after {content: ''; position: absolute; width: 100%; height: 200px; z-index: 30; }
.ls-layers:before { top: 0; background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66000000', endColorstr='#00000000',GradientType=0 ); }
.ls-layers:after { bottom: 0; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 ); }

but neither :before or :after are appearing

Is it possible?

[deleted] replied
July 9, 2017 at 10:28am
Hey vadim,

I would recommend a different approach instead.

You could create two layers (DIV / HTML), set gradient background color on them, size them (width: 100% and let's say height: 25%), position them on the top (top: 0) and bottom (top: 100%) of the slider and set them to be static layer.