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

Scheduled Pinned Locked Moved Solved Custom CSS
8 Posts 4 Posters 1.7k 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 Feb 24, 2021, 12:08 AM Feb 24, 2021, 12:07 AM

    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;
    }
    B C 2 Replies Last reply Feb 24, 2021, 8:37 AM Reply Quote 0
    • B Offline
      BKeyport Module Developer @jamaces
      last edited by BKeyport Feb 24, 2021, 8:40 AM Feb 24, 2021, 8:37 AM

      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
      • C Offline
        cowboysdude Module Developer @jamaces
        last edited by cowboysdude Feb 25, 2021, 2:43 AM Feb 25, 2021, 2:41 AM

        @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

        M J 2 Replies Last reply Feb 25, 2021, 1:35 PM Reply Quote 1
        • M Offline
          Mykle1 Project Sponsor Module Developer @cowboysdude
          last edited by Feb 25, 2021, 1:35 PM

          @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

          B 1 Reply Last reply Feb 25, 2021, 6:34 PM Reply Quote 1
          • B Offline
            BKeyport Module Developer @Mykle1
            last edited by Feb 25, 2021, 6:34 PM

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

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

            C M 2 Replies Last reply Feb 27, 2021, 1:44 AM Reply Quote 1
            • C Offline
              cowboysdude Module Developer @BKeyport
              last edited by Feb 27, 2021, 1:44 AM

              @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
              • M Offline
                Mykle1 Project Sponsor Module Developer @BKeyport
                last edited by Feb 27, 2021, 1:45 AM

                @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 Mar 4, 2021, 12:44 PM Mar 4, 2021, 12:43 PM

                  @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
                  1 / 1
                  • First post
                    1/8
                    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