Add fade from another point instead vertical

Reply to Add fade from another point instead vertical on Mon, 06 Apr 2020 14:36:18 GMT

jca2112 — Mon, 06 Apr 2020 14:36:18 GMT

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

Reply to Add fade from another point instead vertical on Sun, 05 Apr 2020 19:55:22 GMT

Quesada — Sun, 05 Apr 2020 19:55:22 GMT

@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

Reply to Add fade from another point instead vertical on Sun, 05 Apr 2020 15:00:40 GMT

sdetweil — Sun, 05 Apr 2020 15:00:40 GMT

@Quesada but that is animation

Reply to Add fade from another point instead vertical on Sun, 05 Apr 2020 14:46:55 GMT

broberg — Sun, 05 Apr 2020 14:46:55 GMT

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%);
}

Reply to Add fade from another point instead vertical on Sun, 05 Apr 2020 03:12:57 GMT

Quesada — Sun, 05 Apr 2020 03:12:57 GMT

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

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

Reply to Add fade from another point instead vertical on Sun, 05 Apr 2020 03:12:04 GMT

sdetweil — Sun, 05 Apr 2020 03:12:04 GMT

@Quesada Google search, css animations