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 1.8k 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.
    • J Offline
      jamaces
      last edited by jamaces

      I followed this thread to add transparent backgrounds to my custom.css

      Is it possible to set a fade to the background similar to how the default calendar and weather have a fade?

      Thanks.

      .module.calendar {
           background-colour:rgba(0,0,0,0.1);
           border-radius:10px;
           padding:4px;
      }
      BKeyportB cowboysdudeC 2 Replies Last reply Reply Quote 0
      • 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