Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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 Glenn Vergara; Fri 22nd Jan '16, 7:13pm. Reason: Typo

    GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

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

    Comment


    • #3
      Very nice stuff! Thanks Glenn!

      Comment


      • #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 */

        GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

        Comment


        • #5
          Sweet! Thanks Glenn!

          Comment


          • #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?
            Organizations must hire quality people — "If you hire stupid people, they are not going to get better over time," ~ Gordon Graham.

            vB Mods That Rock!

            Comment


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

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

            Comment


            • #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.

              GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

              Comment


              • #9
                Originally posted by NumNum View Post
                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;
                    }
                }

                GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

                Comment


                • William Thomas Jr
                  William Thomas Jr commented
                  Editing a comment
                  Awesome!!! Have it working, and no, since the color matches the image it is less noticeable: https://www.christforums.org/

                • Glenn Vergara
                  Glenn Vergara commented
                  Editing a comment
                  You may also want to try using red.

                  Code:
                  border: 10px solid #F00;

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

                Comment


                • #11
                  Awesome, Glenn!
                  Organizations must hire quality people — "If you hire stupid people, they are not going to get better over time," ~ Gordon Graham.

                  vB Mods That Rock!

                  Comment


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

                    Comment


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

                      Comment


                      • #14
                        Great stuff indeed. Thanks for sharing.

                        Comment

                        Related Topics

                        Collapse

                        Working...
                        X