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 to transparent background on module.

    Scheduled Pinned Locked Moved Solved Custom CSS
    8 Posts 4 Posters 2.0k Views 4 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.
    • BKeyportB Offline
      BKeyport Module Developer @jamaces
      last edited by BKeyport

      Take a look at https://www.w3schools.com/css/css3_gradients.asp - you might be able to get something working through that… RGBA values seem to work there.

      The text gradients they do is different. :)

      The "E" in "Javascript" stands for "Easy"

      1 Reply Last reply Reply Quote 0
      • cowboysdudeC Offline
        cowboysdude Module Developer @jamaces
        last edited by cowboysdude

        @jamaces easy peasy…here’s an example:

        .MMM-YahooWeather .fade {      
          	-webkit-mask-image: linear-gradient(to bottom, black 10%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 10%, transparent 100%);
           height:  120px;
          }
        

        The magic is in the fade… gives you this effect: [see bottom of 4 days forecast]

        1.png

        Mykle1M J 2 Replies Last reply Reply Quote 1
        • Mykle1M Offline
          Mykle1 Project Sponsor Module Developer @cowboysdude
          last edited by

          @cowboysdude said in Add fade to transparent background on module.:

          easy peasy…here’s an example:

          Easy for a genius like you. :thumbsup:

          Create a working config
          How to add modules

          BKeyportB 1 Reply Last reply Reply Quote 1
          • BKeyportB Offline
            BKeyport Module Developer @Mykle1
            last edited by

            @mykle1 … when you pray to the CSS gods, you’re praying to @cowboysdude 🤣🤣🤣

            The "E" in "Javascript" stands for "Easy"

            cowboysdudeC Mykle1M 2 Replies Last reply Reply Quote 1
            • cowboysdudeC Offline
              cowboysdude Module Developer @BKeyport
              last edited by

              @bkeyport said in Add fade to transparent background on module.:

              @mykle1 … when you pray to the CSS gods, you’re praying to @cowboysdude 🤣🤣🤣

              Welllllllllllllllllllllllll CSS and I have a complicated relationship LOL

              1 Reply Last reply Reply Quote 0
              • Mykle1M Offline
                Mykle1 Project Sponsor Module Developer @BKeyport
                last edited by

                @bkeyport said in Add fade to transparent background on module.:

                when you pray to the CSS gods, you’re praying to @cowboysdude

                Oh hell no! :-)

                Create a working config
                How to add modules

                1 Reply Last reply Reply Quote 1
                • J Offline
                  jamaces @cowboysdude
                  last edited by jamaces

                  @bkeyport Thank you! I realized after I made the post it is called gradient.

                  For future knowledge

                  change background-color to background-image and add linear-gradient with another RGBA value.

                  Thank you for your help.

                  Is there a way to have CSS go gradient to the left and to the right?

                  I have the news module at the bottom and I really just want it to be dark in the centre where the headlines are.

                  I have tried to right and to left, I have tried radial and nothing seems to work.

                  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