• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Add fade from another point instead vertical

Scheduled Pinned Locked Moved Unsolved Troubleshooting
7 Posts 4 Posters 867 Views 3 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Q Offline
    Quesada
    last edited by Apr 5, 2020, 2:28 AM

    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.

    S 1 Reply Last reply Apr 5, 2020, 3:12 AM Reply Quote 0
    • S Offline
      sdetweil @Quesada
      last edited by Apr 5, 2020, 3:12 AM

      @Quesada Google search, css animations

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • Q Offline
        Quesada
        last edited by Apr 5, 2020, 3:12 AM

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

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

        S 1 Reply Last reply Apr 5, 2020, 3:00 PM Reply Quote 0
        • B Offline
          broberg Project Sponsor
          last edited by Apr 5, 2020, 2:46 PM

          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%);
          }
          
          Q 1 Reply Last reply Apr 5, 2020, 7:55 PM Reply Quote 0
          • S Offline
            sdetweil @Quesada
            last edited by Apr 5, 2020, 3:00 PM

            @Quesada but that is animation

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • Q Offline
              Quesada @broberg
              last edited by Apr 5, 2020, 7:55 PM

              @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

              1 Reply Last reply Reply Quote 0
              • J Offline
                jca2112
                last edited by Apr 6, 2020, 2:36 PM

                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

                1 Reply Last reply Reply Quote 0
                • 1 / 1
                1 / 1
                • First post
                  4/7
                  Last post
                Enjoying MagicMirror? Please consider a donation!
                MagicMirror created by Michael Teeuw.
                Forum managed by Sam, technical setup by Karsten.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy