vB5: How to make the Green Online icon "Glow" using Pure CSS

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • glennrocksvb
    Former vBulletin Developer
    • Mar 2011
    • 4011
    • 5.7.X

    vB5: How to make the Green Online icon "Glow" using Pure CSS

    No animated gif. No jQuery animation. No additional image. Just pure CSS3 animation coolness.

    Add this in additional css template or via Sitebuilder > Style > CSS Editor:

    Code:
    .b-icon__status--green:after {
        content: '';
        border: 10px solid #6e9d00; /* green, change as needed */
        background: transparent;
        border-radius: 40px;
        height: 40px;
        width: 40px;    
        position: absolute;
        top: -24px; /* you may have to tweak this if you move it from the default position */
        left: -22px; /* you may have to tweak this if you move it from the default position */
        z-index: 1;
        opacity: 0;
        -webkit-animation: glow 3s ease-out infinite;
        animation: glow 3s ease-out infinite;
    }
    
    @-webkit-keyframes glow {
        0% {
            -webkit-transform: scale(0);
            opacity: 0.0;
        }
    
        25% {
            -webkit-transform: scale(0);
            opacity: 0.1;
        }
    
        50% {
            -webkit-transform: scale(0.1);
            opacity: 0.3;
        }
    
        75% {
            -webkit-transform: scale(0.5);
            opacity: 0.5;
        }
    
        100% {
            -webkit-transform: scale(1);
            opacity: 0.0;
        }
    }
    
    @keyframes glow {
        0% {
            transform: scale(0);
            opacity: 0.0;
        }
    
        25% {
            transform: scale(0);
            opacity: 0.1;
        }
    
        50% {
            transform: scale(0.1);
            opacity: 0.3
        }
    
        75% {
            transform: scale(0.5);
            opacity: 0.5;
        }
    
        100% {
            transform: scale(1);
            opacity: 0.0;
        }
    }
    Enjoy!
    Last edited by glennrocksvb; Fri 22 Jan '16, 7:13pm. Reason: Typo

    Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!
  • megabink
    Member
    • Jan 2012
    • 43
    • 4.1.x

    #2
    Just added this code and it looks stunning thanks Glenn.

    Comment

    • josueinaki
      Senior Member
      • Sep 2015
      • 199
      • 5.1.x

      #3
      Very nice stuff! Thanks Glenn!

      Comment

      • glennrocksvb
        Former vBulletin Developer
        • Mar 2011
        • 4011
        • 5.7.X

        #4
        Thanks guys!

        Btw, as I put in the comment in the CSS, you might need to adjust the left and top position of the glowing icon if it's not centered within the static green icon.

        Code:
        top: -24px; /* you may have to tweak this if you move it from the default position */
        left: -22px; /* you may have to tweak this if you move it from the default position */

        Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

        Comment

        • Aros12
          Member
          • Jan 2016
          • 74
          • 5.0.x

          #5
          Sweet! Thanks Glenn!

          Comment

          • Craig
            Senior Member
            • Jan 2008
            • 996
            • 6.X

            #6
            Glenn,

            This is neat.

            Anyway to do this so the "new post" icon on a forum flashes when there is a new or unread post in a forum?
            adktramping ~ my happy place.

            "Whoever said practice makes perfect was an idiot. Humans can't be perfect because we're not machines." ~ Sam Gardner.

            Vote for your favorite feature requests and the bugs you want to see fixed.

            Comment

          • Skyyg Skyg
            Senior Member
            • Nov 2015
            • 117
            • 5.5.x

            #7
            "Sitebuilder > Style > CSS Editor:"How to open CSS Editor
            Click image for larger version

Name:	999.jpg
Views:	340
Size:	76.6 KB
ID:	4338618
            WTF

            Comment

            • glennrocksvb
              Former vBulletin Developer
              • Mar 2011
              • 4011
              • 5.7.X

              #8
              In the front end, toggle Edit Site to ON, then click Style > CSS Editor, select the target style/theme

              or

              In AdminCP, search for css_additional template and then edit it.


              For vBCloud customers, only the first option is available.

              Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

              Comment

              • glennrocksvb
                Former vBulletin Developer
                • Mar 2011
                • 4011
                • 5.7.X

                #9
                Originally posted by NumNum
                Glenn,

                This is neat.

                Anyway to do this so the "new post" icon on a forum flashes when there is a new or unread post in a forum?
                Here it is. But wouldn't it be distracting if multiple forums have unread posts and all of them are glowing?

                Code:
                .forum-list-container .forum-item.new .cell-forum .icon { position: relative; }
                .forum-list-container .forum-item.new .cell-forum .icon:after {
                    content: '';
                    border: 10px solid #2174AE; /* blue, change as needed */
                    background: transparent;
                    border-radius: 40px;
                    height: 40px;
                    width: 40px;    
                    position: absolute;
                    top: -24px; /* you may have to tweak this if the glow is not centered with the icon */
                    left: -23px; /* you may have to tweak this if the glow is not centered with the icon */
                    z-index: 1;
                    opacity: 0;
                    -webkit-animation: glow 3s ease-out infinite;
                    animation: glow 3s ease-out infinite;
                }
                
                @-webkit-keyframes glow {
                    0% {
                        -webkit-transform: scale(0);
                        opacity: 0.0;
                    }
                
                    25% {
                        -webkit-transform: scale(0);
                        opacity: 0.1;
                    }
                
                    50% {
                        -webkit-transform: scale(0.1);
                        opacity: 0.3;
                    }
                
                    75% {
                        -webkit-transform: scale(0.5);
                        opacity: 0.5;
                    }
                
                    100% {
                        -webkit-transform: scale(1);
                        opacity: 0.0;
                    }
                }
                
                @keyframes glow {
                    0% {
                        transform: scale(0);
                        opacity: 0.0;
                    }
                
                    25% {
                        transform: scale(0);
                        opacity: 0.1;
                    }
                
                    50% {
                        transform: scale(0.1);
                        opacity: 0.3
                    }
                
                    75% {
                        transform: scale(0.5);
                        opacity: 0.5;
                    }
                
                    100% {
                        transform: scale(1);
                        opacity: 0.0;
                    }
                }

                Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                Comment

              • IggyP
                Senior Member
                • Mar 2012
                • 680

                #10
                wow yeah i thought it would look too busy also but actually not bad with the larger forum icons

                Comment

                • Craig
                  Senior Member
                  • Jan 2008
                  • 996
                  • 6.X

                  #11
                  Awesome, Glenn!
                  adktramping ~ my happy place.

                  "Whoever said practice makes perfect was an idiot. Humans can't be perfect because we're not machines." ~ Sam Gardner.

                  Vote for your favorite feature requests and the bugs you want to see fixed.

                  Comment

                  • Mackey
                    Member
                    • Mar 2014
                    • 44
                    • 5.1.x

                    #12
                    This really is a nice, simple, and useful enhancement. I really appreciate this.
                    Highly recommended.
                    Last edited by Mackey; Mon 21 Mar '16, 5:55pm.
                    ~ MackeyFlipClockFans.com

                    Comment

                    • mhere21
                      New Member
                      • Mar 2016
                      • 15
                      • 5.3.x

                      #13
                      Great stuff, Glenn. Thanks for sharing!
                      Come check out Web Hosting Brio and discuss everything web hosting related.

                      Comment

                      • gsm
                        New Member
                        • Apr 2008
                        • 19
                        • 5.3.x

                        #14
                        Great stuff indeed. Thanks for sharing.

                        Comment

                        Related Topics

                        Collapse

                        Working...