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 1.3k 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.
    • QuesadaQ Offline
      Quesada
      last edited by

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

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

      S 1 Reply Last reply Reply Quote 0
      • brobergB Offline
        broberg Project Sponsor
        last edited by

        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%);
        }
        
        QuesadaQ 1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil @Quesada
          last edited by

          @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
          • QuesadaQ Offline
            Quesada @broberg
            last edited by

            @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
            • jca2112J Offline
              jca2112
              last edited by

              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
              • First post
                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