Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.15.0 is available! For more information about this release, check out this topic.

    UNSOLVED Add fade from another point instead vertical

    Troubleshooting
    4
    7
    182
    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.
    • Quesada
      Quesada last edited by

      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 Reply Quote 0
      • S
        sdetweil @Quesada last edited by

        @Quesada Google search, css animations

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

              @Quesada but that is animation

              1 Reply Last reply Reply Quote 0
              • Quesada
                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
                • jca2112
                  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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                  This forum is using NodeBB as its core | Contributors
                  Contact | Privacy Policy