Add fade from another point instead vertical

Quesada

I want to know if there’s any way to put fade from the right to the left. In calendar module i want to add fade effect to long lenght events.

sdetweil

@Quesada Google search, css animations

Quesada

i don’t want animation. What i want is this:

https://codepen.io/sebj54/pen/einIw

broberg

you can play around with gradient backgrounds

maybe this works (disclaimer : I haven’t tried it, just looked up text fade with css):

.calendar .title:before {
    content:'';
    width:100%;
    height:100%;    
    position:absolute;
    left:0;
    top:0;
    background: linear-gradient(to right, transparent, #000 100%);
}

sdetweil

@Quesada but that is animation

Quesada

@broberg It didn’t work out for me, but that’s okay, I’ll try to see if it works out differently.

Thanks for help

jca2112

Here is the CSS I use for a vertical gradient:

.calendar table:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.48) 100%);
}

You could modify the above (using the deg angle) to create a horizontal gradient.

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient